jqGrid with dynamic colModel?

问题:

I have to create a data table simmiliar to the http://www.chartle.net/ have.

The most importang feature is :

1. Row can be added/remove dynamically (done)
2. Column can be added/remove dynamically (how can i do this ?)
3. The changed colModel can be saved in database for feature modification ..

Is this possible ?

回答1:

Search getColProp and setColProp in their docs: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

回答2:

The problem is, that you can't dynamically change the jQgrid ColModel. The two options I see are:

1. Delete the whole grid and reload it with a new ColModel (if it can change entirely) using GridUnload:

   jQuery(selector).GridUnload(selector);

2. Load all possible rows and show/hide the ones you need, e.g. by using the show hide columns plugin

For saving it dynamically it should be sufficient to store the configuration data for the grid in the database as JSON.

回答3:

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.

This link may get you further : http://arahuman.blogspot.com/2009/06/jqgrid-using-mvc-json-and-datatable.html

Hope it helps

回答4:

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?

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