//监听数据表格工具条
table.on('tool(contentList)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent === 'detail'){
x_content_detail('小说详情','content-detail.html',data,600,500);
} else if(layEvent === 'del'){
layer.confirm('真的删除行么', function(index){
x_content_delete('/novel/delete',data.novelId);
layer.close(index);
});
} else if(layEvent === 'edit'){
x_content_edit('编辑小说','content-edit.html',data,600,500);
}
});
layui弹出层回显代码:
title:弹出层标题
url:弹出层html页面
data:回显数据
w:宽度
h:高度
function x_content_edit(title, url, data, w, h) {
if (title == null || title == '') {
title = false;
}
;
if (url == null || url == '') {
url = "404.html";
}
;
if (w == null || w == '') {
w = 800;
}
;
if (h == null || h == '') {
h = ($(window).height() - 50);
}
;
layer.open({
type: 2, //iframe层
area: [w + 'px', h + 'px'],
fix: false, //不固定
btn: ['确认', '取消'],//弹出层按钮
maxmin: true,
shadeClose: true,
shade: 0.4,
title: title,
offset: '50px',
content: url,
success: function (layero, index) {//弹出层打开后的回调函数
var body = layer.getChildFrame('body', index);//获取弹出层的dom元素
result = JSON.stringify(data);
result = $.parseJSON(result);
$.each(result, function (item) {
body.find('#A_' + item).val(result[item]);//给弹出层页面赋值,id为对应弹出层表单id
if (item == 'contentId') {
body.find('#B_contentId').val(result[item]);//这里是为动态select赋值,在弹出层创建隐藏元素
} else if (item == 'type') {
body.find('#B_type').val(result[item]);
} else if (item == 'recommendFlag') {
body.find('#B_recommendFlag').val(result[item]);
}
});
},
yes: function (index, layero) {//点击“确认”按钮后触发的事件
var data = {};
var body = layer.getChildFrame('body', index);
var form = body.find("#novelUpdate").serializeArray();//获取指定id的表单
$.each(form, function () {
data[this.name] = this.value;
});
data = JSON.stringify(data);
var content = {'novelJson': data};
$.post('/novel/update', content, function (rec) {//得到数据提交到后端进行更新
if (rec.code == 0) {
layer.alert(rec.msg, {icon: 6}, function (index) {
layer.close(index);
});
layui.use('table', function () {
var table = layui.table;
table.reload('contentList', {
url: '/novel/novelList' //数据接口,更新成功后刷新数据表格
});
});
} else {
layer.alert(rec.msg, {icon: 5}, function (index) {
layer.close(index);
});
}
layer.close(index);
}, 'json');
return false;
}
});
}
从后台读取数据渲染到弹出层的select中,并设置默认选中值:
function showNovelType() {
layui.use('form',function () {
$ = layui.jquery;
var form = layui.form;
$.ajax({
type:'get',
url:'/common/getNovelType', //后端接口
dataType:'json',
success:function (rec) {
if(rec['code']==0){
var novelType=document.getElementById('A_type');
var B_type=document.getElementById('B_type');
$.each(rec.data,function(i,item){
var option=document.createElement("option"); //创建option标签
option.setAttribute("value",item['typeId']);//设置value值
if(!B_type) {
//要同时判断 null 和 undefined
}else {
if(item['typeId']==B_type.value) {
option.setAttribute("selected",'true');//设置选中状态
}
}
option.innerText=item['typeName'];//显示text内容
novelType.appendChild(option);
form.render('select');//重新渲染
})
}
}
})
})
}
function showRecommendPotion() {
layui.use('form',function () {
$ = layui.jquery;
var form = layui.form;
$.ajax({
type:'get',
url:'/common/getRecommendPosition',
dataType:'json',
success:function (rec) {
if(rec['code']==0){
var recommendPotion=document.getElementById('A_recommendFlag');
var B_recommendFlag=document.getElementById('B_recommendFlag');
$.each(rec.data,function(i,item){
var option=document.createElement("option");
option.setAttribute("value",item['recommendId']);
if(!B_recommendFlag) {
//要同时判断 null 和 undefined
}else{
if(item['recommendId']==B_recommendFlag.value) {
option.setAttribute("selected",'true');
}
}
option.innerText=item['recommendName'];
recommendPotion.appendChild(option);
form.render('select');
})
}
}
})
})
}
function showContentProvider() {
layui.use('form',function () {
$ = layui.jquery;
var form = layui.form;
$.ajax({
type:'get',
url:'/contentProvider/getAllProviders',
dataType:'json',
success:function (rec) {
if(rec['code']==0){
var A_contentId=document.getElementById('A_contentId');
var B_contentId=document.getElementById('B_contentId');
$.each(rec.data,function(i,item){
var option=document.createElement("option");
option.setAttribute("value",item['contentId']);
if(!B_contentId) {
//要同时判断 null 和 undefined
}else{
if(item['contentId']==B_contentId.value) {
option.setAttribute("selected",'true');
}
}
option.innerText=item['contentName'];
A_contentId.appendChild(option);
form.render('select');
})
}
}
})
})
}
- layui如何自定义弹出层关闭事件
在某些业务场景下,我们需要自定义弹出层关闭事件,代码示例如下: layui.use('layer', function () { var layer = layui.layer; layer.open ...
- layui如何隐藏弹出层关闭的按钮
layui默认弹出层是带有关闭按钮的,但是在某些场景我们不需要layui的关闭按钮,这时只需添加closeBtn :0即可 效果图如下: 示例代码如下: layui.use('layer', func ...
- Layui弹出层、日期和时间选择、即时通讯、分页
Layui弹出层.日期和时间选择.即时通讯.分页 弹层组件文档 - layui.layer 对于弹出层的感觉是:layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持. ...
- 微擎使用post提交,并显示弹出层
微擎使用post提交,并显示弹出层 function changeStatus(id, status) { // 提交数据 var id = parseInt(id); var status = pa ...
- layui弹出层处理(获取、操作弹出层数据等)
要点: 字符串被渲染为弹窗层之后,回自动转换为DOM,可以使用jq进行各种操作 <!DOCTYPE html> <html> <head> <meta cha ...
- LayUI之弹出层
1.导入插件 layui使用需要导入layui的js和css: <link rel="stylesheet" href="layui/css/layui.css&q ...
- 权限管理系统之LayUI实现页面增删改查和弹出层交互
由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久. 同一 ...
- 弹出层-layui
type 0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) 弹出层 //winIndex存储弹出层的index,以便关闭弹出层时使用 function openWindo ...
- layui关闭弹出层
layui关闭弹出层,今天我在vscode中使用p parent.layer.closeAll()发现没效果 换成layer.closeAll()就解决了这个问题. 由此我觉得关闭layui关闭弹出层 ...
随机推荐
- Mysql索引使用解析
摘自:http://blog.chinaunix.net/uid-25063573-id-3032578.html Mysql索引使用解析 1.索引作用 在索引列上,除了上面提到的有序查找之外,数据库 ...
- Android中自定义广播的实现
今天尝试了自定义的广播,说是自定义的广播其实质就是自己编写一个类继承broadcastreceiver类,然后再onreceiver方法中实现某些功能,在这个过程中我们可以自定义我们要发出的广播,可以 ...
- 【Java基础】浅谈常见设计模式
Num1:单例模式 基本概念:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 常见写法: 懒汉式 public class Singleton { /* 持有私有静态实例,防止被引用,此处赋值 ...
- (void) (&_min1 == &_min2);【转】
本文转载自:https://blog.csdn.net/xiaofeng_yan/article/details/5248693 偶然在<./linux/include/linux/kernel ...
- 【codeforces 242E】XOR on Segment
[原题题面]传送门 [题面翻译]传送门 [解题思路] 操作涉及到区间求和和区间异或,考虑到异或操作,我们对每个数二进制分解. 把每一位单独提出来做,异或要么取反要么变为不变,对于每一位建一颗线段树,那 ...
- windows cannot find powershell.exe windows 7
This can happen when the environment variables are missing an entry for Powershell. $env:path must i ...
- springmvc定时任务
1.SpringMVC.xml文件加这个 <task:annotation-driven scheduler="qbScheduler"/> <task:sche ...
- [转载] 修改linux终端用户名的颜色
此文章为转载,来源:https://blog.csdn.net/vactivx/article/details/62219349,目的是怕以后他博客打不开,文章就没了.存个档. 这个基本都需要手动修改 ...
- T2027 蜈蚣
传送门 思路: 设 f[ i ][ j ] 为第 i 节,切到第 j 段的最大恶心值. 枚举 左端点 j ,右端点 i ,段数 k → 转移: f [ i ][ k ] = max ( f [ i ...
- mac 开启ntfs 权限
原文: https://zhuanlan.zhihu.com/p/29542892 参考: https://bbs.feng.com/read-htm-tid-9932031.html 其实最早在OS ...