自定义jqGrid中的“添加/编辑”对话框 [英] Customizing the Add/Edit Dialog in jqGrid

问题描述

抱歉我无法发布图片，我太新了。

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

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

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 here it 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.

此外，我对如何应该从ajax请求返回数据。在文档中它说：

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

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

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传递了所有数据。

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.

推荐答案

jqGrid没有简单的依赖支持在 editoptions 中选择。所以实现是必须在主要选择上使用更改事件来手动更新列表第二个（从属）选择的选项。

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

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

In the demo you will find how you can implement dependent selects. I used in the demo 'local' datatype and so set value property of the editoptions instead 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.

下面你会看到演示代码：

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 answer for the most recent version on the demo.

这篇关于自定义jqGrid中的“添加/编辑”对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！