jqGrid 与动态 colModel？答案

【问题标题】：jqGrid with dynamic colModel?jqGrid 与动态 colModel？
【发布时间】：2009-09-28 04:38:33
【问题描述】：

我必须创建一个类似于http://www.chartle.net/ 的数据表。

最重要的特点是：

可以动态添加/删除行（完成）
可以动态添加/删除列（我该怎么做？）
更改后的 colModel 可以保存在数据库中以进行特征修改..

这可能吗？

【问题讨论】：

我决定先在我的仪表板上创建纬度/经度地图组件，我将在下周尝试解决这个问题。感谢您的回答！

标签： jquery jqgrid

【解决方案1】：

在他们的文档中搜索 getColProp 和 setColProp：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

【讨论】：

jQuery(”#grid_id”).setColProp('colname',{editoptions:{value:“True:False”}});

【解决方案2】：

问题是，您不能动态更改 jQgrid ColModel。我看到的两个选项是：

使用 GridUnload 删除整个网格并使用新的 ColModel（如果它可以完全改变）重新加载它：

jQuery(选择器).GridUnload(选择器);
加载所有可能的行并显示/隐藏您需要的行，例如通过使用show hide columns plugin

为了动态保存它，在数据库中将网格的配置数据存储为 JSON 就足够了。

【讨论】：

【解决方案3】：

我觉得可以，但是没试过..

如果您使用 ASP.NET MVC：您是否尝试以编程方式将控制器中的网格添加为 ViewData？这是一个想法。

此链接可能会让您更进一步：http://arahuman.blogspot.com/2009/06/jqgrid-using-mvc-json-and-datatable.html

希望对你有帮助

【讨论】：

【解决方案4】：

jqGrid 3.6 现在支持动态显示/隐藏列，并且在他们的 3.6 演示页面上有一个“列选择器”演示。这足以满足您的需求吗？

【讨论】：

【解决方案5】：

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----------

【讨论】：

【解决方案6】：

 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);
            }
        }
    });
}

【讨论】：