其他分享
首页 > 其他分享> > layui table表格可编辑项默认显示可编辑框

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

作者:互联网

代码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             };

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

标签:return,layui,content,field,item3,tds,table,fixed,编辑框
来源: https://www.cnblogs.com/sjzjams/p/14956027.html