jQuery jqGrid 与动态 colModel？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1485436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid with dynamic colModel?
提问by Wildan Maulana
I have to create a data table simmiliar to the http://www.chartle.net/have.
我必须创建一个类似于http://www.chartle.net/的数据表。
The most importang feature is :
最重要的功能是：
- Row can be added/remove dynamically (done)
- Column can be added/remove dynamically (how can i do this ?)
- The changed colModel can be saved in database for feature modification ..
- 可以动态添加/删除行（完成）
- 可以动态添加/删除列（我该怎么做？）
- 更改后的 colModel 可以保存在数据库中以进行特征修改..
Is this possible ?
这可能吗 ？
回答by Andrew DeLisa
Search getColPropand setColPropin their docs: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
搜索getColProp并setColProp在他们的文档中：http: //www.trirand.com/jqgridwiki/doku.php?id=wiki: methods
回答by Daff
The problem is, that you can't dynamically change the jQgrid ColModel. The two options I see are:
问题是，您不能动态更改 jQgrid ColModel。我看到的两个选项是：
Delete the whole grid and reload it with a new ColModel (if it can change entirely) using GridUnload:
jQuery(selector).GridUnload(selector);
Load all possible rows and show/hide the ones you need, e.g. by using the show hide columns plugin
删除整个网格并使用 GridUnload 使用新的 ColModel 重新加载它（如果它可以完全更改）：
jQuery(选择器).GridUnload(选择器);
加载所有可能的行并显示/隐藏您需要的行，例如使用show hide columns 插件
For saving it dynamically it should be sufficient to store the configuration data for the grid in the database as JSON.
为了动态保存它，将网格的配置数据作为 JSON 存储在数据库中就足够了。
回答by solkim
I think it is possible, but haven't tried..
我觉得有可能，不过没试过。。
If you use ASP.NET MVC: Have you tried to programmatically add the grid from the Controller as ViewData? It's an idea.
如果您使用 ASP.NET MVC：您是否尝试以编程方式将控制器中的网格添加为 ViewData？这是一个想法。
This link may get you further : http://arahuman.blogspot.com/2009/06/jqgrid-using-mvc-json-and-datatable.html
这个链接可能会让你走得更远：http: //arahuman.blogspot.com/2009/06/jqgrid-using-mvc-json-and-datatable.html
Hope it helps
希望能帮助到你
回答by Justin Ethier
jqGrid 3.6 now supports dynamically showing / hiding columns, and there is a "Column Chooser" demo on their 3.6 demo page. Is this good enough for your needs?
jqGrid 3.6 现在支持动态显示/隐藏列，并且在他们的 3.6 演示页面上有一个“列选择器”演示。这是否足以满足您的需求？
回答by suneelsarraf
function objedit(id, cellname, value)
{
var flag = 0;
for (var i = 0; i < index; i++) {
if (obj[i][0] == id && obj[i][1] == cellname) {
obj[i] = [id, cellname, value]
flag++;
}
}
if (flag == 0) {
obj[index] = [id, cellname, value];
index++;
}
}
function columnsData(Data)
{
var formater = "";
var str = "[";
for (var i = 0; i < Data.length; i++) {
if (Data[i] == "Id")
str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', hidden: true,}";
else
str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', editable: true}";
if (i != Data.length - 1) {
str = str + ",";
}
}
str = str + "]";
return str;
}
//------end grid part----------
回答by suneelsarraf
bindJqGrid("SetPayInvoice", feeID, datasetID, 1);
function bindJqGrid(actionController, feeID, datasetID, step)
{
agreementID = $("#agreementID").val();
mappingTemplateID = $("#mappingTemplateID").val();
invoiceID = $("#invoiceID").val();
var action = '/PayInvoice/' + actionController + '?agreementID=' + agreementID + '&mappingTemplateID=' + mappingTemplateID + '&invoiceID=' + invoiceID + '&feeID=' + feeID + '&datasetID=' + datasetID;
var caption = "Invoice Exception";
$("#headerText").html(caption);
JQGrid(caption, action);
}
function JQGrid(caption, action)
{ $("#tblGrid").jqGrid('GridUnload');
$.ajax({
url: action,
dataType: "json",
mtype: 'POST',
success: function (result) {
if (result) {
if (!result.Error && result != "" && result != undefined) {
$("#TotalData").html(result.records);
$("#divWorkflowWrapper").show();
$("#dvFooter").show();
var colData = "";
colData = columnsData(result.column);
colData = eval('{' + colData + '}');
$("#tblGrid").jqGrid({
url: action,
datatype: 'json',
mtype: 'GET',
colNames: result.column,
colModel: colData,
autowidth: true,
height: 550,
rowNum: 25,
rowList: [25, 50, 75, 100],
loadtext: "Loading...",
pager: '#tblGridpager',
viewrecords: true,
gridview: true,
altRows: true,
cellEdit: true,
cellsubmit: "remote",
cellurl: '/PayInvoice/GridSavecell',
beforeSelectRow: function (rowid) { return false; },
ondblClickRow: function (rowid, iRow, iCol) {
jQuery("#tblGrid").editCell(iRow, iCol, true);
},
afterEditCell: function () {
e = jQuery.Event("keydown");
e.keyCode = $.ui.keyCode.ENTER;
edit = $(".edit-cell > *");
edit.blur(function () {
edit.trigger(e);
});
},
beforeSubmitCell: function (id, cellname, value, iRow, iCol) {
objedit(id, cellname, value);
return { id: id, cellname: cellname, value: value, iRow: iRow, iCol: iCol };
},
afterSaveCell: function (id, cellname, value, iRow, iCol) {
objedit(id, cellname, value);
return { id: id, cellname: cellname, value: value, iRow: iRow, iCol: iCol };
},
caption: caption
});
}
}
else {
$("#divWorkflowWrapper").hide();
$("#dvFooter").hide();
}
},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr && thrownError) {
alert('Status: ' + xhr.status + ' Error: ' + thrownError);
}
}
});
}
