Add formatter for grid-column.

mulholland0318 · Jan 14, 2016 · 929530a · 929530a
1 parent a43def2
commit 929530a
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 15 deletions.
diff --git a/docs/grid.md b/docs/grid.md
@@ -73,8 +73,9 @@ Grid 目前可用的属性如下：
 | schema | Grid 使用的 Schema。 |
 | height | Grid 的高度，默认高度为空，即自动高度。 |
 | fit | Grid 的列的宽度是否自撑开，Boolean 类型，默认为 false。|
-| selectionMode | selectionMode的可选值 single, multiple, none; 默认值 single。|
-| selection | 多选模式下返回数组, 单选模式下返回选中的元素。 |
+| selectionMode | selectionMode的可选值 single，multiple，none; 默认值 single。|
+| selection | 多选模式下返回数组，单选模式下返回选中的元素。 |
+| fixedColumnCount | 锁定列的数量，默认值为0。|
 
 # Grid 的事件
 
@@ -97,6 +98,7 @@ Grid Column 目前可用的属性如下：
 | width | Grid Column 的宽度。 |
 | sortable | Grid Column 是否可以排序，在设置了 property 的情况下，该属性的默认值为 true，反之为 false。 |
 | type | Grid Column 的类型，默认为空，可选值：selection、index。如果设置了 selection 则显示多选按钮，如果设置了 index，则显示该行的索引（从1开始计算）。 |
+| formatter | Grid Column 的 formatter，Function 类型，可以用来格式化内容，在 formatter 执行的时候，会传入 row 和 column。 |
 
 ## Grid Column中的内容
 

diff --git a/examples/data/grid.vue b/examples/data/grid.vue
@@ -11,12 +11,12 @@
       </d-field>
     </d-form>
 
-    <d-grid :data="gridData" :schema="gridSchema" :selection.sync="selection" selection-mode="none" @selection-change="handleSelectionChange" flex>
+    <d-grid :data="gridData" :fixed-column-count="3" :schema="gridSchema" :selection.sync="selection" selection-mode="none" @selection-change="handleSelectionChange" flex>
       <d-grid-column type="index"></d-grid-column>
       <d-grid-column type="selection"></d-grid-column>
-      <d-grid-column property="prop1"></d-grid-column>
+      <d-grid-column property="prop1" :formatter="formatNumber"></d-grid-column>
       <d-grid-column property="prop2"></d-grid-column>
-      <d-grid-column property="prop3" min-width="400"></d-grid-column>
+      <d-grid-column property="prop3" min-width="800"></d-grid-column>
       <d-grid-column property="prop4"></d-grid-column>
       <d-grid-column label="5" property="prop5"></d-grid-column>
       <d-grid-column label="操作" width="200" v-if="visible">
@@ -65,6 +65,10 @@
         this.visible = !this.visible;
       },
 
+      formatNumber(row, column) {
+        return '$' + row[column.property];
+      },
+
       handleSelectionChange(selection) {
         console.log('test', this, selection);
       }
@@ -89,6 +93,16 @@
           {prop1: '21', prop2: '22', prop3: new Date(), prop4: '24', prop5: false},
           {prop1: '31', prop2: '32', prop3: new Date(), prop4: '34', prop5: true},
           {prop1: '41', prop2: '42', prop3: null, prop4: '44', prop5: false},
+          {prop1: '51', prop2: '52', prop3: undefined, prop4: '54', prop5: true},
+          {prop1: '11', prop2: '12', prop3: new Date(), prop4: '14', prop5: false},
+          {prop1: '21', prop2: '22', prop3: new Date(), prop4: '24', prop5: false},
+          {prop1: '31', prop2: '32', prop3: new Date(), prop4: '34', prop5: true},
+          {prop1: '41', prop2: '42', prop3: null, prop4: '44', prop5: false},
+          {prop1: '51', prop2: '52', prop3: undefined, prop4: '54', prop5: true},
+          {prop1: '11', prop2: '12', prop3: new Date(), prop4: '14', prop5: false},
+          {prop1: '21', prop2: '22', prop3: new Date(), prop4: '24', prop5: false},
+          {prop1: '31', prop2: '32', prop3: new Date(), prop4: '34', prop5: true},
+          {prop1: '41', prop2: '42', prop3: null, prop4: '44', prop5: false},
           {prop1: '51', prop2: '52', prop3: undefined, prop4: '54', prop5: true}
         ])
       };

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-desktop",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "A UI library for building admin panel website.",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/data/grid-column.vue b/src/data/grid-column.vue
@@ -19,6 +19,9 @@
       resizable: {
         type: Boolean,
         default: true
+      },
+      formatter: {
+        type: Function
       }
     },
 
