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