发布到服务器或页面刷新后未加载 jqgrid 下拉列表

Question

我是 JQGrid 的新手，经过大量研究后，我post正在回答这个问题。

我正在通过 dataurl 将下拉列表填充到 jqgrid 中，并使用 buildselect 函数构建了 html。

第一次尝试添加新行时，它运行得非常好，并且创建了下拉列表并填充了选项。

但是在填充网格行并单击保存后，我将数据 post 发送到 MVC 操作方法 (PostTestData) 并将 posted 值保存在会话变量中。当我检查 posted 数据时，我可以看到 selected 值是字符串数据类型。

我正在从 PostTestData 重定向到另一个操作方法 GetTestData，它将把保存的数据加载回网格，这会正确加载所有文本值，但下拉列表显示为一个空单元格，而不是预先selecting selected 值。

内置的 select 函数此时未被调用，仅在我单击空单元格并创建新的下拉列表后才会被调用。我正在努力如何在 post 和网格重新加载后取回下拉菜单。

我在下面粘贴我的实际代码

$(function () {

var myGrid = $('#workOrderDetailGrid');
myGrid.jqGrid({
    url: '/CustomerWorkOrders/WorkOrder/GetTestData',
    datatype: "json",
    contentType: "application/json; charset-utf-8",
    mtype: 'GET',
    colNames: ['Brand', 'Product Type', 'Received Model', 'Shipped Model', 'Serial number', 'Product Version', 'Quantity', 'Customer Complaint'],
    jsonReader: { repeatitems: false, id: "Product Type" },
    colModel: [
        {
            name: 'BrandList', width: 200, editable: true, edittype: "select", formatter: 'select',
            editoptions:
                {
                    dataUrl: "/CustomerWorkOrders/WorkOrder/GetBrandDropdown",
                    datatype: "json",
                    async: false,
                    buildSelect: function (data) {
                        var response = jQuery.parseJSON(data);

                        var s = '<select>';
                        s += '<option value="0">---Select Brand---</option>';

                        $.each(response, function () {
                            s += '<option value="' + this.Id + '">' + this.Value + '</option>';
                        });

                        return s + "</select>";
                    }
                }
        },
        { name: 'ProductType', key: true, width: 200, editable: true },
        { name: 'ReceivedModel', key: true, width: 75, editable: true },
        { name: 'ShippedModel', key: true, width: 200, editable: true },
        { name: 'Serialnumber', key: true, width: 100, editable: true },
        { name: 'ProductVersion', width: 200, editable: true },
        { name: 'Quantity', key: true, width: 100, editable: true },
        { name: 'CustomerComplaint', key: true, width: 100, editable: true }
    ],
    rowNum: 5,
    loadonce: true,
    pager: '#workOrderDetailPager',
    cellEdit: true,
    gridview: true,
    rownumbers: true,
    viewrecords: true,
    pagerpos: 'center',
    caption: "Workorder subtypes",
    editable: true,
    ajaxRowOptions: { contentType: 'application/json; charset=utf-8' },
    ajaxSelectOptions: { cache: false },
    serializeRowData: function (postData) {
        return JSON.stringify(postData);
    },
    editurl: '/CustomerWorkOrders/WorkOrder/PostTestData'
});

myGrid.jqGrid('navGrid', '#workOrderDetailPager',
    {
        edit: false,
        add: false,
        del: false,
        search: false
    });


myGrid.jqGrid('inlineNav', '#workOrderDetailPager',
    {
        edit: true,
        editicon: "ui-icon-pencil",
        add: true,
        addicon: "ui-icon-plus",
        save: true,
        saveicon: "ui-icon-disk",
        cancel: true,
        cancelicon: "ui-icon-cancel",

        editParams: {
            keys: false,
            oneditfunc: null,
            successfunc: function (val) {
                if (val.responseText != "") {
                    alert(val.responseText);
                    $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
                }
            },
            url: '/CustomerWorkOrders/WorkOrder/PostTestData',
            aftersavefunc: null,
            errorfunc: null,
            afterrestorefunc: null,
            restoreAfterError: true,
            mtype: "POST"
        },
        addParams: {
            useDefValues: true,
            addRowParams: {
                keys: true,
                extraparam: {},
                beforeSaveRow: function () { alert(); },
                saveRow: function (response, postdata) {
                    alert();
                },
                successfunc: function (val) {
                    if (val.responseText != "") {
                        alert(val.responseText);
                        $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
                    }
                }
            }
        }
    }
);

});

现在 posttestdata 和 gettestdata

的控制器操作方法

    [HttpPost]
    public ActionResult PostTestData(WorkOrderSubDetailsVm workOrderSub)
    {
        if (Session["WorkOrderSubTypeList"] == null)
        {
            Session["WorkOrderSubTypeList"] = new List<WorkOrderSubDetailsVm>();
        }

        var list = (List<WorkOrderSubDetailsVm>)Session["WorkOrderSubTypeList"];
        list.Add(workOrderSub);

        return RedirectToAction("GetTestData", new { sidx = "", sord = "asc", page = 1, rows = 5 });
    }


      [OutputCache(Duration = 300)]
    public ActionResult GetTestData(string sidx, string sord, int page, int rows)
    {
        List<WorkOrderSubDetailsVm> workOrderSubDetailsList = null;
        if (Session["WorkOrderSubTypeList"] != null)
        {
            workOrderSubDetailsList = (List<WorkOrderSubDetailsVm>)Session["WorkOrderSubTypeList"];
        }

        int pageSize = rows;
        int totalRecords = workOrderSubDetailsList?.Count ?? 4;
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

        var jsonData = new
        {
            total = totalPages,
            page = page,
            records = totalRecords,
            rows = workOrderSubDetailsList
        };

        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

最后是通过 dataurl 填充下拉列表的代码

        public ActionResult GetBrandDropdown()
    {
        var newList = GetBrands();

        return Json(newList, JsonRequestBehavior.AllowGet);
    }

    private List<Brand> GetBrands()
    {
        var newList = new List<Brand>()
        {
            new Brand() {Id = "LG", Value = "LG"},
            new Brand() {Id = "Segway", Value = "Segway"},
            new Brand() {Id = "Lotus", Value = "Lotus"}
        };
        return newList;
    }

任何帮助将不胜感激，因为我真的被困住了。谢谢

Answer 1

我通过删除格式化程序解决了这个问题：'select' 在该特定列的 colModel 中，当网格刷新时它显示了正确的值。

发布到服务器或页面刷新后未加载 jqgrid 下拉列表

jqgrid dropdown list not loaded after posting to server or page refresh

jquery

jqgrid