标签：return layui content field item3 tds table fixed 编辑框
代码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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。