表格 点击事件

liuyg

2021-06-09 1c6a0ab1d8fe9b49d69d299278ebb8a9d22c3085

 widgets/searchL/Widget.js

@@ -54,18 +54,23 @@
               $("#local_data").hide();
            })

            $(".searchImg").click(function () {
               that.getInputData();
               that.setVal(that.searchDatas);
               $('.searchLMain').show();
            })
            // $(".searchImg").click(function () {
            //    that.getInputData();
            //    that.setVal(that.searchDatas);
            //    $('.searchLMain').show();
            // })
            $(".searchColce").click(function () {
               $('.searchLMain').hide();
            })
            // 自动展开面板
            that.getInputData();
            that.setVal(that.searchDatas);
            // that.getInputData();
            // that.setVal(that.searchDatas);



            // 自动展开面板   面板和搜索无关！
            $('.searchLMain').show();



         },

@@ -112,8 +117,59 @@
            var data = d;
            this.beginLayUi(data);
         },
         getData: function (index) {
            var d = $('.searchLMain').find('.layui-tab-item').hide;
            console.log(d)
            var that = this,
               url = index == 0 ?
                  'http://171.34.76.171:8880/pyh-wetResource/monitorRecords/queryMonitorRecords?name=&startTime=&endTime=&type=2&startPage=1&limit=10&soId=056c6f9fa3f14c168fa90cf1563cd01f'
                  :
                  index == 1 ?
                     'http://171.34.76.171:8880/pyh-station/video/queryPyhVideoByFilter?id=&protectAreaId=&name=&buildTime=&buildType=&start=1&limit=10'
                     :
                     index == 2 ?
                        'http://171.34.76.171:8880/pyh-station/monitorStation/queryMonitorStationByFilter?leftTreeId=&isShow=&stcd=&stnm=&status=&startPage=1&limit=10' :
                        false
               , token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMxMzIzMjYsImV4cCI6MTYyNTcyNDMyNn0.2ug9No32Ij3DxXCw8utXbahYsAe6l_FdzRTH5ysaBsOuKLbmQ80faGclncCdNahQ3rgiV54U-gawqw9JhGsAJA';

            axios.get(url, {
               headers: {
                  'token': token
               }
            }).then((res) => {
               if (res.status == 200) {
                  var data = res.data.data;
                  that.createDatas(data, index);
               } else {
                  console.log('请求访问失败')
               }
            })
         },
         createDatas: function (d, n) {
            var i = 1;
            for (var k in d) {
               d[k].tableId = i++;
            }
            var data = d;
            if (n == 0) {
               this.beginLayUi(data);
            } else if (n == 1) {
               this.beginLayUi(1, data);
            } else if (n == 2) {
               this.beginLayUi(1, 1, data);
            }
         },
         onOpen: function () {
            //面板打开的时候触发
            var that = this;
            that.getData(0)
            layui.use('element', function () {
               var $ = layui.jquery
                  , element = layui.element;
               element.on('tab(docDemoTabBrief)', function (elem) {
                  that.getData(elem.index)
               });
            });
         },

         onClose: function () {
@@ -131,7 +187,7 @@
         resize: function () {

         },
         beginLayUi: function (data) {
         beginLayUi: function (data = 1, data1 = 1, data2 = 1) {
            // data.push(...data)
            // console.log(data)
            layui.use(function () {
@@ -139,120 +195,184 @@
                  , table = layui.table //表格
                  , laypage = layui.laypage; //分页

               table.render({
                  elem: '#test'
                  // , url: './data'
                  , height: 475
                  , 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: '#demoTable' }
                  ]],
                  data: data,
                  //,skin: 'line' //表格风格
                  even: true
                  // , page: true //是否显示分页
                  , limits: false
                  , limit: 10 //每页默认显示的数量
               if (data != 1) {

               });
                  table.render({
                     elem: '#test'
                     // , url: './data'
                     , height: 475
                     , 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: 'name', width: 90, align: 'center', unresize: true, title: '图层名称' }
                        , { field: 'protectArea', width: 95, align: 'center', unresize: true, title: '图层属性1' }
                        , { field: 'protectArea', width: 95, align: 'center', unresize: true, title: '图层属性2' }
                        , { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable' }
                     ]],
                     data: data,
                     //,skin: 'line' //表格风格
                     even: true
                     // , page: true //是否显示分页
                     , limits: false
                     , limit: 10 //每页默认显示的数量

               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(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                     var data = obj.data //获得当前行数据
                        , layEvent = obj.event; //获得 lay-event 对应的值
                     if (layEvent === 'detail') {
                        //   layer.msg('查看操作');
                     }
                     window.open(obj.data.panAddress);
                     console.log(obj.data.panAddress)
                  });
               }
               if (data1 != 1) {
                  table.render({
                     elem: '#test1'
                     // , url: './data'
                     , height: 475
                     , 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: 'name', width: 90, align: 'center', unresize: true, title: '图层名称' }
                        , { field: 'protectName', width: 95, align: 'center', unresize: true, title: '图层属性1' }
                        , { field: 'serviceUrl', width: 95, align: 'center', unresize: true, title: '图层属性2' }
                        , { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable1' }
                     ]],
                     data: data1,
                     //,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('查看操作');
                  }
                  $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                  $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                  console.log(obj)
               });
                  });
                  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('查看操作');
                     }
                     var dom = $('#poput-m-t-video'),
                        str = `<div class="title">名称：${obj.data.name}</div>
                        <video id="video1" class="video-js vjs-default-skin" width="840" height="480"
                           data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
                           <source src="${obj.data.flv}" type="video/x-flv">
                        </video>`;
                     dom.empty();
                     dom.append(str);

               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 //每页默认显示的数量
                     $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                     $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                     // console.log(obj.data.name)
                  });
               }
               if (data2 != 1) {

               });
               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('查看操作');
                  }
                  $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                  $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                  console.log(obj)
                  table.render({
                     elem: '#test2'
                     // , url: './data'
                     , height: 475
                     , 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: 'name', width: 90, align: 'center', unresize: true, title: '图层名称' }
                        , { field: 'stcd', width: 95, align: 'center', unresize: true, title: '图层属性1' }
                        , { field: 'createTime', width: 95, align: 'center', unresize: true, title: '图层属性2' }
                        , { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable2' }
                     ]],
                     data: data2,
                     //,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('查看操作');
                     }
                     // 监测、测站详情 表格
                     var str = '';
                     var XQDom = $('.jimu-widget-searchTabaPopup').find('.xiangqing');
                     XQDom.empty();

                     str += '<table border="1" cellpadding="100">';
                     str += `<tr>
            <th>测站名称：</th>
            <td>${obj.data.name}</td>
            <th>建设类型：</th>
            <td>建设</td>
         </tr>
         <tr>
            <th>经度：</th>
            <td>${obj.data.lon}</td>
            <th>纬度：</th>
            <td>${obj.data.lat}</td>
         </tr>
         <tr>
            <th>建站时间：</th>
            <td>${obj.data.accessTime}</td>
            <th>接入时间：</th>
            <td>${obj.data.createTime}</td>
         </tr>
         <tr>
            <th>所属保护区：</th>
            <td>鄱阳湖南矶湿地国家级自然保护区</td>
            <th>地址：</th>
            <td>暂无</td>
         </tr>
         <tr>
            <th>全景地址：</th>
            <td colspan="3">${obj.data.panoramaUrl}/</td>
         </tr>
         <tr>
            <th>测站简介：</th>
            <td class="left" colspan="3">暂无</td>
         </tr>
         <tr>
            <th>图片：</th>
            <td class="left" colspan="3"></td>
         </tr>`;
                     str += '</table>';
                     XQDom.append(str);





                     $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                     $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                     console.log(obj.data.name)

                  });
               }

               //…
            });