表格点击弹窗事件

liuyg

2021-06-08 95dfe3fe172f6d5ff9c761b0545c4811c2fea3d1

 widgets/searchL/Widget.js

@@ -63,7 +63,9 @@
               $('.searchLMain').hide();
            })


            $('.cloce').click(() => {
               $('.popup').css({'display': 'none'})
            })
         },

         closeToolBox: function (item) {
@@ -89,11 +91,11 @@
                  headers: {
                     'token': token
                  }
               }).then((res)=>{
                  if(res.status == 200){
               }).then((res) => {
                  if (res.status == 200) {
                     var data = res.data.data;
                     that.createData(data);
                  }else{
                  } else {
                     console.log('请求访问失败')
                  }
               })
@@ -101,10 +103,10 @@

            }
         },
         createData:function(d){
         createData: function (d) {
            var i = 1;
            for(var k in d){
               d[k].tableId = i ++;
            for (var k in d) {
               d[k].tableId = i++;
            }
            var data = d;
            this.beginLayUi(data);
@@ -163,6 +165,92 @@

               });

               table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                  var data = obj.data //获得当前行数据
                  ,layEvent = obj.event; //获得 lay-event 对应的值
                  if(layEvent === 'detail'){
                  //   layer.msg('查看操作');
                  }
                  window.open("https://www.baidu.com");
                  console.log(obj)
                 });

               table.render({
                  elem: '#test1'
                  // , url: './data'
                  , height: 474
                  , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                     // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                     layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                     //,curr: 5 //设定初始在第 5 页
                     , groups: 3 //只显示 1 个连续页码
                     , first: false //不显示首页
                     , last: false //不显示尾页
                  }
                  , cols: [[
                     { field: 'tableId', width: 59, align: 'center', unresize: true, title: '序号' }
                     , { field: 'geoName', width: 90, align: 'center', unresize: true, title: '图层名称' }
                     , { field: 'databaseName', width: 95, align: 'center', unresize: true, title: '图层属性1' }
                     , { field: 'serviceUrl', width: 95, align: 'center', unresize: true, title: '图层属性2' }
                     , { fixed: 'right', width: 115, align: 'center', unresize: true, title: '操作', toolbar: '#demoTable1' }
                  ]],
                  data: data,
                  //,skin: 'line' //表格风格
                  even: true
                  // , page: true //是否显示分页
                  , limits: false
                  , limit: 10 //每页默认显示的数量

               });
               table.on('tool(test1)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                  var data = obj.data //获得当前行数据
                  ,layEvent = obj.event; //获得 lay-event 对应的值
                  if(layEvent === 'detail'){
                  //   layer.msg('查看操作');
                  }
                  $('.popup').css({'display': 'block'});
                  $('.p-main').eq(0).css({'display': 'block'}).siblings().css({'display': 'none'});
                  console.log(obj)
                 });
					  
               table.render({
                  elem: '#test2'
                  // , url: './data'
                  , height: 474
                  , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                     // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                     layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                     //,curr: 5 //设定初始在第 5 页
                     , groups: 3 //只显示 1 个连续页码
                     , first: false //不显示首页
                     , last: false //不显示尾页
                  }
                  , cols: [[
                     { field: 'tableId', width: 59, align: 'center', unresize: true, title: '序号' }
                     , { field: 'geoName', width: 90, align: 'center', unresize: true, title: '图层名称' }
                     , { field: 'databaseName', width: 95, align: 'center', unresize: true, title: '图层属性1' }
                     , { field: 'serviceUrl', width: 95, align: 'center', unresize: true, title: '图层属性2' }
                     , { fixed: 'right', width: 115, align: 'center', unresize: true, title: '操作', toolbar: '#demoTable2' }
                  ]],
                  data: data,
                  //,skin: 'line' //表格风格
                  even: true
                  // , page: true //是否显示分页
                  , limits: false
                  , limit: 10 //每页默认显示的数量

               });
               table.on('tool(test2)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                  var data = obj.data //获得当前行数据
                  ,layEvent = obj.event; //获得 lay-event 对应的值
                  if(layEvent === 'detail'){
                  //   layer.msg('查看操作');
                  }
                  $('.popup').css({'display': 'block'});
                  $('.p-main').eq(1).css({'display': 'block'}).siblings().css({'display': 'none'});
                  console.log(obj)
                 });

               //…
            });
         },