Question

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

最重要的功能是：

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

这可能吗？

Answer 1

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

Answer 2

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

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

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

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

Answer 3

我认为这是可能的，但还没试过......

如果您使用ASP.NET MVC：您是否尝试以编程方式将Controller中的网格添加为ViewData？这是个主意。

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

希望有所帮助

Answer 4

jqGrid 3.6现在支持动态显示/隐藏列，并且在他们的3.6演示页面上有一个“Column Chooser”演示。这对你的需求是否足够好？

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

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

jqGrid与动态colModel？

6 个答案: