Question

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

我尝试了以下活动，但它不适合我 afterEditCell：function（rowid，celname，value，iRow，iCol）{ //在这里做 }

以上事件不会被解雇。我的所有专栏都是可编辑的

谢谢，

Answer 1

经常会问这个问题。所以我编写了一个小代码示例，演示了如何仅使用本地数据实现此类场景（对于从3.7.x开始的jqGrid）。对于数据编辑（内联编辑），我在这里使用双击事件。按“enter”键后，将保存修改后的数据。为了填充选择元素我使用id。如果您更喜欢使用类别和子类别的文本，则应删除格式化程序：'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 });

对于从服务器构建select选项的情况，可以修改此示例。

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

1 个答案: