فهرست منبع

优化表格树显示

RuoYi 4 سال پیش
والد
کامیت
f765dbc2f6

+ 18 - 2
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/tree/bootstrap-table-tree.js

@@ -211,7 +211,23 @@
             registerRowClickEvent();
             initHiddenColumns();
             // 动态设置表头宽度
-            autoTheadWidth()
+            autoTheadWidth();
+            // 移动端适配
+            var treetableTable = $(target).parent('.treetable-table');
+            var availableHeight = treetableTable.outerWidth();
+            if($.common.isMobile() || availableHeight < 769){
+                var tableStyle = "width: " + availableHeight + "px;overflow: auto;position: relative;";
+                treetableTable.attr('style', tableStyle);
+                var w = 0;
+                $.each(options.columns, function(i, column) {
+                    if (i == 0 && column.field == 'selectItem') {
+                        w += 36;
+                    } else {
+                        w += 200;
+                    }
+                });
+                $(target).attr('style','width:' + w +'px');
+            }
         }
         // 动态设置表头宽度
         var autoTheadWidth = function(initFlag) {
@@ -725,7 +741,7 @@
         expandAll: false,          // 是否全部展开
         expandFirst: true,         // 是否默认第一级展开--expandAll为false时生效
         striped: false,            // 是否各行渐变色
-        bordered: true,            // 是否显示边框
+        bordered: false,           // 是否显示边框
         hover: true,               // 是否鼠标悬停
         condensed: false,          // 是否紧缩表格
         columns: [],               // 列

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 1 - 1
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/tree/bootstrap-table-tree.min.js


+ 2 - 0
ruoyi-admin/src/main/resources/static/ruoyi/css/ry-ui.css

@@ -946,6 +946,8 @@ table.rc-table-resizing thead > th > a {
 .bootstrap-tree-table .treetable-bars .tool-right{float: right;}
 .bootstrap-tree-table .treetable-bars .columns li label{display: block;padding: 3px 20px;clear: both;font-weight: 400;line-height: 1.428571429;max-width: 100%;margin-bottom: 5px;cursor:pointer;}
 .bootstrap-tree-table .table{border-bottom: 0px solid #e7eaec!important;}
+.bootstrap-tree-table .table-bordered .treetable-thead th {border-left: 1px solid #e7eaec!important;}
+.bootstrap-tree-table .table-bordered .treetable-tbody td {border-right: 1px solid #e7eaec!important;}
 
 /** 首页样式 **/
 .ax_close_max {

+ 1 - 1
ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js

@@ -608,7 +608,7 @@ var table = {
                     height: options.height,                             // 表格树的高度
                     expandColumn: options.expandColumn,                 // 在哪一列上面显示展开按钮
                     striped: options.striped,                           // 是否显示行间隔色
-                    bordered: false,                                    // 是否显示边框
+                    bordered: options.bordered,                         // 是否显示边框
                     toolbar: '#' + options.toolbar,                     // 指定工作栏
                     showSearch: options.showSearch,                     // 是否显示检索信息
                     showRefresh: options.showRefresh,                   // 是否显示刷新按钮