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

Customizing the Add/Edit Dialog in jqGrid

提问by GargantuanTezMaximus

Sorry I can't post images, I'm too new.

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

In jqGrid add/edit dialogs I would like to load a list of selectable items based on a selection made earlier. In the picture above, the value selection should be loaded based on the value chosen in the criteria selection. I believe the route to go is using the dataurl in the editoptions object but I am having issues in that regards. The first issue that was troubling was based on the documentation hereit doesn't seem like there is an event available to fire when the value of criteria changes that will allow me to update the values list.

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

Also I'm confused on how the data should be returned from the ajax request. In the documentation it says :

我也对如何从 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"

设置editoptions dataUrl 参数editoptions dataUrl 参数仅对edittype:select 元素有效。dataUrl 参数表示应该从中获取 html select 元素的 url。设置此选项后，元素将填充来自 AJAX 请求的值。数据应该是具有所需选项的有效 HTML 选择元素”

does this mean I will need to generate the html and return this as part of the response? Previously I had been passing all of my data using json.

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

回答by Oleg

jqGrid has no simple support of dependent selects in the editoptions. So to implement is one have to use changeevent on the main select to manually update the list of options of the second (dependent) select.

jqGrid 在editoptions. 因此，要实现的是必须change在主选择上使用事件来手动更新第二个（从属）选择的选项列表。

In the demoyou will find how you can implement dependent selects. I used in the demo 'local' datatype and so set valueproperty of the editoptionsinstead of dataUrl, but the main schema what should be done stay the same. Moreover in the demo I use not only form editing, but inline editing too. The code work in both cases. Because jqGrid don't support local editing in the form editing mode, the submitting of the forms not work. I could of cause use the tricks which I described here, but the code will be much longer and will contain many things which are far from your main question. So I decided to post the code in the form where submitting is not work.

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

Below you find the code from the demo:

您可以在下面找到演示中的代码：

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

UPDATED: See "UPDATED 2" part of the answerfor the most recent version on the demo.

更新：请参阅演示中最新版本的答案的“更新 2”部分。