jqGrid - как динамически загружать поле со списком на панели инструментов редактирования (ASP.NET MVC 2)

Question

Используя jqGrid, я пытаюсь понять, как динамически загружать поле со списком моей категории ниже.

В этой статье показано, как данные должны быть сформированы одним из трех способов. http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3Acommon_rules. Вариант № 1 или № 2 будет работать нормально, так как я не хочу загружать его каждый раз, когда нажимаю кнопку редактирования на сетке. Или у меня тоже?

Мой JavaScript:

$(document).ready(function () {
$('#grid').jqGrid({
    colNames: ['TypeId', 'Type', 'CR Active', 'Category'],
    colModel: [
        { name: 'TYPE_ID', index: 'TYPE_ID', hidden: true, search: false,
          editable: true, editoptions: { readonly: true, size: 10 },
          formoptions: { rowpos: 1, label: "Type Id", elmprefix: "(*)"} },
        { name: 'TYPE', index: 'TYPE', sortable: true, hidden: false,
          editable: true, editoptions: { size: 25, maxlength: 30 },
          formoptions: { rowpos: 2, label: "Type", elmprefix: "(*)" },
          editrules: { required: true} },
        { name: 'CR_ACTIVE', index: 'CR_ACTIVE', align: 'right', sortable: true,
          hidden: false, editable: true, edittype: "checkbox",
          editoptions: { size: 25, value: "Yes:No", defaultValue: "Yes" },
          formoptions: { rowpos: 3, elmprefix: "    "} },
        { name: 'description', index: 'description', editable: true,
          edittype: "select", editoptions: { value: { 1: 'One', 2: 'Two'} },
          formoptions: { rowpos: 4, elmprefix: "    "} }
    ],
    pager: jQuery('#pager'),
    sortname: 'TYPE',
    rowNum: 10,
    rowList: [10, 20, 50],
    sortorder: "asc",
    width: 600,
    height: 250,
    datatype: 'json',
    caption: 'Available Types',
    viewrecords: true,
    mtype: 'GET',
    jsonReader: {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: false,
        userdata: "userdata",
        id: "TYPE_ID"
    },
    url: "/Type/GetData"
    }).navGrid('#pager', { view: false, del: true, add: true, edit: true },
       { height:150, reloadAfterSubmit:false, jqModal:false, closeOnEscape:true,
        bottominfo: "Fields marked with (*) are required", closeAfterEdit: true,
        url: "/Type/Edit" }, // default settings for edit
       { height:150, reloadAfterSubmit:false, jqModal:false, closeOnEscape:true,
         bottominfo: "Fields marked with (*) are required", closeAfterAdd: true,
         url: "/Type/Create" }, // default settings for add
       { reloadAfterSubmit: false, jqModal: false, closeOnEscape: true,
         url: "/Type/Delete" }, // delete instead that del:false we need this
       { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true,
         afterSubmit: function (response, postdata) {
             alert("testing");
         } }, // search options
       { height: 150, jqModal: false, closeOnEscape: true} /* view parameters*/
     );

});

Мой контроллер должен вызываться как-то для загрузки категорий:

public JsonResult GetCategories()
{
    string test = "Will be a string contructed as needed";

    //have to return something if there is an issue
    return Json(test);
}

Как я понимаю, dataUrl = "GetCategories" из описаний colmodel editoptions будет в основном вызывать это действие json при каждом нажатии кнопки добавления / редактирования. Я надеюсь, что у кого-то есть пример того, как включить это так, чтобы это происходило только при загрузке страницы.

Заранее спасибо.

Answer 1

Посмотрите на "ОБНОВЛЕННУЮ" часть моего старого ответа . Мне кажется, что это описывает то, что вам нужно. Вы должны вернуть результаты JSON из действия GetCategories() и преобразовать входные данные JSON в соответствующий фрагмент <select> HTML внутри своей пользовательской функции buildSelect. Поскольку вы используете editoptions в форме editoptions: { value: { 1: 'One', 2: 'Two'} } вместо editoptions: { value: { One: 'One', Two: 'Two'} }, вам следует немного изменить код действия и функцию buildSelect из ответа .

Еще одно замечание. Поскольку вы используете опции столбца «Категория» в форме edittype: "select", editoptions: { value: { 1: 'One', 2: 'Two'} }, вы, вероятно, хотите использовать идентификаторы категории (1 и 2) в данных JSON и отобразить для пользователя значения «Один» и «Два». В случае, если вы должны добавить дополнительную опцию formatter:'select' (подробности см. В документации здесь ).