扩展表格单元格编辑功能(增加下拉框、日期选择、单选等表单功能)

分享 未结 1 196
青大侠
青大侠 2019-8-7
悬赏:20飞吻
现在的表格只有文本编辑功能,并没有单选、多选、下拉、日期等表单。

一、主要修改table.js文件, that.layBody.on('click', 'td', function(e){},直接上代码:
     //单元格单击事件
that.layBody.on('click', 'td', function(e){
var othis = $(this)
,field = othis.dat0 || othis.append(input);
othis.dat0 || othis.append(input);
var sty='<style>';
sty+='textarea.layui-textarea.layui-table-edit {';
sty+=' z-index: 2;';
sty+=' }';
sty+=' </style>';
othis.append(sty)
othis.dat0 || othis.append(input);
othis.dat0 || othis.append(input);
othis.dat0 || othis.append($(edithtml));
othis.dat0 || othis.append(input);
othis.dat0 || othis.append(input);
othis.data('isEditing',true);
elemCell.hide();
var dconfig={elem: '#'+field,type: 'date'};
if(tablecol.option){
$.extend(dconfig,tablecol.option);
}
layui.laydate.render(dconfig);
that.editor={edittype:'laydate',editing:true,editTd:othis,editInput:input};
layui.stope(e);
});

},//end laydate
};//editor
//显示编辑表单
if(that.editor){//检查是否从一个编辑单元格离开到另一个单元格
if(that.editor.editing){
endEdit(that.editor.editTd,that.editor.editInput);
}
}
if(editType){
editor[editType] ? editor[editType]():hint.error('不支持的'+ editType + '编辑方法');
return;

}
}).on('mouseenter', 'td', function(){
gridExpand.call(this)
}).on('mouseleave', 'td', function(){
gridExpand.call(this, 'hide');
});
同时要注释 that.layBody.on('change', '.'+ELEM_EDIT, function(){}一段代码。

二、在官网演示table.html,网页中要这样定义:
 //渲染
window.ins1 = table.render({
elem: '#test'
,height: 400
//,width: 600
,title: '用户数据表'
,url: 'json/table/demo1.json'
//,size: 'lg'
,page: {

}

,autoSort: false
//,loading: false
,totalRow: true
,limit: 30
,toolbar: '#toolbarDemo'
//,defaultToolbar: ['filter']
,cols: [[
{type: 'checkbox', 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:'email', title:'邮箱', hide: 0, width:150, edit: 'text', templet: function(x){
return '<em>123</em>'
}}
,{field:'sex', title:'性别', width:80, edit:'radio',option:[{value:"男",title:"男"},{value:"女",title:"女"}], sort: true}
,{field:'city', title:'城市', width:120, edit:'select',option:[{'text':'浙江杭州','id':'浙江杭州'},{'text':'浙江宁波','id':'浙江宁波'},{'text':'江苏南京','id':'江苏南京'}] }
,{field:'sign', title:'签名',edit:'textarea'}
,{field:'experience', title:'积分', width:80,edit: 'text', sort: true, totalRow: true}
,{field:'ip', title:'IP', width:120,edit:'editbtn',option:{popupFn:'popupWin'}}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'joinTime', title:'加入时间', width:120,edit:'laydate'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
/*
,response: {
statusName: 'status'
,statusCode: 200
}
,parseData: function(res){
return {
"status": res.status
,"msg": res.message
,"count": res.total
,"data": res.data.list
};
}
*/
});

三、获取修改的数据:
在table.js增加下面的
    //获得数据
table.getData=function(tableid,dataState){
var arr = []
,data = table.cache[tableid] || [];
if(typeof (dataState) =="number")return table.cache[tableid] [dataState];
if(dataState=='delete')return table.deletedRows[tableid]||[];
layui.each(data, function(i, item){
if(item.constructor === Array){
return;
}
if(dataState){
if(item['lay_state']==dataState){
arr.push(table.clearCacheKey(item));
}
}else{
arr.push(table.clearCacheKey(item));
}


});
return arr; //选中的数据
};
在网页中直接调取就OK

没怎么仔细调试代码,起个抛砖引玉作风,靠大家完善。
如怎么显示已修改的单元格,在单元格左上解显示一个小三角。还有编辑时的界面怎么优美,特别是在最底的行时,下拉框显示问题。



回帖