为表格工具栏添加自定义按钮

src/main/resources/static/lib/layui-v2.8.6/layui.js

@@ -5448,7 +5448,7 @@ layui.define(["lay", "laytpl", "laypage", "form", "util"], function (e) {
                 }), l = [];
             "object" == typeof e.defaultToolbar && layui.each(e.defaultToolbar, function (e, t) {
                 t = "string" == typeof t ? i[t] : t;
-                t && l.push('<div class="layui-inline" title="' + t.title + '" lay-event="' + t.layEvent + '"><i class="layui-icon ' + t.icon + '"></i></div>')
+                t && l.push('<div id="'+t.id+'" class="layui-inline" title="' + t.title + '" lay-event="' + t.layEvent + '" style="'+t.style+'"><i class="layui-icon ' + t.icon + '"></i></div>')
             }), this.layTool.find(".layui-table-tool-self").html(l.join(""))
         }, n.prototype.renderPagebar = function () {
             var e, t = this.config, a = this.layPagebar = p('<div class="layui-inline layui-table-pagebar"></div>');

src/main/resources/templates/pages/depository/table-in.html

@@ -119,10 +119,11 @@
 
     }
 
-    layui.use(['form', 'table', 'laydate'], function () {
+    layui.use(['form', 'table', 'laydate', 'util'], function () {
         var $ = layui.jquery,
             form = layui.form,
             table = layui.table,
+            util = layui.util,
             laydate = layui.laydate;
 
         // 用于打开仓库树形菜单
@@ -178,7 +179,12 @@
                 , dataName: 'data' //规定数据列表的字段名称，默认：data
             },
             toolbar: '#toolbarDemo',
-            defaultToolbar: ['filter', 'exports', 'print'],
+            defaultToolbar: ['filter', 'exports', 'print', {
+                title: '图表展示'
+                , layEvent: 'showEchart'
+                , icon: 'layui-icon-chart-screen'
+                , id: "showEchart"
+            }],
             //这里layui和thymeleaf冲突了，要加个空格
             cols: [
                 [
@@ -198,7 +204,7 @@
                     {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
                 ]
             ],
-            limits: [ 15, 30, 45, 60, 100],
+            limits: [15, 30, 45, 60, 100],
             limit: 15,
             page: true,
             skin: 'line',
@@ -206,6 +212,7 @@
             }
         });
 
+
         // 监听搜索操作
         form.on('submit(data-search-btn)', function (data) {
             var req = {};
@@ -258,7 +265,7 @@
                     shadeClose: true,
                     area: ['30%', '100%'],
                     content: '/application_in',
-                    end:function () {
+                    end: function () {
                         table.reloadData('currentTableId', {
                             url: '/depositoryRecord/applicationInView',
                             where: req
@@ -312,8 +319,23 @@
                     return false;
                 }
             }
+            else if (obj.event === 'showEchart') {
+                let listItem = `<ul class="layui-table-tool-panel" style="max-height: 685px;">
+                                <li lay-event="showLineEchart">查看面积图</li>
+                                <li lay-event="showSunburstEchart">查看旭日图</li>
+                                </ul>`;
+
+                $("#showEchart").append(listItem)
+            }else if(obj.event === 'showLineEchart'){
+                console.log("showLineEchart")
+            }else if(obj.event === "showSunburstEchart"){
+                console.log("showSunburstEchart")
+            }
+
         });
 
+
+
         //监听表格复选框选择
         table.on('checkbox(currentTableFilter)', function (obj) {
             console.log(obj)
@@ -386,9 +408,6 @@
             });
         };
 
-        $('body').on('click', '[data-refresh]', function () {
-            location.reload();
-        })
     });
 </script>
 

src/main/resources/templates/pages/depository/table-out.html

@@ -245,7 +245,11 @@
                 , dataName: 'data' //规定数据列表的字段名称，默认：data
             },
             toolbar: '#toolbarDemo',
