FineuiPro 加载动态列Grid

Posted 2023-04-27

参考技术A 由于grid控件动态创建列只能在page_init事件里，不能直接用ajax方式，所以页面不刷新的话效果是出不来的。
（为什么一定要在page_init创建列，具体请看官网： http://pro.fineui.com/#/grid/grid_dynamic_columns.aspx ）

如果想实现button点击事件，动态创建grid列的效果(也就是ajax效果)，可以使用iframe的方式(如果是老司机就知道iframe可以实现类似的ajax效果折中方案)。

在fineuiPro 里有哪些控件能支持iframe？panel ，tab等容器控件，具体可以查询控件的api。总的来说，就是利用button点击事件刷新iframe的url，iframe子页刷新显示grid控件。

给Grid动态添加列和添加样式

BudgetProjectSearch: function () {
$("#load").show();
var that = this;
var postmodel = {};
postmodel.year = that.YearStr;
postmodel.month = that.monthvalue;
//获取所有选中的节点
var nodes = $("#tree").data("kendoTreeView").dataSource.view();
var checkedNodes = [];
checkedNodeIds(nodes, checkedNodes);
postmodel.OrgData = checkedNodes;
postmodel.selectedExpenseItemIdStr = that.selectedExpenseItemIdStr;
if (postmodel.OrgData.length == 0) {
$("#load").hide();
messageBox.show({ message: "请选择部门" }, "info");
}
else if (postmodel.selectedExpenseItemIdStr.length == 0) {
$("#load").hide();
messageBox.show({ message: "请选择费用项目" }, "info");
}
else if (postmodel.year == null || postmodel.year == "") {
$("#load").hide();
messageBox.show({ message: "请选择年份" }, "info");
}
else if (postmodel.month == null || postmodel.month == "") {
$("#load").hide();
messageBox.show({ message: "请选择月份" }, "info");
}
else {
$.post("/Reports/CompanyReport/GetBudgetActualAchievementList", postmodel, function (r) {
$("#load").hide();
if (r.status == 202) {
messageBox.show({ message: r.msg }, "info");
}
else {
//根据费用项目初始化filed
var columns = [];
columns.push({
field: "EmployeeName",
title: "名称",
width: 400
});
columns.push({
field: "AllTotolBuget",
title: "全年合计预算",
attributes: { class: ‘center‘ },
width: 150
});
for (var i = 1; i <= postmodel.month; i++) {
if (i == 1) {
columns.push({
field: "Actual01",
title: "1月",
attributes: { class: ‘center‘ },
width: 100
});
}
if (i == 2) {
columns.push({
field: "Actual02",
title: "2月",
attributes: { class: ‘center‘ },
width: 100
});
}
if (i == 3) {
columns.push({
field: "Actual03",
title: "3月",
attributes: { class: ‘center‘ },
width: 100
});
}
if (i == 4) {
columns.push({
field: "Actual04",
title: "4月",
attributes: { class: ‘center‘ },
width: 100
});
}
if (i == 5) {
columns.push({
field: "Actual05",
title: "5月",
attributes: { class: ‘center‘ },
width: 100
});
}
if (i == 6) {
columns.push({
field: "Actual06",
title: "6月",
attributes: { class: ‘center‘ },
width: 100
});
}
if (i == 7) {
columns.push({
field: "Actual07",
title: "7月",
attributes: { class: ‘center‘ },
width: 100
});
}
if (i == 8) {
columns.push({
field: "Actual08",
title: "8月",
attributes: { class: ‘center‘ },
width: 100
});
}
if (i == 9) {
columns.push({
field: "Actual09",
title: "9月",
attributes: { class: ‘center‘ },
width: 100
});
} if (i == 10) {
columns.push({
field: "Actual10",
title: "10月",
attributes: { class: ‘center‘ },
width: 100
});
}
if (i == 11) {
columns.push({
field: "Actual11",
title: "11月",
attributes: { class: ‘center‘ },
width: 100
});
}
if (i == 12) {
columns.push({
field: "Actual12",
title: "12月",
attributes: { class: ‘center‘ },
width: 100
});
}

}
columns.push({
field: "ActualTotol",
title: "报销合计",
attributes: { class: ‘center‘ },
width: 100
});
columns.push({
field: "BugetTotol",
title: "实际发生月预算合计",
attributes: { class: ‘center‘ },
width: 200
});
columns.push({
field: "difference",
title: "差异",
attributes: { class: ‘center‘ },
width: 100
});
columns.push({
field: "AllSurplusBuget",
title: "全年剩余预算",
attributes: { class: ‘center‘ },
width: 150
});
var grid = $("#grid").data("kendoGrid");
grid.setOptions({
columns: columns
});
var dataSource = new kendo.data.DataSource({
data: JSON.parse(r.data),
//pageSize: 15,
});
grid.setDataSource(dataSource);
grid.dataSource.page(1);

debugger
if (grid.dataSource != null) {
if (grid.dataSource.data().length > 0) {
_.each(grid.dataSource.data(), function (data) {
if (data.IsOrgTotol == "1") {
$("[data-uid=‘" + data.uid + "‘]").css("background-color", "#FFC0CB");
}
if (data.IsOrgTotol == "2") {
$("[data-uid=‘" + data.uid + "‘]").css("background-color", "#F58220");
}
})
}
}
}
});
}
},