@@ -90,6 +93,9 @@
         minWidth = 80;
       }
 
+      var columnId = parent.gridId + 'column_' + columnIdSeed++;
+      this.columnId = columnId;
+
       var headerTemplate;
       var template = this.template;
       var type = this.type;
@@ -112,13 +118,10 @@
         }
       } else {
         if ((!template || /^\s*$/.test(template)) && property) {
-          template = `{{ $getPropertyText(row, '${property}') }}`;
+          template = `{{ $getPropertyText(row, '${property}', '${columnId}') }}`;
         }
       }
 
-      var columnId = parent.gridId + 'column_' + columnIdSeed++;
-      this.columnId = columnId;
-
       var columnIndex = [].indexOf.call(parent.$els.hiddenColumns.children, this.$el);
 
       var columnConfig = {
@@ -133,7 +136,8 @@
         sortable: this.sortable,
         resizable: this.resizable,
         type: type,
-        template: template
+        template: template,
+        formatter: this.formatter
       };
       parent.columns.splice(columnIndex, 0, columnConfig);
 

diff --git a/src/data/grid.vue b/src/data/grid.vue
@@ -26,7 +26,6 @@
   .d-grid td {
     height: 20px;
     max-width: 250px;
-    padding: 2px;
     box-sizing: border-box;
     overflow: hidden;
     line-height: 28px;
@@ -47,19 +46,26 @@
 
   .d-grid th > div {
     display: inline-block;
+    padding: 2px;
+  }
+
+  .d-grid td > div {
+    padding: 2px;
   }
 
   .d-grid .grid-fixed-header-wrapper {
     position: absolute;
     left: 0;
     top: 0;
+    z-index: 3;
   }
 
   .d-grid .grid-fixed-body-wrapper {
     position: absolute;
     left: 0;
     top: 37px;
     overflow: hidden;
+    z-index: 3;
   }
 
   .d-grid .grid-fixed-body-wrapper tr {
@@ -209,7 +215,7 @@
         <thead></thead>
       </table>
     </div>
-    <div class="grid-fixed-body-wrapper" v-if="fixedColumnCount > 0">
+    <div class="grid-fixed-body-wrapper" v-if="fixedColumnCount > 0" :style="{ top: headerHeight + 'px' }">
       <table class="grid-body" cellspacing="0" cellpadding="0" border="0" :style="{ width: fixedBodyWidth ? fixedBodyWidth + 'px' : '' }">
         <tbody></tbody>
       </table>
@@ -420,6 +426,7 @@
         }
 
         this.bodyWidth = bodyWidth;
+        this.headerHeight = this.$el.querySelector('.grid-header-wrapper').offsetHeight;
       },
 
       $calcHeight(height) {
@@ -637,7 +644,7 @@
             }
           },
 
-          data(){
+          data() {
             return {
               dragReadyColumn: false,
               dragging: false,
@@ -680,6 +687,7 @@
                 return array;
               }
               var order = (reverse && reverse < 0) ? -1 : 1;
+
               // sort on a copy to avoid mutating original array
               return array.slice().sort(function (a, b) {
                 if (sortKey !== '$key') {
@@ -701,7 +709,18 @@
               }
               grid.$emit('row-click', row);
             },
-            $getPropertyText: function(row, property) {
+            $getPropertyText: function(row, property, columnId) {
+              var column = null;
+              grid.columns.forEach(function(item) {
+                if (item.id === columnId) {
+                  column = item;
+                }
+              });
+
+              if (column && column.formatter) {
+                return column.formatter(row, column);
+              }
+
               var schema = grid.gridSchema;
               if (schema) {
                 var mapping = schema.getPropertyMapping(property);
@@ -710,6 +729,7 @@
                 }
                 return schema.getPropertyText(row, property);
               }
+
               return row[property];
             }
           }
@@ -805,6 +825,7 @@
 
     data() {
       return {
+        headerHeight: 35,
         selected: null,
         columns: [],
         resizeProxyVisible: false,