在jqGrid树中选择多行答案

【问题标题】：Selecting multiple rows in jqGrid tree在jqGrid树中选择多行
【发布时间】：2012-02-13 09:18:10
【问题描述】：

有没有办法在 jqGrid 树结构中选择多行？单击任何行时，我提供了内联编辑工具，双击时我正在扩展行。

如果我选择按住 shift 键的行，它应该选择行。我指定了multiselect: true，但它不起作用。

rowNum:10,
rowList:[10,20,30],
pager: '#pcolch',
sortname: 'no',
treeGridModel:'adjacency',
autowidth:false,
sortorder: 'desc',
caption:"<a href='#'>Projects</a> > Tasks",
toolbar:[true,"top"],
treeGrid: true,
cellEdit: true,
sortable: true,
shrinkToFit :true, 
//viewrecords: true, 
height:'auto',
ExpandColumn:'name',
cellsubmit : 'clientArray',
multiselect:true,

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

当前实现 Tree Greed 的 limitations 列表在文档中似乎并不完整。如果您检查 jqGrid 的源代码，您会发现 the lines 会重置一些其他 jqGrid 参数：

multiselect = false;
subGrid = false;
altRows = false;
pgbuttons = false;
pginput = false;
gridview = true;
rowNum = 10000; // if rowTotal is null
rowList = [];

所以当前树形网格的实现不支持选择多行。

如果你真的需要这样的功能，你必须自己实现它。为此，您可以在colModel 中添加具有predefined 'checkbox' 格式化程序的列，其中formatoptions: {disabled: false} 作为附加选项，并实现您需要的选择行为。有关详细信息，请参阅 the answer 和 this one。可能需要在 beforeSelectRow 回调中实现一些额外的操作。

【讨论】：

【解决方案2】：

我不确定这是否仍然令人感兴趣，但今天我通过设置 aria-selected 属性 (true/false) 并添加/删除视觉效果的 ui-state-highlight 类。

这一切都发生在 beforeRowSelect 回调中，该回调返回 false 以防止正常的行选择回调。

希望这可以帮助别人！我像一个 5 岁的孩子一样编程，所以请放轻松！ :-)

最后说明：变量lastSelIdx是一个全局变量，存储最后选择的行索引，需要在函数外声明。

beforeSelectRow: function(id, e) {
        var row = $("#" + id);
        var currSelIdx = $("#tree").getInd(id) - 1;
        if (e.ctrlKey) {
                // Ctrl was pressed - Add to selection or remove
                if (row.attr("aria-selected") == "true") {
                        row.removeClass("ui-state-highlight").attr("aria-selected", "false");
                } else {
                        row.addClass("ui-state-highlight").attr("aria-selected", "true");
                }
                lastSelIdx = currSelIdx;
        } else if (e.shiftKey) {
                // Shift was pressed. Select all between last selected and curently selected
                var rows = $(".jqgrow");
                // Select all rows between the last selected
                if (!lastSelIdx) lastSelIdx = 0;
                if (lastSelIdx > currSelIdx) {
                        selmin = currSelIdx;
                        selmax = lastSelIdx;
                } else {
                        selmin = lastSelIdx;
                        selmax = currSelIdx;                        
                }
                for (i = 0; i < rows.length; i++) {
                        if (i >= selmin && i <= selmax) {
                                $(rows[i]).addClass("ui-state-highlight").attr("aria-selected", "true");                                
                        } else {
                                $(rows[i]).removeClass("ui-state-highlight").attr("aria-selected", "false");                                
                        }
                }
        } else {
                // Simple click
                $("tr[aria-selected=true]").each(function() {
                        $(this).removeClass("ui-state-highlight").attr("aria-selected", "false");
                });
                row.addClass("ui-state-highlight").attr("aria-selected", "true");
                lastSelIdx = currSelIdx;
        }
        return false;
},

【讨论】：