layui table表格可编辑项默认显示可编辑框

Posted 2021-06-30 小luo

代码772行渲染行
//渲染视图
,render = function(){ //后续性能提升的重点

//789行代码正式开始
that.eachCols(function(i3, item3){

//field不多解释，content是每一列的内容
var field = item3.field || i3
    ,key = options.index + \'-\' + item3.key
    ,content = item1[field];

---

以下才是正式内容上面是修改的位置
增加修改代码如下：新增代码在下面代码种注释为新增代码-
　　

  1 //渲染视图
  2             ,render = function(){ //后续性能提升的重点
  3 
  4                 var thisCheckedRowIndex;
  5                 if(!sort && that.sortKey){
  6                     return that.sort(that.sortKey.field, that.sortKey.sort, true);
  7                 }
  8                 layui.each(data, function(i1, item1){
  9                     var tds = [], tds_fixed = [], tds_fixed_r = []
 10                         ,numbers = i1 + options.limit*(curr - 1) + 1; //序号
 11 
 12                     if(item1.length === 0) return;
 13 
 14                     if(!sort){
 15                         item1[table.config.indexName] = i1;
 16                     }
 17 
 18                     that.eachCols(function(i3, item3){
 19                         var field = item3.field || i3
 20                             ,key = options.index + \'-\' + item3.key
 21                             ,content = item1[field];
 22                         console.log(content)
 23                         //新增代码-用来显示渲染input
 24                         var textstr = "";
 25                         if(content === undefined || content === null) content = \'\';
 26                         if(item3.colGroup) return;
 27                         //新增代码--判断列是否可编辑，可编辑默认显示input，注意新增样式edit-focus layui.css 复制.layui-table-edit:focus样式 .edit-focus{border-color:#5FB878!important}
 28                         if(item3.edit == \'text\') {
 29                             console.log(item3.edit)
 30                             if(content == ""){
 31                                 textstr = \'<input class="layui-input \' + ELEM_EDIT + \' edit-focus">\'
 32                             }
 33                         }
 34                         if(item3.edit == \'date\'){
 35                             if(content == "") {
 36                                 textstr = \'<input class="layui-input \' + ELEM_EDIT + \' calendar edit-focus" readonly>\'
 37                             }
 38                         }
 39                         //td内容
 40                         var td = [\'<td data-field="\'+ field +\'" data-key="\'+ key +\'" \'+ function(){ //追加各种属性
 41                             var attr = [];
 42                             if(item3.edit) {
 43                                 attr.push(\'data-edit="\'+ item3.edit +\'"\');
 44 
 45                             } //是否允许单元格编辑
 46                             if(item3.align) attr.push(\'align="\'+ item3.align +\'"\'); //对齐方式
 47                             if(item3.templet) attr.push(\'data-content="\'+ content +\'"\'); //自定义模板
 48                             if(item3.toolbar) attr.push(\'data-off="true"\'); //行工具列关闭单元格事件
 49                             if(item3.event) attr.push(\'lay-event="\'+ item3.event +\'"\'); //自定义事件
 50                             if(item3.style) attr.push(\'style="\'+ item3.style +\'"\'); //自定义样式
 51                             if(item3.minWidth) attr.push(\'data-minwidth="\'+ item3.minWidth +\'"\'); //单元格最小宽度
 52                             return attr.join(\' \');
 53                         }() +\' class="\'+ function(){ //追加样式
 54                             var classNames = [];
 55                             if(item3.hide) classNames.push(HIDE); //插入隐藏列样式
 56                             if(!item3.field) classNames.push(\'layui-table-col-special\'); //插入特殊列样式
 57                             return classNames.join(\' \');
 58                         }() +\'">\'
 59                             ,\'<div class="layui-table-cell laytable-cell-\'+ function(){ //返回对应的CSS类标识
 60                                 return item3.type === \'normal\' ? key
 61                                     : (key + \' laytable-cell-\' + item3.type);
 62                             }() +\'">\' + function(){
 63                                 var tplData = $.extend(true, {
 64                                     LAY_INDEX: numbers
 65                                 }, item1)
 66                                     ,checkName = table.config.checkName;
 67 
 68                                 //渲染不同风格的列
 69                                 switch(item3.type){
 70                                     case \'checkbox\':
 71                                         return \'<input type="checkbox" name="layTableCheckbox" lay-skin="primary" \'+ function(){
 72                                             //如果是全选
 73                                             if(item3[checkName]){
 74                                                 item1[checkName] = item3[checkName];
 75                                                 return item3[checkName] ? \'checked\' : \'\';
 76                                             }
 77                                             return tplData[checkName] ? \'checked\' : \'\';
 78                                         }() +\'>\';
 79                                         break;
 80                                     case \'radio\':
 81                                         if(tplData[checkName]){
 82                                             thisCheckedRowIndex = i1;
 83                                         }
 84                                         return \'<input type="radio" name="layTableRadio_\'+ options.index +\'" \'
 85                                             + (tplData[checkName] ? \'checked\' : \'\') +\' lay-type="layTableRadio">\';
 86                                         break;
 87                                     case \'numbers\':
 88                                         return numbers;
 89                                         break;
 90                                 };
 91                                 //解析工具列模板
 92                                 if(item3.toolbar){
 93                                     return laytpl($(item3.toolbar).html()||\'\').render(tplData);
 94                                 }
 95                                 return parseTempData(item3, content, tplData);
 96                             }()
 97                             //新增代码插入到对象位置
 98                             ,\'</div>\'+textstr+\'</td>\'].join(\'\');
 99 
100                         tds.push(td);
101                         if(item3.fixed && item3.fixed !== \'right\') tds_fixed.push(td);
102                         if(item3.fixed === \'right\') tds_fixed_r.push(td);
103                     });
104 
105                     trs.push(\'<tr data-index="\'+ i1 +\'">\'+ tds.join(\'\') + \'</tr>\');
106                     trs_fixed.push(\'<tr data-index="\'+ i1 +\'">\'+ tds_fixed.join(\'\') + \'</tr>\');
107                     trs_fixed_r.push(\'<tr data-index="\'+ i1 +\'">\'+ tds_fixed_r.join(\'\') + \'</tr>\');
108                 });
109 
110                 that.layBody.scrollTop(0);
111                 that.layMain.find(\'.\'+ NONE).remove();
112                 that.layMain.find(\'tbody\').html(trs.join(\'\'));
113                 that.layFixLeft.find(\'tbody\').html(trs_fixed.join(\'\'));
114                 that.layFixRight.find(\'tbody\').html(trs_fixed_r.join(\'\'));
115 
116                 that.renderForm();
117                 typeof thisCheckedRowIndex === \'number\' && that.setThisRowChecked(thisCheckedRowIndex);
118                 that.syncCheckAll();
119 
120                 //滚动条补丁
121                 that.haveInit ? that.scrollPatch() : setTimeout(function(){
122                     that.scrollPatch();
123                 }, 50);
124                 that.haveInit = true;
125 
126                 layer.close(that.tipsIndex);
127 
128                 //同步表头父列的相关值
129                 options.HAS_SET_COLS_PATCH || that.setColsPatch();
130                 options.HAS_SET_COLS_PATCH = true;
131             };

想要扩展就自己来改源码吧。