flexible Table

bizdevfe · Apr 20, 2017 · 1c635d7 · 1c635d7
1 parent 2e49813
commit 1c635d7
Show file tree

Hide file tree

Showing 9 changed files with 224 additions and 100 deletions.
diff --git a/dist/jquery.bizui.css b/dist/jquery.bizui.css
@@ -3635,7 +3635,6 @@
   padding: 5px 8px;
   border: 1px solid #555;
   background: #707070;
-  white-space: nowrap;
   font-weight: normal;
   color: #ffffff;
 }
@@ -3649,6 +3648,11 @@
   outline: none;
   color: #333333;
 }
+.biz-table-flexible th,
+.biz-table-flexible td {
+  word-break: break-all;
+  word-wrap: break-word;
+}
 .biz-table tr:hover {
   background: #fafafa;
 }
@@ -3716,7 +3720,8 @@
   width: 0;
   height: 0;
   position: absolute;
-  top: 3px;
+  top: 50%;
+  margin-top: -7px;
   right: 0;
   border-width: 0 5px 5px;
   border-style: solid;
@@ -3727,7 +3732,8 @@
   width: 0;
   height: 0;
   position: absolute;
-  bottom: 3px;
+  top: 50%;
+  margin-top: 2px;
   right: 0;
   border-width: 5px 5px 0;
   border-style: solid;
@@ -4836,6 +4842,12 @@ div.tooltip.biz-tooltip-yellow {
   -ms-user-select: none;
   user-select: none;
 }
+.jstree-contextmenu .jstree-anchor {
+  -webkit-user-select: none;
+  /* disable selection/Copy of UIWebView */
+  -webkit-touch-callout: none;
+  /* disable the IOS popup when long-press on a link */
+}
 .vakata-context {
   display: none;
 }

diff --git a/dist/jquery.bizui.js b/dist/jquery.bizui.js
diff --git a/dist/jquery.bizui.min.css b/dist/jquery.bizui.min.css
diff --git a/dist/jquery.bizui.min.js b/dist/jquery.bizui.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "biz-ui",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "A jQuery plugin for business UI components",
   "author": "BizFE",
   "main": "dist/jquery.bizui.js",

diff --git a/pages/asset/css/main.css b/pages/asset/css/main.css
@@ -375,19 +375,23 @@ body.index {
     border: 0;
     border-collapse: collapse;
     table-layout: fixed;
-	margin-left: 40px;
+	width: 100%;
 	margin-bottom: 40px;
 }
 .components table.options th {
     padding: 5px 8px;
     border: 1px #212121 solid;
 	background: #212121;
-	color: #fff
+	color: #fff;
+    word-break: break-all;
+    word-wrap: break-word;
 }
 .components table.options td {
 	padding: 5px 8px;
     border: 1px #ccc solid;
 	background: #fff;
+    word-break: break-all;
+    word-wrap: break-word;
 }
 .methods {
 	padding: 0 40px;

diff --git a/pages/src/components/Table/table.html b/pages/src/components/Table/table.html
@@ -244,6 +244,11 @@ <h4>Options</h4>
         <td>String</td>
         <td>无数据提示，不转义</td>
     </tr>
+    <tr>
+        <td>[flexible]</td>
+        <td>Boolean</td>
+        <td>th 和 td 均强制折行，width无效，默认 false</td>
+    </tr>
     <tr>
         <td>[selectable]</td>
         <td>Boolean</td>

diff --git a/src/css/table.less b/src/css/table.less
@@ -16,7 +16,6 @@
     padding: 5px 8px;
     border: 1px solid #555;
     background: #707070;
-    white-space: nowrap;
     font-weight: normal;
     color: @light-text;
 }
@@ -32,6 +31,12 @@
     color: @dark-text;
 }
 
+.biz-table-flexible th,
+.biz-table-flexible td {
+    word-break: break-all;
+    word-wrap: break-word;
+}
+
 .biz-table tr:hover {
     background: #fafafa;
 }
@@ -122,7 +127,8 @@
     width: 0;
     height: 0;
     position: absolute;
-    top: 3px;
+    top: 50%;
+    margin-top: -7px;
     right: 0;
     border-width: 0 5px 5px;
     border-style: solid;
@@ -134,7 +140,8 @@
     width: 0;
     height: 0;
     position: absolute;
