javascript - 在 jqGrid 中自定义添加/编辑对话框

Question

抱歉我不能发布图片，我太新了。

在 jqGrid 添加/编辑对话框中，我想根据之前所做的选择加载可选项目列表。在上图中，应根据标准选择中选择的值加载值选择。我相信要走的路线是在 editoptions 对象中使用 dataurl，但我在这方面遇到了问题。第一个麻烦的问题是基于文档 here当条件值更改时，似乎没有可触发的事件允许我更新值列表。

此外，我对如何从 ajax 请求返回数据感到困惑。在文档中它说:

Setting the editoptions dataUrl parameter The editoptions dataUrl parameter is valid only for element of edittype:select. The dataUrl parameter represent the url from where the html select element should be get. When this option is set, the element will be filled with values from the AJAX request. The data should be a valid HTML select element with the desired options"

这是否意味着我需要生成 html 并将其作为响应的一部分返回？以前我一直使用 json 传递我的所有数据。

Answer 1

jqGrid 在 editoptions 中没有对依赖选择的简单支持。因此，要实现这一点，必须在主选择上使用 change 事件来手动更新第二个(从属)选择的选项列表。

在the demo您会发现如何实现依赖选择。我在演示中使用了“本地”数据类型，因此设置了 editoptions 的 value 属性而不是 dataUrl，但是主模式应该做什么保持原样。此外，在演示中，我不仅使用表单编辑，还使用内联编辑。代码在这两种情况下都有效。因为jqGrid不支持表单编辑方式下的本地编辑，所以表单的提交是不行的。我当然可以使用我描述的技巧 here ，但代码会更长，并且包含许多与您的主要问题相去甚远的内容。所以我决定在提交不起作用的表单中发布代码。

下面是演示代码:

var countries = { '1': 'US', '2': 'UK' },
    states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' },
    statesOfUS = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' },
    statesOfUK = { '5': 'London', '6': 'Oxford' },
    // the next maps contries by ids to states
    statesOfCountry = { '1': statesOfUS, '2': statesOfUK },
    mydata = [
        { id: '0', Country: '1', State: '1', Name: "Louise Fletcher" },
        { id: '1', Country: '1', State: '3', Name: "Jim Morrison" },
        { id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" },
        { id: '3', Country: '2', State: '6', Name: "Oscar Wilde" }
    ],
    lastSel = -1,
    grid = $("#list"),
    resetStatesValues = function () {
        // set 'value' property of the editoptions to initial state
        grid.jqGrid('setColProp', 'State', { editoptions: { value: states} });
    };

grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name: 'Name', width: 200 },
        {
            name: 'Country',
            width: 100,
            editable: true,
            formatter: 'select',
            edittype: 'select',
            editoptions: {
                value: countries,
                dataInit: function (elem) {
                    var v = $(elem).val();
                    // to have short list of options which corresponds to the country
                    // from the row we have to change temporary the column property
                    grid.jqGrid('setColProp', 'State', { editoptions: { value: statesOfCountry[v]} });
                },
                dataEvents: [
                    {
                        type: 'change',
                        fn: function (e) {
                            // build 'State' options based on the selected 'Country' value
                            var v = $(e.target).val(),
                                sc = statesOfCountry[v],
                                newOptions = '',
                                stateId,
                                form,
                                row;
                            for (stateId in sc) {
                                if (sc.hasOwnProperty(stateId)) {
                                    newOptions += '<option role="option" value="' + stateId + '">' +
                                        states[stateId] + '</option>';
                                }
                            }

                            resetStatesValues();

                            // populate the subset of contries
                            if ($(e.target).is('.FormElement')) {
                                // form editing
                                form = $(e.target).closest('form.FormGrid');
                                $("select#State.FormElement", form[0]).html(newOptions);
                            } else {
                                // inline editing
                                row = $(e.target).closest('tr.jqgrow');
                                $("select#" + $.jgrid.jqID(row.attr('id')) + "_State", row[0]).html(newOptions);
                            }
                        }
                    }
                ]
            }
        },
        {
            name: 'State',
            width: 100,
            editable: true,
            formatter: 'select',
            edittype: 'select',
            editoptions: { value: states }
        }
    ],
    onSelectRow: function (id) {
        if (id && id !== lastSel) {
            if (lastSel !== -1) {
                resetStatesValues();
                grid.jqGrid('restoreRow', lastSel);
            }
            lastSel = id;
        }
    },
    ondblClickRow: function (id) {
        if (id && id !== lastSel) {
            grid.jqGrid('restoreRow', lastSel);
            lastSel = id;
        }
        resetStatesValues();
        grid.jqGrid('editRow', id, true, null, null, 'clientArray', null,
            function () {  // aftersavefunc
                resetStatesValues();
            });
        return;
    },
    editurl: 'clientArray',
    sortname: 'Name',
    ignoreCase: true,
    height: '100%',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    pager: '#pager',
    caption: "Demonstrate dependend select/dropdown lists (edit on double-click)"
}).jqGrid('navGrid', '#pager', { edit: true, add: true, del: false, search: false, refresh: true },
    { // edit options
        recreateForm: true,
        viewPagerButtons: false,
        onClose: function () {
            resetStatesValues();
        }
    },
    { // add options
        recreateForm: true,
        viewPagerButtons: false,
        onClose: function () {
            resetStatesValues();
        }
    });

已更新:参见 the answer 的“已更新 2”部分有关演示的最新版本。