Jqgrid级联下拉菜单

Question

使用jqgrid免费最新版本4.15.2 我正在尝试从 db 进行级联下拉。

我尝试了@Oleg 发布的示例 jqgrid incorrect select drop down option values in edit box

但这适用于旧版本的 jqgrid，并且在使用最新版本的 jqgrid 时不能完全工作。

var countries = { "UsId": "US", "UkId": "UK" },
            statesOfUS = { "AlabamaId": "Alabama", "CaliforniaId": "California", "FloridaId": "Florida", "HawaiiId": "Hawaii" },
            statesOfUK = { "LondonId": "London", "OxfordId": "Oxford" },
            states = $.extend({}, statesOfUS, statesOfUK),
            allCountries = $.extend({"": "All"}, countries),
            allStates = $.extend({"": "All"}, states),
            // the next maps provide the states by ids to the contries
            statesOfCountry = {
                "": states,
                "UsId": statesOfUS,
                "UkId": statesOfUK
            },

整个代码可以在下面的小提琴中看到

https://jsfiddle.net/svnL4Lsv/

问题是在添加表单期间，第二个下拉列表显示所有州，而不是按国家/地区显示 其次，在编辑期间，第二个下拉列表再次显示所有状态，而不是按行值

只有当我更改第一个下拉菜单时，第二个下拉菜单才会过滤并起作用。

---------更新

  editoptions: {
       // value: countries,
       dataInit: dataInitApp,
       dataEvents: dataEventsApp,
       dataUrl: '@Url.Action("GetData", "Home")',
       }

控制器代码：

 public enum Countries
 {
    USA = 1,
    UK  = 2               
 }

  public enum State
  {
    Alabama  = 1,           
    Florida  = 2
    London = 3
  }

  public JsonResult GetData()
  {
    var type = typeof(Helpers.UsersEnum.Countries);
    var jsonData = Enum.GetNames(type)
            .Select(name => new
            {
                Id = (int)Enum.Parse(type, name),
                Name = name
            })
                .ToArray();

             return Json(jsonData);
         }

我调用上面的内容来填充我的下拉列表。 下面还有返回的 json：

[0]: {Id=1, Name="USA"}
[1]: {Id=2, Name="UK"}


[0]: {Id=1, Name="Alabama  "}
[1]: {Id=2, Name="Florida"}
[2]: {Id=3, Name="London"}

Answer 1

如果使用免费的 jqGrid，您可以使用一些简化的代码

$(function () {
    "use strict";
    var countries = "usId:US;ukId:UK",
        allStates = "alabamaId:Alabama;californiaId:California;floridaId:Florida;hawaiiId:Hawaii;londonId:London;oxfordId:Oxford",
        // the next maps provide the states by ids to the countries
        statesOfCountry = {
            "": allStates,
            usId: "alabamaId:Alabama;californiaId:California;floridaId:Florida;hawaiiId:Hawaii",
            ukId: "londonId:London;oxfordId:Oxford"
        },
        mydata = [
            { id: "10", country: "usId", state: "alabamaId", name: "Louise Fletcher" },
            { id: "20", country: "usId", state: "floridaId", name: "Jim Morrison" },
            { id: "30", country: "ukId", state: "londonId",  name: "Sherlock Holmes" },
            { id: "40", country: "ukId", state: "oxfordId",  name: "Oscar Wilde" }
        ],
        $grid = $("#list"),
        changeStateSelect = function (countryId, countryElem) {
            // build "state" options based on the selected "country" value
            var $select, selectedValues,
                $countryElem = $(countryElem),
                isInSearchToolbar = $countryElem.parent().parent().parent().parent().hasClass("ui-search-table");

            // populate the subset of countries
            if (isInSearchToolbar) {
                // searching toolbar
                $select = $countryElem.closest("tr.ui-search-toolbar")
                        .find(">th.ui-th-column select#gs_list_state");
            } else if ($countryElem.is(".FormElement")) {
                // form editing
                $select = $countryElem.closest("form.FormGrid")
                        .find("select#state.FormElement");
            } else {
                // inline editing
                $select = $("select#" + $.jgrid.jqID($countryElem.closest("tr.jqgrow").attr("id")) + "_state");
            }

            if ($select.length > 0) {
                selectedValues = $select.val();
                if (isInSearchToolbar) {
                    $select.html("<option value=\"\">All</option>");
                } else {
                    $select.empty();
                }
                $.jgrid.fillSelectOptions($select[0], statesOfCountry[countryId], ":", ";", false, selectedValues);
            }
        },
        dataInitCountry = function (elem) {
            setTimeout(function () {
                $(elem).change();
            }, 0);
        },
        dataEventsCountry = [
            { type: "change", fn: function (e) { changeStateSelect($(e.target).val(), e.target); } },
            { type: "keyup", fn: function (e) { $(e.target).trigger("change"); } }
        ],
        cancelInlineEditingOfOtherRows = function (rowid) {
            var $self = $(this), savedRows = $self.jqGrid("getGridParam", "savedRow");
            if (savedRows.length > 0 && rowid !== savedRows[0].id) {
                $self.jqGrid("restoreRow", savedRows[0].id);
            }
        };

    $grid.jqGrid({
        data: mydata,
        datatype: "local",
        colNames: [ "Name", "Country", "State" ],
        colModel: [
            { name: "name", width: 180 },
            { name: "country", formatter: "select", stype: "select", edittype: "select",
                searchoptions: {
                    noFilterText: "Any",
                    dataInit: dataInitCountry,
                    dataEvents: dataEventsCountry
                },
                editoptions: {
                    value: countries,
                    dataInit: dataInitCountry,
                    dataEvents: dataEventsCountry
                }},
            { name: "state", formatter: "select", stype: "select", edittype: "select",
                editoptions: { value: allStates }, searchoptions: { noFilterText: "Any" } }
        ],
        cmTemplate: { width: 100, editable: true },
        onSelectRow: cancelInlineEditingOfOtherRows,
        ondblClickRow: function (rowid) {
            cancelInlineEditingOfOtherRows.call(this, rowid);
            $(this).jqGrid("editRow", rowid);
        },
        inlineEditing: {
            keys: true
        },
        formEditing: {
            onclickPgButtons: function (whichButton, $form, rowid) {
                var $self = $(this), $row = $($self.jqGrid("getGridRowById", rowid)), countryId;
                if (whichButton === "next") {
                    $row = $row.next();
                } else if (whichButton === "prev") {
                    $row = $row.prev();
                }
                if ($row.length > 0) {
                    countryId = $self.jqGrid("getCell", $row.attr("id"), "country");
                    changeStateSelect(countryId, $form.find("#country")[0]);
                }
            },
            closeOnEscape: true
        },
        searching: {
            searchOnEnter: true,
            defaultSearch: "cn"
        },
        navOptions: {
            del: false,
            search: false
        },
        iconSet: "fontAwesome",
        sortname: "name",
        sortorder: "desc",
        viewrecords: true,
        rownumbers: true,
        pager: true,
        pagerRightWidth: 85, // fix wrapping or right part of the pager
        caption: "Demonstrate dependent selects (inline editing on double-click)"
    })
    .jqGrid("navGrid")
    .jqGrid("filterToolbar");
});

见https://jsfiddle.net/OlegKi/svnL4Lsv/3/