From 95dfe3fe172f6d5ff9c761b0545c4811c2fea3d1 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 08 Jun 2021 15:02:53 +0800
Subject: [PATCH] 表格点击弹窗事件
---
widgets/searchL/Widget.js | 102 +++++++++++++++++++++++-
widgets/searchL/Widget.html | 43 +++++++++-
widgets/searchL/css/style.css | 42 ++++++++++
3 files changed, 172 insertions(+), 15 deletions(-)
diff --git a/widgets/searchL/Widget.html b/widgets/searchL/Widget.html
index 41a9f89..ed81fc3 100644
--- a/widgets/searchL/Widget.html
+++ b/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>
\ No newline at end of file
diff --git a/widgets/searchL/Widget.js b/widgets/searchL/Widget.js
index a2093b9..cbd48e4 100644
--- a/widgets/searchL/Widget.js
+++ b/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)
+ });
+
//…
});
},
diff --git a/widgets/searchL/css/style.css b/widgets/searchL/css/style.css
index 79ebfcb..0e3c798 100644
--- a/widgets/searchL/css/style.css
+++ b/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;
}
\ No newline at end of file
--
Gitblit v1.9.3