layui在表格中新增一条表数据
layui新增一条数据，且可以读取接口的表数据，且可修改表中数据做计算
BiKABi废话不多说，先上代码分析一下
/*给表格添加序号*/
/*
*表新增数据
*/
var ctx = "/";
const prefix_lm = ctx + "basicSetup/field";/*路径*/
var selsectId = $("#id").val();//获取ID组件值用来判断是 新增还是修改
if(selsectId && selsectId != "")
{
/*ID存在，当前是修改界面*/
editPageInit();
}else{
/*当前是新增界面*/
addPageInit();
}
/*规则明细中值类型选择的监听器*/
function valueTypeSelect(form){
form.on('select(valueType)', function(obj) {
var elem = $(obj.elem);
var trElem = elem.parents('tr');
var tableData = table.cache['demo'];
/*更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值*/
tableData[trElem.data('index')][elem.attr('name')] = obj.value;
});
}
/*规则明细表单加载*/
function detailTableRender(table, datas, form){
layui.use([ 'table' ,'laydate'], function() {
var laydate = layui.laydate;
table.render({
elem : '#demo',
height : '500',
// url : '/common/data/processInfoList',
// method: "POST",
data : datas, /*数据接口，最下面有自定义的一个datas的数据，也就是新增在页面上的*/
page : false,
limit : Number.MAX_VALUE,
where : {
orderNum : $('#orderNum').val()
},
cols : [ [
{
title: '序号',
templet: '#xuhao',/*这个序号的添加需要在body处添加一个script*/
hide : true
},
{
field : 'id',
edit : 'text',
fixed : 'left',
hide : true
}, {/*下拉选择*/
field : 'processName',
title : '工序名称*',
align : 'center',
width : 200,
templet :function (d) {
var workNos = [];
$.ajax({
url : '/路径',
method : 'post',
async: false,
contentType : "application/json", /*指定这个协议很重要，很重要，很重要*/
dataType : 'JSON',
success : function(res) {
if (res.code = '0') {
workNos = res.data;
} else
alert(res.msg);
},
error : function(data) {
}
});
var ret = '";
return ret;
},
unresize : true
}, {
field : 'simplexTime',
title : '单工时(h)*',
align : 'center',
edit : 'text'
}, {
field : 'totalTime',
title : '总工时(h)*',
align : 'center'
}, {
field: 'startTime',
title: '开始时间',
align: 'center',
templet: function (d) {
return '';
}
},
{
field: 'endTime',
title: '结束时间',
align: 'center',
templet: function (d) {
return '';
}
},{
field : 'operate',
title : '操作',
align : 'center',
toolbar : '#barDemo'
},
] ],
done: function (msg, curr, count) {
/*日期控件*/
$(".layui-input-date").each(function (i) {
layui.laydate.render({
elem: this,
type: 'datetime',
format: "yyyy-MM-dd HH:mm:ss",
done: function (value, date) {
var filedName = this.elem[0].name;
var no = parseInt(i/2);
if (msg && msg.data[no]) {
if(filedName == "endTime")
{
$.extend(msg.data[no], {'endTime': value})
}else if(filedName == "startTime"){
$.extend(msg.data[no], {'startTime': value})
}
}
}
});
});
console.log(msg);
}
})
})
/*下拉选择*/
form.on('select(testSelect)', function(obj) {
var elem = $(obj.elem);
var trElem = elem.parents('tr');
var tableData = table.cache['demo'];
/*更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值*/
tableData[trElem.data('index')][elem.attr('name')] = obj.value;
});
table.on('radio(demo)', function(obj) {
alert("ddd");
});
}
/*
*删除，上移，下移
*/
function detailTool(table){
table.on('tool(demo)', function(obj) {
// 注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data, // 获得当前行数据
layEvent = obj.event; // 获得 lay-event 对应的值
if (layEvent === 'detail') {
layer.msg('查看操作');
} else if (layEvent === 'del') {
layer.confirm('真的删除行么', function(index) {
var details = table.cache["demo"];
var newDetails = [];
var trElem = obj.tr;
var allTime = 0;
for(var i=0; i这个新增功能很有意思，希望对你有帮助，代码基本都写了是什么功能，如有不懂，可以留言
如有错误或好的方法请斧正
以上