Table demo

bizdevfe · Jul 19, 2017 · bf0412f · bf0412f
1 parent 3361cc3
commit bf0412f
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 1.6.1 (July 19, 2017)
+* Update Table demo.
+
 ## 1.6.0 (July 18, 2017)
 * New component: `Switch`.
 

diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
     <a href="#" class="active">BizUI</a>
     <a href="pages/tutorial.html">起步</a>
     <a href="pages/components.html">组件</a>
-    <a class="github" href="https://github.com/bizdevfe/biz-ui/releases" target="_blank">GitHub&nbsp;&nbsp;v1.6.0</a>
+    <a class="github" href="https://github.com/bizdevfe/biz-ui/releases" target="_blank">GitHub&nbsp;&nbsp;v1.6.1</a>
     <a href="https://github.com/bizdevfe/biz-ui-react" target="_blank">React</a>
     <a href="https://github.com/bizdevfe/biz-ui-mobile" target="_blank">Mobile</a>
 </nav>

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

diff --git a/pages/components.html b/pages/components.html
@@ -18,7 +18,7 @@
     <a href="../index.html">BizUI</a>
     <a href="tutorial.html">起步</a>
     <a href="#" class="active">组件</a>
-    <a class="github" href="https://github.com/bizdevfe/biz-ui/releases" target="_blank">GitHub&nbsp;&nbsp;v1.6.0</a>
+    <a class="github" href="https://github.com/bizdevfe/biz-ui/releases" target="_blank">GitHub&nbsp;&nbsp;v1.6.1</a>
     <a href="https://github.com/bizdevfe/biz-ui-react" target="_blank">React</a>
     <a href="https://github.com/bizdevfe/biz-ui-mobile" target="_blank">Mobile</a>
 </nav>

diff --git a/pages/src/components/Table/Table.js b/pages/src/components/Table/Table.js
@@ -119,7 +119,11 @@ var Table = Backbone.View.extend({
                 title: 'Operation',
                 escapeContent: false,
                 content: function(item, index, field) {
-                    return '<a href="javascript:void(0)" id="' + item.id + '">Detail</a>';
+                    return '<select id="' + item.id + '">\
+                        <option value="edit">Edit</option>\
+                        <option value="delete">Delete</option>\
+                        <option value="open">Open</option>\
+                    </select>';
                 }
             }
         ];
@@ -152,6 +156,30 @@ var Table = Backbone.View.extend({
                 console.log('Fail', data);
             }
         });
+
+        $('select').bizSelect()
+        .on('selectric-before-open', function() { // 解决表格遮挡问题
+            $('.biz-table td').css({'overflow': 'visible'});
+            $('.biz-table-body-wrap').css({'overflow': 'visible'});
+            $('.biz-table-head-wrap').css({'overflow': 'visible'});
+        })
+        .on('selectric-close', function() {
+            $('.biz-table td').css({'overflow': 'hidden'});
+            $('.biz-table-body-wrap').css({
+                'overflowX': 'auto',
+                'overflowY': 'hidden'
+            });
+            $('.biz-table-head-wrap').css({
+                'overflowX': 'auto',
+                'overflowY': 'hidden'
+            });
+        });
+
+        bizui.Tooltip({
+            element: '.protocol',
+            preventDefault: true,
+            action: 'click'
+        });
 	},
 
     destroy: function() {

diff --git a/pages/src/components/Table/table.html b/pages/src/components/Table/table.html
@@ -117,7 +117,11 @@ <h4>JavaScript</h4>
             title: 'Operation',
             escapeContent: false,
             content: function(item, index, field) {
-                return '&lt;a href="javascript:void(0)" id="' + item.id + '"&gt;Detail&lt;/a&gt;';
+                return '&lt;select id="' + item.id + '"&gt;\
+                    &lt;option value="edit"&gt;Edit&lt;/option&gt;\
+                    &lt;option value="delete"&gt;Delete&lt;/option&gt;\
+                    &lt;option value="open"&gt;Open&lt;/option&gt;\
+                &lt;/select&gt;';
             }
         }
     ];
@@ -151,6 +155,24 @@ <h4>JavaScript</h4>
         }
     });
 
+    $('select').bizSelect()
+    .on('selectric-before-open', function() { // 解决表格遮挡问题
+        $('.biz-table td').css({'overflow': 'visible'});
+        $('.biz-table-body-wrap').css({'overflow': 'visible'});
+        $('.biz-table-head-wrap').css({'overflow': 'visible'});
+    })
+    .on('selectric-close', function() {
+        $('.biz-table td').css({'overflow': 'hidden'});
+        $('.biz-table-body-wrap').css({
+            'overflowX': 'auto',
+            'overflowY': 'hidden'
+        });
+        $('.biz-table-head-wrap').css({
+            'overflowX': 'auto',
+            'overflowY': 'hidden'
+        });
+    });
+
 </code></pre>
 
 <h4>Options</h4>

diff --git a/pages/tutorial.html b/pages/tutorial.html
@@ -14,7 +14,7 @@
     <a href="../index.html">BizUI</a>
     <a href="#" class="active">起步</a>
     <a href="components.html">组件</a>
-    <a class="github" href="https://github.com/bizdevfe/biz-ui/releases" target="_blank">GitHub&nbsp;&nbsp;v1.6.0</a>
+    <a class="github" href="https://github.com/bizdevfe/biz-ui/releases" target="_blank">GitHub&nbsp;&nbsp;v1.6.1</a>
     <a href="https://github.com/bizdevfe/biz-ui-react" target="_blank">React</a>
     <a href="https://github.com/bizdevfe/biz-ui-mobile" target="_blank">Mobile</a>
 </nav>