jqGrid的在线编辑：子类别过滤器下拉列表基于另一个类别的下拉 [英] JQGrid Inline Editing : Filter subcategory dropdown list based on another category dropdown

问题描述

我有一个类别，并在jqGrid的一个子类别列。我已经启用了内联编辑，无论是类别和子类别是dropdownlists列（edittype：'选择'）。我需要过滤基于所选择的类别的子类别清单。我不知道我怎样才能达致这functionlity？

I have a category and a subcategory column in a Jqgrid. I have enabled inline editing, both category and subcategory are dropdownlists columns (edittype:'select'). I need to filter the subcategory list based on the selected category. I wonder how can I acheive this functionlity?

我试过下面的事件，但它不是为我工作
 afterEditCell：功能（ROWID，celname，价值，iRow，ICOL）{
//在这里做
   }

I tried the below event but its not working for me afterEditCell: function(rowid, celname, value, iRow, iCol) { //to do here }

上述事件不会被解雇。我所有的列都是可编辑

the above event doesn't get fired. my all column are editable

谢谢，

推荐答案

这个问题会经常问。所以我写了演示如何实现这样的场​​景，只有本地数据（jqGrid的开始3.7.x）小code例子。对于数据编辑（直接编辑）我在这里使用双击事件。修改后的数据后，ENTER键的pressing保存。对于选择元素的填充我用的ID。如果美元类别的对$ PFER使用文本和子类别，而不是你应该删除格式：选择，并在＆LT建设相应的变化;选项＆GT; 元素（参见的code dataEvents 事件处理程序）。

This question will be often asked. So I wrote a small code example which demonstrate how to implement such scenario with local data only (for jqGrid starting with 3.7.x). For data editing (inline editing) I use here the double-click event. The modified data will be saved after pressing of the "enter" key. For the filling of select elements I use ids. If you prefer use texts of the categories and subcategories instead you should remove formatter:'select' and make the corresponding changes in building of <option> elements (see code of dataEvents event handler).

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

这个例子可以修改的原因从服务器中选择选项的建筑物的情况下的。

This example can be of cause modified for the case of building of select option from the server.

这篇关于jqGrid的在线编辑：子类别过滤器下拉列表基于另一个类别的下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！