Question

有没有办法在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,

Answer 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 = [];

因此，Tree Grid 的当前实现不支持选择多行。

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

Answer 2

我不确定这是否仍然有用，但今天我通过设置aria-selected属性（true / false）在树形网格中实现了多选项选项（Click / Ctrl-Click / Shift-Click）并为视觉效果添加/删除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;
},

在jqGrid树中选择多行

2 个答案: