表格点击弹窗事件

liuyg

2021-06-08 95dfe3fe172f6d5ff9c761b0545c4811c2fea3d1

表格点击弹窗事件

 widgets/searchL/Widget.html

@@ -18,19 +18,50 @@
            <ul class="layui-tab-title">
                <li class="layui-this">全景</li>
                <li>监控</li>
                <li>检测</li>
                <li>监测</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <table class="layui-hide" id="test"></table>
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                    <div id="demoTable" style="display: none;">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a>
                        <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a> -->
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看全景</a>
                    </div>
                </div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
                <div class="layui-tab-item">
                    <div class="layui-tab-item layui-show">
                        <table class="layui-hide" id="test1" lay-filter="test1"></table>
                        <div id="demoTable1" style="display: none;">
                            <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> -->
                            <a class="layui-btn layui-btn-xs"  lay-event="edit">定位</a>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-tab-item layui-show">
                        <table class="layui-hide" id="test2" lay-filter="test2"></table>
                        <div id="demoTable2" style="display: none;">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                            <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="popup">
        <!-- <div class="p-main one">
            <div class="cloce"></div>
            one
        </div> -->
        <div class="p-main two">
            <div class="cloce"></div>
            监控
        </div>
        <div class="p-main three">
            <div class="cloce"></div>
            监测
        </div>
    </div>
</div>

 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)
                      });

                    //…
                });
            },

 widgets/searchL/css/style.css

@@ -155,13 +155,13 @@
  border-bottom: 1px #fff solid;
}

.jimu-widget-searchL .searchLMain #layui-table-page1 {
.jimu-widget-searchL .searchLMain #layui-table-page1, .jimu-widget-searchL .searchLMain #layui-table-page2, .jimu-widget-searchL .searchLMain #layui-table-page3 {
  position: relative;
  left: 30px;
  top: 5px;
}

.jimu-widget-searchL .searchLMain #layui-table-page1::before {
.jimu-widget-searchL .searchLMain #layui-table-page1::before, .jimu-widget-searchL .searchLMain #layui-table-page2::before, .jimu-widget-searchL .searchLMain #layui-table-page3::before {
  content: '每页10条，';
  position: relative;
  top: -4px;
@@ -190,4 +190,42 @@
  position: relative;
  right: 1px;
  top: -3px;
}

.jimu-widget-searchL .popup {
  display: none;
  position: absolute;
  top: 50px;
  left: calc(50% - 250px);
  width: 500px;
  height: 500px;
  /* border: 1px solid salmon; */
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.75);
}

.jimu-widget-searchL .p-main {
  display: none;
  width: 100%;
  height: 100%;
  /* border: 1px salmon solid; */
  border-radius: 5px;
}
.jimu-widget-searchL .p-main .cloce{
  /* font-size: 20px; */
  width: 25px;
  height: 25px;
  line-height: 25px;
  position: absolute;
  right: 5px;
  top:5px;
  /* border: 1px salmon solid; */
}
.jimu-widget-searchL .p-main .cloce:hover{
  color: red;
  cursor: pointer;
}
.jimu-widget-searchL .p-main .cloce::after{
  content: 'X';
  font-size: 20px;
}