-    bottom: 3px;
+    top: 50%;
+    margin-top: 2px;
     right: 0;
     border-width: 5px 5px 0;
     border-style: solid;

diff --git a/src/ui/Table.js b/src/ui/Table.js
@@ -22,6 +22,7 @@ require('../deps/jquery.editabletable');
  * @param {String}         [options.customClass]           自定义 class
  * @param {String}         [options.foot]                  总计行位置（top | bottom），默认无总计行
  * @param {String}         [options.noDataContent]         无数据提示，不转义
+ * @param {Boolean}        [options.flexible]              th 和 td 均强制折行，width无效，默认 false
  * @param {Boolean}        [options.selectable]            可勾选，默认 false
  * @param {Function}       [options.onSelect]              勾选回调，onSelect(Object data, Event e)
  * @param {Function}       [options.onSort]                排序回调，onSort(Object data, Event e)
@@ -40,6 +41,7 @@ function Table(table, options) {
         customClass: '',
         data: [],
         noDataContent: '<p><i class="biz-icon">&#xe001;</i> 没有数据</p>',
+        flexible: false,
         selectable: false,
         defaultSort: 'des',
         lockHead: false,
@@ -87,6 +89,11 @@ Table.prototype = {
         this.$tableBody.html(this.createTableBody(options))
             .addClass([defaultClass, options.customClass, (this.rowSpan > 1 && options.data.length > 0) ? 'biz-rowspan' : ''].join(' '));
 
+        if (options.flexible) {
+            this.$tableHead.addClass('biz-table-flexible');
+            this.$tableBody.addClass('biz-table-flexible');
+        }
+
         // 创建总计行
         if (options.foot && options.data.length > 0) {
             var tbody = this.$tableBody.find('tbody'),
@@ -105,8 +112,10 @@ Table.prototype = {
         }
 
         // 勾选列
-        if (options.selectable && options.data.length > 0) {
-            this.createSelect(options.data);
+        if (options.selectable) {
+            if (options.data.length > 0) {
+                this.createSelect(options.data);
+            }
             this.bindSelect();
         }
 
@@ -132,9 +141,9 @@ Table.prototype = {
 
         // 表头锁定
         if (options.lockHead) {
-            var headHeight = this.$headWrap.height();
             $(window).on('scroll.bizTable', function() {
-                var currentOffsetTop = self.$main.offset().top - options.topOffset;
+                var currentOffsetTop = self.$main.offset().top - options.topOffset,
+                    headHeight = self.$headWrap.height();
                 if ($(window).scrollTop() > currentOffsetTop) {
                     if (!self.hasLocked) {
                         self.$headWrap.css({
@@ -207,6 +216,9 @@ Table.prototype = {
                 width: col.width,
                 field: col.field
             });
+            if (options.flexible) {
+                th.removeAttr('nowrap width');
+            }
 
             var title = (col.escapeTitle === false) ? col.title : escapeHTML(col.title);
             if (col.sortable) {
@@ -265,6 +277,10 @@ Table.prototype = {
 
                 var content = col.content[0].apply(this, [item, index, col.field]).toString();
                 td.html((col.escapeContent === false) ? content : escapeHTML(content)).appendTo(tr);
+
+                if (options.flexible) {
+                    td.removeAttr('width');
+                }
             }
 
             tbody.append(tr);
@@ -286,6 +302,10 @@ Table.prototype = {
                         var _td = $('<td></td>').attr('align', _col.align),
                             _content = _col.content[m].apply(this, [item, index, _col.field]).toString();
                         _td.html((_col.escapeContent === false) ? _content : escapeHTML(_content)).appendTo(_tr);
+
+                        if (options.flexible) {
+                            _td.removeAttr('width');
+                        }
                     }
                     tbody.append(_tr);
                 }
@@ -322,6 +342,10 @@ Table.prototype = {
                 width: col.width
             });
 
+            if (options.flexible) {
+                td.removeAttr('width');
+            }
+
             var content = col.footContent ? col.footContent.call(this, col.field).toString() : '';
             td.html((col.escapeContent === false) ? content : escapeHTML(content)).appendTo(sum);
         }
@@ -576,10 +600,10 @@ Table.prototype = {
      */
     syncWidth: function() {
         this.$headWrap.css({
-            width: this.$main.width()
+            //width: this.$main.width()
         });
         this.$tableHead.css({
-            width: this.$tableBody.width()
+            //width: this.$tableBody.width()
         });
     },