要求：1、表格编辑下拉框 2、下拉框数据动态
最难处理是下拉显示问题
下拉动态数据公共方法
getdatadic: function (param) {
/// <summary>数据字典下拉框赋值</summary>
/// <param name="param" type="Object">selectEl:select的ID带#，dataenum数据字典类别的enum值。</param>
admin.req({
url: '/System/DataDictionary/GetListByDataEnumType?rand=' + Math.round(Math.random() * (10000 - 1)).toString(),
data: { dataEnum: param.dataenum }
, async: false//取消异步
, done: function (res) {
if (param.script === "script") {
var slhtml = '<select name="' + param.selectEl + '" id="' + param.selectEl + '" lay-filter="' + param.selectEl + '">'
$(res.Data).each(function (i, n) {
slhtml = slhtml + "<option value='" + n.Id + "'>" + n.Name + "</option>";
// $($("#selectLb").html()).append("<option value='" + n.Id + "'>" + n.Name + "</option>");
});
slhtml = slhtml + ' </select>';
$("#" + param.scriptEl).html(slhtml)
//form.render("select");//必须
}
else {
$(res.Data).each(function (i, n) {
$(param.selectEl).append("<option value='" + n.Id + "'>" + n.Name + "</option>");
});
}
form.render("select");//必须
if (param.wooverify != undefined && param.wooverify) {
$(param.selectEl).next("div.layui-form-select").children("div").children("input").addClass("pen");
//$(param.selectEl).next("div.layui-form-select").children("div").children("input").addClass("pen");
}
}
});
},1、html
<div class="layui-card " id="continvoice"> <div class="layui-card-header">发票</div> <div class="layui-card-body" style="padding: 15px;"> <table id="NF-ContInvoice" lay-filter="NF-ContInvoice"></table> </div> <script type="text/html" id="selectInTypehtml" > <select name='InType' id="InType"> <option value=""></option> </select> </script> <!--表格工具栏--> <script id="tool_continvoice" type="text/html"> <div class="layui-inline"> <button class="layui-btn " lay-event="add"><i class="layui-icon layui-icon-edit"></i> 新增</button> <button class="layui-btn layui-btn-danger" lay-event="save"><i class="layui-icon layui-icon-save"></i>确认</button> </div> </script> </div>
2、样式文件
<style type="text/css" > /*使下拉列表框不被遮挡*/ .layui-table-cell { overflow: visible !important; } /* 使得下拉框与单元格刚好合适 */ td .layui-form-select{ margin-top: -10px; margin-left: -15px; margin-right: -15px; } </style>
3、核心js内容
1、动态加载下拉数据，是后台封装信息
commonnf.getdatadic({ dataenum: 19, selectEl: “InType”, script: “script”, scriptEl: “selectInTypehtml” });
2、{ field: ‘InTypeName’, title: ‘发票类型’, width: 160, templet: ‘#selectInTypehtml’ }
日期
3、, { field: ‘MakeOutDateTime’, title: ‘开票日期’, width: 140, edit: ‘text’, event: ‘Plandate’ }
4、下拉
/**
* 下拉选择框
* **/
form.on(‘select(InType)’, function (data) {
//debugger;
var elemt = $(data.elem)
var trelment = elemt.parents(“tr”);
var tabledata = table.cache[‘NF-ContInvoice’]
var trobjdata = tabledata[trelment.data(‘index’)]//[“InTypeName”] = data.value;
trobjdata.InType = data.value;
for (var i = 0; i < updatedatafp.length; i++) {
if (updatedatafp[i].Id === trobjdata.Id) {
updatedatafp.splice(i, 1);
}
}
isupdatefp = true;
updatedatafp.push(trobjdata);});
5、日期操作
//列表操作栏
table.on(‘tool(NF-ContInvoice)’, function (obj) {
var _data = obj.data;
switch (obj.event) {
case “Plandate”://开票日期
{
// debugger;
var newdata = {};
var field = $(this).data(‘field’);
laydate.render({
elem: this.firstChild
, show: true //直接显示
, closeStop: this
, type: ‘date’
, format: “yyyy-MM-dd”
, done: function (value, date) {
// debugger;
isupdatefp = true;
newdata[field] = value;
obj.update(newdata);
for (var i = 0; i < updatedatafp.length; i++) {
if (updatedatafp[i].Id === obj.data.Id) {
updatedatafp.splice(i, 1);
}
}
obj.data.MakeOutDateTime = value;
updatedatafp.push(obj.data);}
});
}
break;
//case “selectmsd”:
// {
// var field = $(this).data(‘field’);
// debugger;// }
break;
default:
layer.alert(“暂不支持（” + obj.event + “）”);
break;
}
});
整块模块的全部代码
/************************发票-begin*****************************************************************************************/
//发票类型
commonnf.getdatadic({ dataenum: 19, selectEl: "InType", script: "script", scriptEl: "selectInTypehtml" });
table.render({
elem: '#NF-ContInvoice'
, url: '/Contract/ContractCollection/GetInvoiceListByContId?contId=' + contId + '&rand=' + wooutil.getRandom()
, toolbar: '#tool_continvoice'
, defaultToolbar: ['filter']
, cols: [[
{ type: 'numbers', fixed: 'left' }
, { type: 'checkbox', fixed: 'left' }
, { field: 'Id', title: 'Id', width: 50, hide: true }
, { field: 'InTypeName', title: '发票类型', width: 160, templet: '#selectInTypehtml' }
, { field: 'AmountMoneyThod', title: '发票金额', width: 140, edit: 'text' }
, { field: 'MakeOutDateTime', title: '开票日期', width: 140, edit: 'text', event: 'Plandate' }
, { field: 'InCode', title: '发票号', width: 150, edit: 'text' }
, { field: 'InStateDic', title: '发票状态', width: 140 }
, { field: 'ConfirmUserName', title: '确认人', width: 140 }
, { field: 'ConfirmDateTime', title: '确认日期', width: 140 }
, { field: 'CreateUserName', title: '创建人', width: 140 }
, { field: 'CreateDateTime', title: '创建日期', width: 140 }
, { field: 'InType', title: '发票类型id', width: 140, hide: true }
]]
, page: false
, loading: true
, height: setter.table.height_tab
, limit: setter.table.limit_tab
, done: function (res, curr, count) {
var tableId = "NF-ContInvoice";
var divForm = $("#" + tableId).next(); // 获取表格，tableId是表格的id
var tableCache = table.cache[tableId]; // 获取表格缓存数据，tableCacheId也是表格的id
var trJqs = divForm.find(".layui-table-body tr"); // 获取表格body下的所有tr标签
trJqs.each(function () { // 遍历每个tr标签
var trJq = $(this); // 获得当前遍历的tr标签
var dataIndex = trJq.attr("data-index"); // 得到当前数据行的data-index，即为第几行数据
trJq.find("td").each(function () { // 遍历tr标签下的每一个td标签
var tdJq = $(this); // 获得当前遍历的td标签
var fieldName = tdJq.attr("data-field"); // 获得当前td标签的字段名
var selectJq = tdJq.find("select"); // 获得当前td标签下的select标签
if (selectJq.length == 1) { // 判断select标签是否存在
selectJq.eq(0).val(tableCache[dataIndex]["InType"]); // 将表格里的缓存数据赋值给select标签
}
});
});
form.render('select'); // 重新加载select表单
}
});
var contaoviceEvent = {
add: function () {
admin.req({
url: '/Contract/ContractCollection/AddAnvoiceLine?rand=' + wooutil.getRandom()
, data: { contId: contId }
, success: function (res) {
table.reload("NF-ContInvoice", {
page: { curr: 1 }
, where: {}
});
}
});
},
save: function () {
if (isupdatefp) {//发票保存
// debugger;
for (var i = 0; i < updatedatafp.length; i++) {
//if (updatedatafp[i].Id === obj.data.Id) {
// updatedatafp.splice(i, 1);
//}
updatedatafp[i].AmountMoney = updatedatafp[i].AmountMoneyThod;
}
admin.req({
url: '/Contract/ContractCollection/SaveFpData',
data: { data: updatedatafp },
type: 'POST',
done: function (res) {
//清空变量，防止重复提交
updatedata = [];
isupdate = false;
return layer.msg('保存成功', { icon: 1 });
}
});
} else {
return layer.msg('数据没有任何修改！', { icon: 5 });
}
}
};
//发票头部工具栏
table.on('toolbar(NF-ContInvoice)', function (obj) {
switch (obj.event) {
case 'add':
contaoviceEvent.add();
break;
case 'save':
contaoviceEvent.save();
break
case 'LAYTABLE_COLS'://选择列-系统默认不管
break;
default:
layer.alert("暂不支持（" + obj.event + "）");
break;
};
});
//列表操作栏
table.on('tool(NF-ContInvoice)', function (obj) {
var _data = obj.data;
switch (obj.event) {
case "Plandate"://开票日期
{
// debugger;
var newdata = {};
var field = $(this).data('field');
laydate.render({
elem: this.firstChild
, show: true //直接显示
, closeStop: this
, type: 'date'
, format: "yyyy-MM-dd"
, done: function (value, date) {
// debugger;
isupdatefp = true;
newdata[field] = value;
obj.update(newdata);
for (var i = 0; i < updatedatafp.length; i++) {
if (updatedatafp[i].Id === obj.data.Id) {
updatedatafp.splice(i, 1);
}
}
obj.data.MakeOutDateTime = value;
updatedatafp.push(obj.data);
}
});
}
break;
//case "selectmsd":
// {
// var field = $(this).data('field');
// debugger;
// }
break;
default:
layer.alert("暂不支持（" + obj.event + "）");
break;
}
});
/**编辑**/
table.on('edit(NF-ContInvoice)', function (obj) {
// debugger;
isupdatefp = true;
var data = obj.data; //得到所在行所有键值
var filed = obj.field;
switch (filed) {
case "AmountMoneyThod"://发票金额
{
var amoutthd = wooutil.numThodFormat(obj.value.toString());
obj.data.AmountMoney = amoutthd;
}
break;
}
//修改值
for (var i = 0; i < updatedatafp.length; i++) {
if (updatedatafp[i].Id === obj.data.Id) {
updatedatafp.splice(i, 1);
}
}
updatedatafp.push(obj.data);
});
/**
* 下拉选择框
* **/
form.on('select(InType)', function (data) {
//debugger;
var elemt = $(data.elem)
var trelment = elemt.parents("tr");
var tabledata = table.cache['NF-ContInvoice']
var trobjdata = tabledata[trelment.data('index')]//["InTypeName"] = data.value;
trobjdata.InType = data.value;
for (var i = 0; i < updatedatafp.length; i++) {
if (updatedatafp[i].Id === trobjdata.Id) {
updatedatafp.splice(i, 1);
}
}
isupdatefp = true;
updatedatafp.push(trobjdata);
});
/*************************发票-end*******************************************************************************************/