-            defaultToolbar: ['filter', 'exports', 'print'],
+            defaultToolbar: ['filter', 'exports', 'print',{
+                title: '图表展示'
+                ,layEvent: 'showEchart'
+                ,icon: 'layui-icon-chart-screen'
+            }],
             //这里layui和thymeleaf冲突了，要加个空格
             cols: [
                 [
@@ -393,7 +397,8 @@
                         }, 'data');
                     }
                 });
-            } else if (obj.event === 'delete') {  // 监听删除操作
+            }
+            else if (obj.event === 'delete') {  // 监听删除操作
                 var checkStatus = table.checkStatus('currentTableId')
                     , data = checkStatus.data;
                 var req = {};
@@ -472,6 +477,18 @@
                     return false;
                 }
             }
+            else if (obj.event === 'showEchart') {
+                let listItem = `<ul class="layui-table-tool-panel" style="max-height: 685px;">
+                                <li lay-event="showLineEchart">查看面积图</li>
+                                <li lay-event="showSunburstEchart">查看旭日图</li>
+                                </ul>`;
+
+                $("#showEchart").append(listItem)
+            }else if(obj.event === 'showLineEchart'){
+                console.log("showLineEchart")
+            }else if(obj.event === "showSunburstEchart"){
+                console.log("showSunburstEchart")
+            }
         });
 
         table.on('rowDouble(currentTableFilter)', function (obj) {

src/main/resources/templates/pages/depository/table-stock.html

@@ -259,6 +259,12 @@
                 , dataName: 'data' //规定数据列表的字段名称，默认：data
             },
             toolbar: '#toolbarDemo',
+            defaultToolbar: ['filter', 'exports', 'print',{
+                title: '图表展示'
+                ,layEvent: 'showEchart'
+                ,icon: 'layui-icon-chart-screen'
+                ,id:"showEchart"
+            }],
             cols: [
                 [
                     {type: "checkbox", width: 50},
@@ -461,6 +467,18 @@
             } else if (obj.event === 'downloadFile') {
                 window.open("/download/inventoryImportDownload", "_self");
             }
+            else if (obj.event === 'showEchart') {
+                let listItem = `<ul class="layui-table-tool-panel" style="max-height: 685px;">
+                                <li lay-event="showLineEchart">查看面积图</li>
+                                <li lay-event="showSunburstEchart">查看旭日图</li>
+                                </ul>`;
+
+                $("#showEchart").append(listItem)
+            }else if(obj.event === 'showLineEchart'){
+                console.log("showLineEchart")
+            }else if(obj.event === "showSunburstEchart"){
+                console.log("showSunburstEchart")
+            }
         });
 
         table.on('tool(currentTableFilter)', function (obj) {

src/main/resources/templates/pages/material/material-view_back.html

@@ -271,18 +271,6 @@
             }
         });
 
