问题:layui表格前端排序后,操作列点击失效问题
原因:事件绑定失效,需要重新进行绑定
tableRender: function () {
var that = this;
table.render({
elem: '#detpBud'
, id: 'detpBud'
, limit: 99999
, height: "full-105"
, totalRow: true
, data: dataList
, page: false
, autoSort:true
, cols: [[
{ type: "numbers", fixed: 'left', rowspan: 2 }
, { type: "checkbox", fixed: 'left', rowspan: 2, hide: (!that.data.isWithdraw && !that.data.isSubmit) ? false : true }
, { field: 'ProjCode', title: '项目编码', width: 130, rowspan: 2, totalRowText: '合计', sort: true, fixed: 'left', templet: "#Project" }
, { field: 'ProjName', title: '项目名称', width: 310, rowspan: 2, sort: true, fixed: 'left', }
, {
field: 'IsRegular', title: '经常性项目', width: 100, rowspan: 2, templet: function (d) {
if (d.IsRegular) return '<span class="layui-badge layui-bg-blue">是</span>';
return '<span class="layui-badge layui-bg-orange">否</span>'
}
}
, { field: 'CheckPhase', title: '审核阶段', width: 120, rowspan: 2, templet: "#CheckPhase", sort: false }
, { field: 'BudProjectStatus', title: '申报状态', width: 100, rowspan: 2, templet: "#BudProjectStatus", sort: false, hide: true }
, { align: 'center', title: Year + '年预算金额', colspan: 2, sort: true }
, { align: 'center', title: Number(Year) - 2 + "年执行情况", colspan: 4, sort: true }
, { align: 'center', title: Number(Year) - 1 + "年执行情况", colspan: 4, sort: true }
, { field: 'Operation', title: '操作', toolbar: '#barOperation', fixed: 'right', width: 120 }
], [
{
field: 'BudAmt1', width: 120, title: '申报金额', sort: true, totalRow: true, templet: function (d) {
return '<span data-format="money">' + d.BudAmt1 + '</span>';
}
}
, {
field: 'AdvAmt1', width: 120, title: '建议金额', sort: true, totalRow: true, templet: function (d) {
return '<span data-format="money">' + d.AdvAmt1 + '</span>';
}
}
, {
field: 'BLLRBudAmt', title: '预算金额', width: 150, sort: true, totalRow: true, templet: function (d) {
return '<span data-format="money">' + (d.BLastYearData == null ? "" : d.BLastYearData.LRBudAmt) + '</span>';
}
}
, {
field: 'BLLRExpAmt', title: '执行金额', width: 150, sort: true, totalRow: true, templet: function (d) {
return '<span data-format="money">' + (d.BLastYearData == null ? "" : d.BLastYearData.LRExpAmt) + '</span>';
}
}
, {
field: 'LRExpRate', title: '执行率', width: 100, sort: true, templet: function (d) {
return '<div style="text-align:right;">' + (d.BLastYearData == null ? "0" : Number(((d.BLastYearData.LRExpRate) * 100).toFixed(2))) + '%</div>';
}
}
, {
field: 'DiffAmt', title: '增减变动', width: 150, rowspan: 2, totalRow: true, templet: function (d) {
return '<div data-format="money">' + (d.BLastYearData == null ? "" : d.BLastYearData.DiffAmt) + '%</div>';
}
}
, {
field: 'LLRBudAmt', title: '预算金额', width: 150, sort: true, totalRow: true, templet: function (d) {
return '<span data-format="money">' + (d.LastYearData == null ? "" : d.LastYearData.LRBudAmt) + '</span>';
}
}
, {
field: 'LLRExpAmt', title: '执行金额', width: 150, sort: true, totalRow: true, templet: function (d) {
return '<span data-format="money">' + (d.LastYearData == null ? "" : d.LastYearData.LRExpAmt) + '</span>';
}
}
, {
field: 'LRExpRate', title: '执行率', width: 100, sort: true, templet: function (d) {
return '<div style="text-align:right;">' + (d.LastYearData == null ? "0" : Number(((d.LastYearData.LRExpRate) * 100).toFixed(2))) + '%</div>';
}
}
, {
field: 'DiffAmt', title: '增减变动', width: 150, rowspan: 2, totalRow: true, templet: function (d) {
return '<div data-format="money">' + (d.LastYearData == null ? "" : d.LastYearData.DiffAmt) + '%</div>';
}
}
]]
, done: function (res) {
format.init();
dropdown(res.data, function (data) {
var options = [];
if (data.DeptBudStatus == "B") {
options.push({
title: "详审",
icon: "layui-icon-form",
event: function () {
location.href = "/BG/ExpBudCtrlDept/ExpBudCtrlDeptDetailR?ExpBudProjectId=" + data.ExpBudProjectId + "&BudAmt1=" + data.BudAmt1+"&type=1";
}
});
}
else {
options.push(
{
title: "查看",
icon: "layui-icon-form",
event: function () {
location.href = "/BG/ExpBudCtrlDept/ExpBudCtrlDeptDetailR?ExpBudProjectId=" + data.ExpBudProjectId + "&BudAmt1=" + data.BudAmt1 + "&type=2";
}
})
}
return options;
});
var obj = {
BLastYearData: { LRBudAmt: 0, LRExpAmt: 0 },
LastYearData: { LRBudAmt: 0, LRExpAmt: 0 },
LRBudAmt: 0,
LRExpAmt: 0,
BLLRBudAmt: 0,
BLLRExpAmt: 0,
LLRBudAmt: 0,
LLRExpAmt: 0,
FDAmt: 0,
AdvAmt1: 0,
UnderWayAmt: 0,
total: 0,
}
res.data.forEach(function (v) {
if (v.BLastYearData !== null) {
obj.BLLRBudAmt += v.BLastYearData.LRBudAmt;
obj.BLLRExpAmt += v.BLastYearData.LRExpAmt;
}
if (v.LastYearData !== null) {
obj.LLRBudAmt += v.LastYearData.LRBudAmt;
obj.LLRExpAmt += v.LastYearData.LRExpAmt;
}
obj.LRBudAmt += v.LRBudAmt;
obj.LRExpAmt += v.LRExpAmt;
obj.FDAmt += v.FDAmt;
obj.AdvAmt1 += v.AdvAmt1;
obj.UnderWayAmt += v.UnderWayAmt;
//obj.total += v.RecognizedAmt + v.UnRecognizedAmt + v.UnderWayAmt;
})
that.countline(obj)
$(".ele1").parent().css("height", $('[lay-id="detpBud"]').height())
}
});
table.on('sort(detpBud)', function (obj) {
format.init();
table.reload('detpBud', {
initSort: obj
});
table.reload('detpBud', {});
});
//工具条事件
table.on('tool(detpBud)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'projDetail') {
urp.openWindow({
href: "/PM/Project/SingleProjectShow?EncodeProjCode=" + data.EnCodeProjCode + "&readonly=true",
title: "查看项目",
})
}
});
},
第一部分需要添加id属性:
table.render({
elem: '#detpBud'
, id: 'detpBud'
, limit: 99999
, height: "full-105"
, totalRow: true
第二部分 添加table.reload()
table.on('sort(detpBud)', function (obj) {//detpBud指的是<table></table>的lay-filter属性值
format.init();
table.reload('detpBud', {
initSort: obj
});
table.reload('detpBud', {});//detpBud指的是table.render里面的id值
});