extjs grid列数动态可变
var gridStore = new Ext.data.Store({
id: 'gridStore',
proxy: new Ext.data.HttpProxy({ url: 'http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetGridStore&year=' + year + "&month=" + month + "&TypeId=" + TypeId }),
reader: new Ext.data.JsonReader({
root: 'data'
})
});
var CmStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: 'http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetCMJson&TypeId=' + TypeId }),
reader: new Ext.data.JsonReader({
root: 'data'
})
});
CmStore.load({
callback: function() {
var cmArray = [];
var sm = new Ext.grid.CheckboxSelectionModel();
cmArray.push(new Ext.grid.RowNumberer());
cmArray.push(sm);
CmStore.each(function(r) {
var columns = null;
if (r.data.StrFiledName == "empId") {
columns = { header: r.data.StrName, width: 70, sortable: true, dataIndex: r.data.StrFiledName, renderer: function(data, cell, r, rowIndex, columnIndex, store) {
cell.attr = "style=background-color:#f3e2d7";
return GetSyncData("http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetName&empId=" + data);
}
}
}
else if (r.data.IsShow == true) {
columns = { header: r.data.StrName, width: 85, sortable: true, dataIndex: r.data.StrFiledName, renderer: function(data, cell, r, rowIndex, columnIndex, store) {
cell.attr = "style=background-color:#f3e2d7";
return (data == null ? "0" : data);
}
}
} else {
if (IsCheckOut == "1") {
columns = { header: r.data.StrName, width: 85, sortable: true, dataIndex: r.data.StrFiledName, renderer: function(data, cell, r, rowIndex, columnIndex, store) {
cell.attr = "style=background-color:#f3e2d7";
return (data == null ? "0" : data);
}
}
} else {
columns = { header: r.data.StrName, width: 70, sortable: true, dataIndex: r.data.StrFiledName,
editor: new Ext.form.NumberField({
style: 'text-align:left'
}), renderer: function(value) {
return "<font color=red><b>" + (value == null ? "0" : value) + "</b></font>";
}
}
}
}
cmArray.push(columns);
});
var cm = new Ext.grid.ColumnModel(cmArray);
var grid = new Ext.grid.EditorGridPanel({
id: 'grid',
store: gridStore,
sm: sm,
cm: cm,
clicksToEdit: 1,
title: year + "年" + month + "月" + "=>" + GetSyncData("http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetTypeName&TypeId=" + TypeId) + "=>工资表",
region: 'center',
loadMask: true,
stripeRows: true,
autoScroll: true,
border: false,
stateful: true,
trackMouseOver: true,
autoShow: true,
viewConfig: {
forceFit: false
},
listeners: {
"afteredit": function(e) {
var r = e.record; //得到当前行所有数据
var f = e.field; //得到修改列
var v = e.value; //得到修改列修改后值
if (v == "") {
grid.getStore().reload();
return
}
//通过ajax请求修改数据
Ext.Ajax.request({
url: "http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=UpdateMoney",
method: "POST",
params: {
FieldName: f,
UpdataValue: v,
Id: r.data.ID,
TypeID: TypeId
},
success: function(r) {
grid.getStore().reload();
},
failure: function() {
MessageBox("提示", "操作失败！", Ext.MessageBox.ERROR);
grid.getStore().reload();
}
});
}
}
});
CmStore 从另一个数据源(一列的表格, 存放各列名字, 可在后台创建个datatable, json输出去前台)读取列名
id: 'gridStore',
proxy: new Ext.data.HttpProxy({ url: 'http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetGridStore&year=' + year + "&month=" + month + "&TypeId=" + TypeId }),
reader: new Ext.data.JsonReader({
root: 'data'
})
});
var CmStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: 'http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetCMJson&TypeId=' + TypeId }),
reader: new Ext.data.JsonReader({
root: 'data'
})
});
CmStore.load({
callback: function() {
var cmArray = [];
var sm = new Ext.grid.CheckboxSelectionModel();
cmArray.push(new Ext.grid.RowNumberer());
cmArray.push(sm);
CmStore.each(function(r) {
var columns = null;
if (r.data.StrFiledName == "empId") {
columns = { header: r.data.StrName, width: 70, sortable: true, dataIndex: r.data.StrFiledName, renderer: function(data, cell, r, rowIndex, columnIndex, store) {
cell.attr = "style=background-color:#f3e2d7";
return GetSyncData("http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetName&empId=" + data);
}
}
}
else if (r.data.IsShow == true) {
columns = { header: r.data.StrName, width: 85, sortable: true, dataIndex: r.data.StrFiledName, renderer: function(data, cell, r, rowIndex, columnIndex, store) {
cell.attr = "style=background-color:#f3e2d7";
return (data == null ? "0" : data);
}
}
} else {
if (IsCheckOut == "1") {
columns = { header: r.data.StrName, width: 85, sortable: true, dataIndex: r.data.StrFiledName, renderer: function(data, cell, r, rowIndex, columnIndex, store) {
cell.attr = "style=background-color:#f3e2d7";
return (data == null ? "0" : data);
}
}
} else {
columns = { header: r.data.StrName, width: 70, sortable: true, dataIndex: r.data.StrFiledName,
editor: new Ext.form.NumberField({
style: 'text-align:left'
}), renderer: function(value) {
return "<font color=red><b>" + (value == null ? "0" : value) + "</b></font>";
}
}
}
}
cmArray.push(columns);
});
var cm = new Ext.grid.ColumnModel(cmArray);
var grid = new Ext.grid.EditorGridPanel({
id: 'grid',
store: gridStore,
sm: sm,
cm: cm,
clicksToEdit: 1,
title: year + "年" + month + "月" + "=>" + GetSyncData("http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetTypeName&TypeId=" + TypeId) + "=>工资表",
region: 'center',
loadMask: true,
stripeRows: true,
autoScroll: true,
border: false,
stateful: true,
trackMouseOver: true,
autoShow: true,
viewConfig: {
forceFit: false
},
listeners: {
"afteredit": function(e) {
var r = e.record; //得到当前行所有数据
var f = e.field; //得到修改列
var v = e.value; //得到修改列修改后值
if (v == "") {
grid.getStore().reload();
return
}
//通过ajax请求修改数据
Ext.Ajax.request({
url: "http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=UpdateMoney",
method: "POST",
params: {
FieldName: f,
UpdataValue: v,
Id: r.data.ID,
TypeID: TypeId
},
success: function(r) {
grid.getStore().reload();
},
failure: function() {
MessageBox("提示", "操作失败！", Ext.MessageBox.ERROR);
grid.getStore().reload();
}
});
}
}
});
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义