-        $(".layui-code-tools").on("click", function (e) {
-            let echartType = $(e.target).attr("echartType");
-            let echartId = "echarts-line-";
-            if (echartType === "inventory") {
-                echartId += "inventory";
-            } else if (echartType === "in") {
-                echartId += "in";
-            } else if (echartType === "out") {
-                echartId += "out";
-            }
-            console.log($("#" + echartId))
-        });
 
         initApplicationInTable = function () {
             table.render({

target/classes/templates/pages/depository/table-in.html

@@ -119,10 +119,11 @@
 
     }
 
-    layui.use(['form', 'table', 'laydate'], function () {
+    layui.use(['form', 'table', 'laydate', 'util'], function () {
         var $ = layui.jquery,
             form = layui.form,
             table = layui.table,
+            util = layui.util,
             laydate = layui.laydate;
 
         // 用于打开仓库树形菜单
@@ -178,7 +179,12 @@
                 , dataName: 'data' //规定数据列表的字段名称，默认：data
             },
             toolbar: '#toolbarDemo',
-            defaultToolbar: ['filter', 'exports', 'print'],
+            defaultToolbar: ['filter', 'exports', 'print', {
+                title: '图表展示'
+                , layEvent: 'showEchart'
+                , icon: 'layui-icon-chart-screen'
+                , id: "showEchart"
+            }],
             //这里layui和thymeleaf冲突了，要加个空格
             cols: [
                 [
@@ -198,7 +204,7 @@
                     {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
                 ]
             ],
-            limits: [ 15, 30, 45, 60, 100],
+            limits: [15, 30, 45, 60, 100],
             limit: 15,
             page: true,
             skin: 'line',
@@ -206,6 +212,7 @@
             }
         });
 
+
         // 监听搜索操作
         form.on('submit(data-search-btn)', function (data) {
             var req = {};
@@ -258,7 +265,7 @@
                     shadeClose: true,
                     area: ['30%', '100%'],
                     content: '/application_in',
-                    end:function () {
+                    end: function () {
                         table.reloadData('currentTableId', {
                             url: '/depositoryRecord/applicationInView',
                             where: req
@@ -311,9 +318,23 @@
                     layer.msg("未选中记录，请确认！");
                     return false;
                 }
+            } else if (obj.event === 'showEchart') {
+                let listItem = `<ul class="layui-table-tool-panel" style="max-height: 685px;">
+                                <li lay-event="showLineEchart">查看面积图</li>
+                                <li lay-event="showSunburstEchart">查看旭日图</li>
+                                </ul>`;
+
+                $("#showEchart").append(listItem)
+            }else if(obj.event === 'showLineEchart'){
+                console.log("showLineEchart")
+            }else if(obj.event === "showSunburstEchart"){
+                console.log("showSunburstEchart")
             }
+
         });
 
+
+
         //监听表格复选框选择
         table.on('checkbox(currentTableFilter)', function (obj) {
             console.log(obj)
@@ -386,9 +407,6 @@
             });
         };
 
-        $('body').on('click', '[data-refresh]', function () {
-            location.reload();
-        })
     });
 </script>
 

target/classes/templates/pages/depository/table-out.html

@@ -245,7 +245,11 @@
                 , dataName: 'data' //规定数据列表的字段名称，默认：data
             },
             toolbar: '#toolbarDemo',
-            defaultToolbar: ['filter', 'exports', 'print'],
+            defaultToolbar: ['filter', 'exports', 'print',{
+                title: '图表展示'
+                ,layEvent: 'showEchart'
+                ,icon: 'layui-icon-chart-screen'
+            }],
             //这里layui和thymeleaf冲突了，要加个空格
             cols: [
                 [
@@ -393,7 +397,8 @@
                         }, 'data');
                     }
                 });
-            } else if (obj.event === 'delete') {  // 监听删除操作
+            }
+            else if (obj.event === 'delete') {  // 监听删除操作
                 var checkStatus = table.checkStatus('currentTableId')
                     , data = checkStatus.data;
                 var req = {};
@@ -472,6 +477,9 @@
                     return false;
                 }
             }
+            else if(obj.event === 'showEchart'){
+
+            }
         });
 
         table.on('rowDouble(currentTableFilter)', function (obj) {

target/classes/templates/pages/depository/table-stock.html

@@ -259,6 +259,12 @@
                 , dataName: 'data' //规定数据列表的字段名称，默认：data
             },
             toolbar: '#toolbarDemo',
+            defaultToolbar: ['filter', 'exports', 'print',{
+                title: '图表展示'
+                ,layEvent: 'showEchart'
+                ,icon: 'layui-icon-chart-screen'
+                ,id:"showEchart"
+            }],
             cols: [
                 [
                     {type: "checkbox", width: 50},
@@ -461,6 +467,9 @@
             } else if (obj.event === 'downloadFile') {
                 window.open("/download/inventoryImportDownload", "_self");
             }
+            else if(obj.event === 'showEchart'){
+
+            }
         });
 
         table.on('tool(currentTableFilter)', function (obj) {