layui是不错的跨屏响应式前端框架，不仅提供了丰富的ui样式，对于数据的渲染逻辑也有清晰脱俗的机制，切图网对于layui的了解也是逐步递进，从ui再到数据处理，下面是layui数据表格添加的逻辑，主要是先获取表格数据，然后对数据进行追加，然后重新渲染表格的方法，以下代码亲测有效，而修改该行和删除该行的方法比较简单，数据表格默认提供了该方法。
layui目前已经关停了官网，原因可能是非法的灰色网站采用了layui导致了受牵连，附来自民间的官网镜像 https://layuion.com/
//添加机构
var demo1;
$('#addgov').click(function(){
layer.closeAll();
layer.open({
type: 1,
title :'所在机构/单位名称',
shade :false,
//offset:'rb',
//offset:[0, 0],
skin: 'layui-layer-rim', //加上边框
area: ['550px', 'auto'], //宽高
content: $('#addgovdialog'),
success: function (layero) {
$('#govfield_sx').val('');
//$('#govfield_jgmc').val('');
$('#govfield_jglx').val('');
$('#govfield_drzw').val('');
form.render('select', 'govform');
$(':focus').blur();
// 添加form标识
layero.addClass('layui-form');
// 将保存按钮改变成提交按钮
layero.find('.layui-layer-btn0').attr({
'lay-filter': 'formedit',
'lay-submit': ''
});
//form.render();
},
btn:['确定'],
yes:function(){
form.on('submit(formedit)', function (data) {
//获取表单的值
console.log(data);
//获取机构/单位名称 的值
var dwmc = demo1.getValue();
var dwmc_name = dwmc[0].name;
var dwmc_value = dwmc[0].value;
console.log(dwmc[0]);
//console.log(data.field);
//获取旧数据，并且追加一条数据 ，重新加载表格
var oldData = table.cache["testReload2"];
var i = oldData.length+1;
//console.log(oldData.length);
var data1 = {aa: data.field.sx, bb: dwmc[0].name, bb2: dwmc[0].value, cc: data.field.jglx, dd: data.field.drzw};
//添加
oldData.push(data1);
//console.log(oldData)
//刷新
table.reload('testReload2', {
url: '',
data: oldData
});
layer.closeAll();
//layer.msg('提交');
});
},
btn2:function(){
},
});
return false;
})修改和删除提供了方法，所以比较简单
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
//console.log(data);
//添加投资机构和参评信息中的现所在机构的数据要联动
szjg_linkage(data);
});
} else if(obj.event === 'edit'){
//layer.alert('编辑行：<br>'+ JSON.stringify(data))
console.log(obj); //获取表格值
layer.closeAll();
layer.open({
type: 1,
title :'所在机构/单位名称',
shade :false,
//offset:'rb',
//offset:[0, 0],
skin: 'layui-layer-rim', //加上边框
area: ['550px', '400px'], //宽高
content: $('#addgovdialog'),
success: function (layero) {
//ajax示例
// $.ajax({
// type: "post",
// url: "dwmc.json",
// dataType: "json",
// //data: formData ,
// //processData : false,
// //必须false才会自动加上正确的Content-Type
// contentType : false ,
//
// success: function(data) {
//
// },
// error: function(data){
//
//
// }
// })
demo1 = xmSelect.render({
el: '#demo1',
clickClose: true,
filterable: true,
radio: true,
create: function(val, arr){
if(arr.length === 0){
return {
name: '创建'+val,
value: val
}
}
},
initValue: [data.bb2], //设置默认选中
data: [
//{name: '张三', value: 1,selected:true},
{name: '机构名称1', value: 1},
{name: '机构名称2', value: 2},
],
on: function(data){
console.log(data);
if(data.isAdd){
//数据变化 赋值 ，联动
if(data.change.length>0){
$('#govfield_jglx').val('111');
$('#govfield_drzw').val('aaaa');
form.render();
}
}
},
filterable: true, //远程搜索
})
$('#govfield_sx').val(data.aa);
//$('#govfield_jgmc').val(data.bb);
$('#govfield_jglx').val(data.cc);
$('#govfield_drzw').val(data.dd);
form.render('select', 'govform');
$(':focus').blur();
// 添加form标识
layero.addClass('layui-form');
// 将保存按钮改变成提交按钮
layero.find('.layui-layer-btn0').attr({
'lay-filter': 'formedit',
'lay-submit': ''
});
//form.render();
},
btn:['确定'],
yes:function(){
form.on('submit(formedit)', function (data) {
//获取表单的值
console.log(data);
//获取机构/单位名称 的值
var dwmc = demo1.getValue();
var dwmc_name = dwmc[0].name;
var dwmc_value = dwmc[0].value;
console.log(dwmc[0]);
//console.log(data.field);
//修改该行数据
obj.update({
aa: data.field.sx, bb: dwmc[0].name, bb2: dwmc[0].value, cc: data.field.jglx, dd: data.field.drzw
});
// //刷新
// table.reload('testReload2', {
// url: '',
// data: oldData
// });
//
layer.closeAll();
//layer.msg('提交');
});
},
btn2:function(){
},
});
return false;
}
});