ASP.Net MVC с использованием Jquery Grid

Question

У меня есть Просмотр, который (упрощенная версия реального экрана) имеет несколько выпадающих элементов управления, позволяющих пользователю выбрать категорию, затем подкатегорию - введите сумму, а затем нажмите кнопку «Добавить».Затем кнопка «Добавить» добавляет новую строку в сетку JQuery ( введите здесь описание ссылки ).

Затем элементы управления сбрасываются и позволяют пользователю выбрать другую категорию, подкатегорию и сумму.и затем нажмите кнопку Добавить еще раз, добавив данные в сетку.

        $(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]);
        });
    });

Строки добавляются хорошо.(Мне нужно добавить скрытые столбцы для хранения идентификаторов).

Затем пользователь нажимает «Сохранить».Я хотел бы каким-то образом пройти через сетку, получить идентификаторы (которые будут добавлены) и каким-то образом вернуть их вместе с моделью обратно в контроллер MVC для хранения.

Можно ли это сделать?Или есть лучшая идея для того, что я пытаюсь сделать?

Answer 1

Вы должны определить свой colModel.Я бы определил функцию, которая получает массив данных и связывает его (data: 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();