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

据我了解，colmodel 描述编辑选项的 dataUrl="GetCategories" 基本上会在每次按下添加/编辑按钮时调用此 json 操作。我希望有人有一个如何合并它的例子，以便它只在页面加载时发生。

提前致谢。

Answer 1

查看my old answer 的“更新”部分。在我看来，它描述了你需要什么。您应该从操作 GetCategories() 返回 JSON 结果，并将 JSON 输入转换为自定义 buildSelect 函数中相应的 <select> HTML 片段。因为您在editoptions: { value: { 1: 'One', 2: 'Two'} } 的形式中使用editoptions 而不是editoptions: { value: { One: 'One', Two: 'Two'} }，所以您应该稍微修改一下动作代码和buildSelect 函数来自the answer。

再说一句。因为您使用edittype: "select", editoptions: { value: { 1: 'One', 2: 'Two'} } 形式的“类别”列选项，所以您可能希望在 JSON 数据中使用类别 ID（1 和 2）并向用户显示值“一”和“二”。在这种情况下，您应该添加额外的选项formatter:'select'（详见文档here）。