使用 Jquery Grid 的 ASP.Net MVC

Question

我有 View （真实屏幕的简化版本）有几个下拉控件允许用户选择一个类别，然后是一个子类别 - 输入一个金额，然后单击“添加”按钮。然后“添加”按钮将新行添加到 JQuery 网格 (enter link description here)。

然后，控件重置，并允许用户选择另一个类别、子类别和数量，然后再次单击添加，将数据添加到网格中。

        $(function () {
        $('#addSplit').click(function () {
            var mydata = [
                            { category: $('#SelectedCategoryId option:selected').text(), subcategory: $('#SelectedSubCategoryId option:selected').text(), costcenter: $('#SelectedCostCenterId option:selected').text(), budget: $('#SelectedBudgetId option:selected').text(), amount: $('#amount').val() }
                         ];

            for (var i = 0; i <= mydata.length; i++)
                jQuery("#list4").jqGrid('addRowData', i + 1, mydata[i]);
        });
    });

行添加得很好。 （我需要添加隐藏列来以某种方式存储 ID）。

然后，用户将单击“保存”。我想以某种方式遍历网格，获取（要添加的）ID，并以某种方式将其与模型一起返回，返回到我的 MVC 控制器进行存储。

这可以吗？或者对于我正在尝试做的事情有更好的主意吗？

Answer 1

您必须定义您的 colModel。 我会定义一个函数，它接收数据数组并将其绑定（数据：DataToLoad）

function LoadGrid(DataToLoad)       {
    jQuery("#list4").jqGrid({
        data: DataToLoad,
        datatype: "local",
        width: 790,
            height: 250,
        rowNum: 999999,
        colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
        colModel:[
            {name:'id',index:'id', hidden:true, sorttype:"int"},
            {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
            {name:'name',index:'name', width:100},
            {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"},
            {name:'tax',index:'tax', width:80, editable: true, align:"right",sorttype:"float"},     
            {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
            {name:'note',index:'note', width:150, sortable:false}       
        ],
        emptyrecords: "No records to view",
        cellEdit: true,
        cellsubmit: 'clientArray',
        viewrecords: true,
        shrinkToFit: false,
        scroll: false,
        rownumbers: true,
        hidegrid: false,
        pager: "#plist47",
        caption: "Manipulating Array Data"
    });
}

如您所见，第一列是隐藏的：true

然后您可以在加载数组的情况下调用您的函数，而不是将行添加到网格中：

$("#addSplit").bind('click', function(){
    jQuery("#list4").GridUnload();
    // LOAD the ARRAY here.
    LoadGrid(mydata);
});

记得卸载网格jQuery("#list4").GridUnload();