求助、、、如何点击表格内容弹出一个弹出层,并且能获取到对应的数据?

提问 未结 20 327
今晚一定早点睡
悬赏:20飞吻
版本:layui 浏览器:
如图


老哥们指点一下

table.render({
elem: '#test'
, url: url_index+'role/list'
// data:{arr}
, request: {
pageName: 'currentPage'
},
where : {}
,response: {
statusName: 'resultCode' //规定数据状态的字段名称,默认:code
,statusCode: 0 //规定成功的状态码,默认:0
,msgName: 'hint' //规定状态信息的字段名称,默认:msg
// ,countName: 'totalResult' //规定数据总数的字段名称,默认:count
,dataName: 'data'//规定数据列表的字段名称,默认:data
//,pageName:'page'
}
, parseData: function (res) {
console.log(res);
var lis = res.data;
var lis2 = res.data_1;
return {
"resultCode": 0, //解析接口状态
"msg": "", //解析提示文本
"count": res.totalResult, //解析数据长度
"data": res.data //解析数据列表
};
}
, cellMinWidth: 80 //全局定义常规单元格的最小宽度
,toolbar: true
, cols: [[
{type: 'checkbox'}
, {field: 'role_NAME',title: '角色',align: 'center'}
, {field: 'dep_NAME', title: '所属部门', align: 'center'}
, {field: 'add_QX', title: '权限添加', align: 'center',templet:'<div ><i data-type="add" class="layui-icon layui-icon-add-circle" style="font-size: 30px; "></i></div>'}
, {field: 'del_QX', title: '权限删除', align: 'center',templet:'<div ><i data-type="add" class="layui-icon layui-icon-delete" style="font-size: 30px; "></i></div>'}
, {field: 'LAST_LOGIN', title: '权限修改', align: 'center',templet:'<div ><i data-type="add" class="layui-icon layui-icon-edit" style="font-size: 30px; "></i></div>'}

]]
,done: function(res, page, count){
// $("[data-field='add_QX']").children().each(function(){
// if($(this).text()=='1'){
// $(this).text("城市生活垃圾经营性清扫服务")
// }else if($(this).text()=='2'){
// $(this).text("城市生活垃圾经营性收集服务")
// }else if($(this).text()=='3'){
// $(this).text("城市生活垃圾经营性运输服务")
// }else if($(this).text()=='4'){
// $(this).text("城市生活垃圾经营性处理服务")
// }
// })
//得到当前页码
console.log(page);
//得到数据总量
console.log(count);
}
, page: true
});
回帖
  • lll_lll
    2019-7-17
    你可以给表格中的元素加lay-event事件:如lay-event=‘event’ 具体实现代码如下
    layui.use('table', function () {
    var table = layui.table;
    developMileageList = table.render({
    elem: '#id',
    url: '----',
    cols: [[
    {
    field: 'updateDevelopMileageById', title: '操作', width: 180, align: 'center',
    templet: function (rowData) {
    //具体代码
    var btn = '<button class="layui-btn layui-btn-xs" " lay-event="editRow"">编辑</button>'+
    '<button class="layui-btn layui-btn-xs layui-btn-danger" style="width: 60px;" lay-event="deleteRow"">删除</button>';
    return btn;
    }
    }
    ]]
    });

    //监听单元格事件,这里只监听答案的单元格点击时间,tableList是lay-filter="tableList"的值
    table.on('tool(tableList)', function(obj){
    var data = obj.data;//此处的data就是表格里面的值,你可以在后台打印看一下
    //修改发展历程
    if(obj.event === 'editRow'){
    //打开弹窗
    layui.layer.open({
    title: '修改 ID 为 ['+ data.id +'] 的发展历程',
    type: 1,
    skin: 'layui-layer-rim', //加上边框
    area: ['800px', 'auto'] ,//宽高
    shadeClose: true, //点击遮罩关闭
    content: $('#updateDevelopMileage'),//'\<\div style="padding:20px;">自定义内容\<\/div>',
    });
    //给lay-filter="updateDevelopMileage"的表单指定的元素赋初值
    form.val("updateDevelopMileage", {
    "developTime": data.developTime
    , "developContent": data.developContent
    });
    }
    //删除发展历程
    else if(obj.event === 'deleteRow'){

    }
    });
    });
    0 回复
  • @lll_lll 请问一下
     //监听单元格事件,这里只监听答案的单元格点击时间,tableList是lay-filter="tableList"的值
    这个tableList是在哪里定义的
    0 回复
  • @lll_lll 用了你这个方法,点击的时候还是没任何效果
    , cols: [[
    {type: 'checkbox'}
    , {field: 'role_NAME',title: '角色',align: 'center'}
    , {field: 'dep_NAME', title: '所属部门', align: 'center'}
    , {field: 'add_QX', title: '权限添加', align: 'center',templet:'<div ><i data-type="add_1" class="layui-icon layui-icon-add-circle" style="font-size: 30px; "></i></div>'}
    , {field: 'del_QX', title: '权限删除', align: 'center',templet:'<div ><i data-type="add" class="layui-icon layui-icon-delete" style="font-size: 30px; "></i></div>'}
    , {field: 'LAST_LOGIN', title: '权限修改', align: 'center',templet:'<div ><i data-type="add" class="layui-icon layui-icon-edit" style="font-size: 30px; "></i></div>'}

    ]]
    table.on('tool(test)', function(obj){
    var data = obj.data;//此处的data就是表格里面的值,你可以在后台打印看一下
    console.log(data)
    //修改发展历程
    if(obj.event === 'add_1'){
    //打开弹窗
    alert("1111")
    return false
    0 回复
  • @今晚一定早点睡
    //注:tool是工具条事件名,tableList是table原始容器的属性 lay-filter="对应的值"
    0 回复
  • @咩咩咩咩咩 [泪] 还是没效果,老哥指导一下
    0 回复
  • lll_lll
    2019-7-17
    @今晚一定早点睡 你肯定是哪里写错了,不会效果的
    下面是文档,自己对照看一下
    https://www.layui.com/doc/modules/table.html#ontool
    0 回复
  • lll_lll
    2019-7-17
    @今晚一定早点睡
     cols: [[
    {type: 'checkbox'}
    , {field: 'role_NAME',title: '角色',align: 'center'}
    , {field: 'dep_NAME', title: '所属部门', align: 'center'}
    , {field: 'add_QX', title: '权限添加', align: 'center',templet:'<div ><i data-type="add_1" class="layui-icon layui-icon-add-circle" style="font-size: 30px; "></i></div>'} //你的图标没有添加lay-event事件哦,如下添加一个
    , {field: 'del_QX', title: '权限删除', align: 'center',templet:'<div ><i data-type="add" class="layui-icon layui-icon-delete" style="font-size: 30px; " lay-event="deleteRow"></i></div>'} //这里添加了一个lay-event="deleteRow"事件,然后在判断 if(obj.event === 'deleteRow'){}
    , {field: 'LAST_LOGIN', title: '权限修改', align: 'center',templet:'<div ><i data-type="add" class="layui-icon layui-icon-edit" style="font-size: 30px; "></i></div>'}

    ]]
    0 回复
  • lll_lll
    2019-7-17
    @今晚一定早点睡
    //tableList是lay-filter="tableList"的值,是下面lay-filter的值
    <table id="tableList" lay-filter="tableList" cellpadding="0" cellspacing="0"></table>
    0 回复
  • @lll_lll 我在权限添加这栏里面的li标签加了data-type="add_1"的,还是没效果
    0 回复
  • lll_lll
    2019-7-17
    @今晚一定早点睡 大哥不是添加那个,是添加lay-filter=“add_1”,你有没有看文档哦,data-type是什么
    0 回复