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

Posted jiangcm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了给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");
}
})
}
}
}
});
}
},

以上是关于给Grid动态添加列和添加样式的主要内容,如果未能解决你的问题,请参考以下文章

jquery动态添加样式

给div中动态添加节点并设置样式

jquery动态给子元素绑定事件,将元素内容添加到另一个元素中

WPF C# 如何在动态添加的grid控件中添加某个网格中的image控件的单击事件?

ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字

动态给listview的item添加样式?