JQGrid 内联编辑：根据另一个类别下拉列表过滤子类别下拉列表

Question

我在 Jqgrid 中有一个类别和一个子类别列。我启用了内联编辑，类别和子类别都是下拉列表列（edittype：'select'）。我需要根据所选类别过滤子类别列表。我想知道我怎样才能实现这个功能？

我尝试了以下事件，但它不适合我 afterEditCell: 函数(rowid, celname, value, iRow, iCol) { //在这里做 }

上述事件不会被触发。我的所有专栏都是可编辑的

谢谢，

Answer 1

这个问题会经常被问到。所以我写了一个小代码示例，演示如何仅使用本地数据实现这种场景（对于从 3.7.x 开始的 jqGrid）。对于数据编辑（内联编辑），我在这里使用双击事件。修改后的数据将在按下“enter”键后被保存。为了填充选择元素，我使用 ids。如果您更喜欢使用类别和子类别的文本，您应该删除 formatter:'select' 并在 <option> 元素的构建中进行相应的更改（参见 dataEvents 事件处理程序的代码）。

var categories = ["sport", "science"];
var subcategories = ["football", "formel 1", "physics", "mathematics"];
var mydata = [
    {Name:"Lukas Podolski",     Category:0, Subcategory:0},
    {Name:"Michael Schumacher", Category:0, Subcategory:1},
    {Name:"Albert Einstein",    Category:1, Subcategory:2},
    {Name:"Blaise Pascal",      Category:1, Subcategory:3}
];
var subcategoriesOfCategory = [
    ["football", "formel 1"],
    ["physics", "mathematics"]
];

var grid = jQuery("#list").jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name: 'Name', width: 200 },
        { name: 'Category', width: 200, editable:true, formatter:'select',
          edittype:'select', editoptions: {
              value: categories,
              dataInit : function (elem) {
                  var v = $(elem).val();
                  grid.setColProp('Subcategory', {
                                  editoptions:{value:subcategoriesOfCategory[v]}});
              },
              dataEvents: [
                  { type: 'change',
                    data: { id: 7 },
                    fn: function(e) {
                        var v=$(e.target).val();
                        var sel = grid.getGridParam('selrow');
                        grid.setColProp('Subcategory', { editoptions:
                                              {value:subcategoriesOfCategory[v]}});
                        var res = '';
                        var sc = subcategoriesOfCategory[v];
                        for (var i=0; i<sc.length; i++) {
                            res += '<option role="option" value="' + i + '">' +
                                   sc[i] + '</option>';
                        }
                        $("select#"+sel+"_Subcategory").html(res);
                    }
                  }
              ]
          }
        },
        { name: 'Subcategory', width: 200, editable:true, formatter:'select',
          edittype:'select', editoptions: {value: subcategories} }
    ],
    onSelectRow: function(id) {
        if (id && id !== lastSel) {
            grid.restoreRow(lastSel);
            lastSel = id;
        }
    },
    ondblClickRow: function(id, ri, ci) {
        if (id && id !== lastSel) {
            grid.restoreRow(lastSel);
            lastSel = id;
        }
        grid.editRow(id, true);
        return;
    },
    editurl: 'clientArray',
    sortname: 'Name',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    pager: '#pager',
    caption: "Inline Editing example"
}).navGrid('#pager', { edit: false, add: false, del: false,
                       search: false, view: false });

这个例子可以根据从服务器构建选择选项的情况进行修改。