table: 新增、加强和修复若干项

examples/json/table/demo1.json

@@ -9,7 +9,7 @@
     "id": "10001"
     ,"username": "杜甫123"
     ,"email": "test1@email.com"
-    ,"sex": "<strong>男</strong>"
+    ,"sex": "<strong style=\"color: red\">男</strong>"
     ,"city": "浙江杭州"
     ,"sign": "舍南舍北皆春水，但见群鸥日日来。花径不曾缘客扫，蓬门今始为君开。盘飧市远无兼味，樽酒家贫只旧醅。肯与邻翁相对饮，隔篱呼取尽余杯。"
     ,"experience": 7

examples/table-test.html

@@ -152,11 +152,13 @@ layui.use(['table', 'dropdown'], function(){
       {type: 'checkbox', fixed: 'left'}
       //,{type: 'numbers', fixed: 'left'}
       ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
-      ,{field:'username', title:'用户名', width:120, edit: 'text', templet: '#usernameTpl'}
+      ,{field:'username', title:'用户名', width:120, edit: function(d){
+        return !d.LAY_DISABLED;
+      }, templet: '#usernameTpl'}
       ,{field:'email', minWidth: 160, title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, edit: 'text', templet: function(d){
         return '<em>'+ layui.util.escape(d.email) +'</em>'
       }}
-      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
+      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true, escape: false}
       ,{field:'city', title:'城市', width:120, templet: '#cityTpl', exportTemplet: function(d, obj){
         //console.log(obj)
         var td = obj.td(this.field); //获取当前 td

examples/table.html

@@ -228,16 +228,17 @@ layui.use('table', function(){
     //,width: 900
     //,height: 274
     ,cols: [[ //标题栏
-      {type: 'checkbox', LAY_CHECKED: true}
+      //{type: 'space'},
-      ,{field: 'id', title: 'ID', width: 80, sort: true}
+      {type: 'checkbox', LAY_CHECKED: true},
-      ,{type: 'space', width: 100} //空列
+      {field: 'id', title: 'ID', width: 80, sort: true},
-      ,{field: 'username', title: '用户名', width: 120}
+      {type: 'space', width: 100}, //空列
-      ,{field: 'email', title: '邮箱', width: 150}
+      {field: 'username', title: '用户名', width: 120},
-      ,{field: 'sign', title: '签名', width: 150}
+      {field: 'email', title: '邮箱', width: 150},
-      ,{field: 'sex', title: '性别', width: 80}
+      {field: 'sign', title: '签名', minWidth: 150},
-      ,{field: 'city', title: '城市', width: 100}
+      {field: 'sex', title: '性别', width: 80},
-      // ,{field: 'experience', title: '积分', width: 80, sort: true}
+      {field: 'city', title: '城市', width: 100},
-      ,{field: 'experience', title: '积分', width: 80, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'}
+      //{field: 'experience', title: '积分', width: 80, sort: true},
+      {field: 'experience', title: '积分', width: 80, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'}
     ]]
     ,data: [{
       "id": "10001"

src/modules/table.js

@@ -77,12 +77,13 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
   ,parseTempData = function(obj){
     obj = obj || {};
 
-    var options = this.config || {}
+    var options = this.config || {};
-    ,item3 = obj.item3 // 表头数据
+    var item3 = obj.item3; // 表头数据
-    ,content = obj.content; // 原始内容
+    var content = obj.content; // 原始内容
     
     // 是否编码 HTML
-    if(options.escape) content = util.escape(content);
+    var escaped = 'escape' in item3 ? item3.escape : options.escape;
+    if(escaped) content = util.escape(content);
     
     // 获取模板
     var templet = obj.text && item3.exportTemplet || (item3.templet || item3.toolbar);
@@ -91,7 +92,9 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
     if(templet){
       content = typeof templet === 'function' 
         ? templet.call(item3, obj.tplData, obj.obj)
-      : laytpl($(templet).html() || String(content)).render(obj.tplData);
+      : laytpl($(templet).html() || String(content)).render($.extend({
+        LAY_COL: item3
+      }, obj.tplData));
     }
     
     // 是否只返回文本
@@ -430,7 +433,7 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
     ,initWidth = {
       checkbox: 50
       ,radio: 50
-      ,space: 15
+      ,space: 30
       ,numbers: 60
     };
     
@@ -918,6 +921,18 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
     return that;
   };
 
+  // 获取表头参数项
+  Class.prototype.col = function(key){
+    try {
+      key = key.split('-');
+      return this.config.cols[key[1]][key[2]];
+    } catch(e){
+      hint.error(e);
+      return {};
+    }
+  };
+
+
   // 数据渲染
   Class.prototype.renderData = function(opts){
     var that = this;
@@ -968,8 +983,7 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
           // td 内容
           var td = ['<td data-field="'+ field +'" data-key="'+ key +'" '+ function(){ //追加各种属性
             var attr = [];
-            if(item3.edit) attr.push('data-edit="'+ item3.edit +'"'); //是否允许单元格编辑
+            if(item3.templet) attr.push('data-content="'+ util.escape(content) +'"'); //自定义模板
-            if(item3.templet) attr.push('data-content="'+ content +'"'); //自定义模板
             if(item3.toolbar) attr.push('data-off="true"'); //行工具列关闭单元格事件
             if(item3.event) attr.push('lay-event="'+ item3.event +'"'); //自定义事件
             if(item3.minWidth) attr.push('data-minwidth="'+ item3.minWidth +'"'); //单元格最小宽度
@@ -1901,11 +1915,11 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
     
     // 单元格编辑
     that.layBody.on('change', '.'+ELEM_EDIT, function(){
-      var othis = $(this)
+      var othis = $(this);
-      ,value = this.value
+      var value = this.value;
-      ,field = othis.parent().data('field')
+      var field = othis.parent().data('field');
-      ,index = othis.parents('tr').eq(0).data('index')
+      var index = othis.parents('tr').eq(0).data('index');
-      ,data = table.cache[that.key][index];
+      var data = table.cache[that.key][index];
       
       data[field] = value; // 更新缓存中的值
       layui.event.call(this, MOD_NAME, 'edit('+ filter +')', commonMember.call(this, {
@@ -1913,37 +1927,42 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
         ,field: field
       }));
     }).on('blur', '.'+ELEM_EDIT, function(){
-      var item3
+      var othis = $(this);
-      ,othis = $(this)
+      var td = othis.parent();
-      ,thisElem = this
+      var key = td.data('key');
-      ,field = othis.parent().data('field')
+      var index = othis.closest('tr').data('index');
-      ,index = othis.parents('tr').eq(0).data('index')
+      var data = table.cache[that.key][index];
-      ,data = table.cache[that.key][index];
+
-      that.eachCols(function(i, item){
-        if(item.field == field && item.templet){
-          item3 = item;
-        }
-      });
       othis.siblings(ELEM_CELL).html(function(value){
         return parseTempData.call(that, {
-          item3: item3 || {}
+          item3: that.col(key)
           ,content: value
           ,tplData: data
         });
-      }(thisElem.value));
+      }(othis[0].value));
-      othis.parent().data('content', thisElem.value);
+      td.data('content', othis[0].value);
       othis.remove();
     });
     
     // 单元格事件
     that.layBody.on(options.editTrigger, 'td', function(e){
-      var othis = $(this)
+      var othis = $(this);
-      ,field = othis.data('field')
-      ,editType = othis.data('edit')
-      ,elemCell = othis.children(ELEM_CELL);
 
       if(othis.data('off')) return; // 不触发事件
 
+      var field = othis.data('field');
+      var key = othis.data('key');
+      var col = that.col(key);
+      var index = othis.closest('tr').data('index');
+      var data = table.cache[that.key][index];
+      var elemCell = othis.children(ELEM_CELL);
+
+      // 是否开启编辑
+      // 若 edit 传入函数，则根据函数的发挥结果判断是否开启编辑
+      var editType = typeof col.edit === 'function' 
+        ? col.edit(data) 
+      : col.edit;
+      
       // 显示编辑表单
       if(editType){
         var input = $(function(){
@@ -1954,7 +1973,7 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
           return inputElem;
         }());
         
-        input[0].value = othis.data('content') || elemCell.text();
+        input[0].value = othis.data('content') || data[field] || elemCell.text();
         othis.find('.'+ELEM_EDIT)[0] || othis.append(input);
         input.focus();
         layui.stope(e);