html多重表格设置,表格设置.html

表格设置

穿梭框组件

设置

编辑

删除

layui.use(['table','jquery'], function(){

var table = layui.table;

var $=layui.jquery;

//第一个实例

table.render({

elem: '#demo'

,height: 312

,url: 'http://stuapi.ysd3g.com/api/GetRolesLayUI'//数据接口

,method:'post'

,where:{token:'7b69d374-05e1-4073-a794-4d027fc768b5'}

,page: true //开启分页

,cols: [[ //表头

{field: 'Id', title: '角色id', sort: true, fixed: 'left'}

,{field: 'Name', title: '角色名称'}

,{field: 'Int0', title: ''},

,{field: 'String0', title: ''}

,{fixed: 'right',

width:150, align:'center',

toolbar: '#barDemo'}

]]

});

//监听工具条

table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"

var data = obj.data; //获得当前行数据

var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)

var tr = obj.tr; //获得当前行 tr 的DOM对象

if(layEvent === 'detail'){ //查看

layer.open({

type: 1,

title:'用户['+data.Name+']设置职位',

area: ['500px', '300px'],

content: $('#test1') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响

});

//do somehing

} else if(layEvent === 'del'){ //删除

layer.confirm('真的删除行么', function(index){

obj.del(); //删除对应行(tr)的DOM结构，并更新缓存

layer.close(index);

$.post(

'http://stuapi.ysd3g.com/api/DeleteRole',

{

roleId:data.Id,

token:'7b69d374-05e1-4073-a794-4d027fc768b5',

},function(res) {

if(res.success){

layer.msg('操作成功');

}else{

layer.msg('操作失败');

}

},'josn'

)

//向服务端发送删除指令

});

} else if(layEvent === 'edit'){ //编辑

//do something

//同步更新缓存对应的值

obj.update({

username: '123'

,title: 'xxx'

});

}

layui.use(['transfer','jquery'], function(){

var transfer = layui.transfer;

var $=layui.jquery;

var arr=new Array();

$.post(

'http://stuapi.ysd3g.com/api/GetRolesByUserIdLayUI',

{

uId:data.id,

token:'7b69d374-05e1-4073-a794-4d027fc768b5',

},function(res){

for(var i=0;i

arr.push-butt

}console.log(arr);

},'json'

);

$.post(

'http://stuapi.ysd3g.com/api/GetRolesAll',

{

token:'7b69d374-05e1-4073-a794-4d027fc768b5',

},function(res){

//渲染

transfer.render({

elem: '#test1' ,//绑定元素

title:['系统', '角色'],

showSearch:true

,data: res

,id: 'demo1' //定义索引

,parseData: function(res){

return {

"value": res.Id //数据值

,"title": res.Name //数据标题

}

}

});

},'json');

}

)

});

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史