如何防止 free-jqgrid 中 tree_mode 节点崩溃的行选择?

How to prevent row selection on tree_mode node collapse in free-jqgrid?

我正在使用 free-jqgrid 4.15.2 作为导航。它处于树模式,当用户折叠节点时,默认行为是立即 select 它。我希望他们能够在不 select 单击行的情况下隐藏菜单的部分,但似乎没有与展开和折叠 tree_mode 节点相对应的易于访问的事件。

我的 master 分支中有这些事件,但是我们迁移到 free-jqgrid 打破了它。这是使用非常早期版本的 jqgrid 的工作代码。

$.jgrid.extend({
    expandNode: function ( rc ) {
        debugger
    },
    collapseNode: function ( rc ) {
        debugger
    }
});

我也试过劫持 setTreeNode,但我的扩展文件中缺少全局变量。

setTreeNode: function () {
        // TODO: Move the code in setTreeGrid because it uses currently no parameters
        // and it's don't make any actions with specific row
        return this.each(function () {
            var continue_selection = true;
            var $t = this, $self = $($t), p = $t.p;
            if (!$t.grid || !p.treeGrid) { return; }
            var expanded = p.treeReader.expanded_field,
                isLeaf = p.treeReader.leaf_field,
                beforeSelectRow = function (e, rowid, eOrg) {
                    if (eOrg != null) {
                        var $target = $(eOrg.target),
                            $td = $target.closest("tr.jqgrow>td"),
                            $tr = $td.parent(),
                            expendOrCollaps = function () {
                                var item = p.data[p._index[stripPref(p.idPrefix, rowid)]],
                                    collapseOrExpand = item[expanded] ? "collapse" : "expand";
                                if (!item[isLeaf]) {
                                    base[collapseOrExpand + "Row"].call($self, item, $tr);
                                    continue_selection = base[collapseOrExpand + "Node"].call($self, item, $tr);
                                }
                            };
                        if ($target.is("div.treeclick")) {
                            expendOrCollaps();
                        } else if (p.ExpandColClick) {
                            if ($td.length > 0 && $target.closest("span.cell-wrapper", $td).length > 0) {
                                expendOrCollaps();
                            }
                        }
                        return true; // allow selection
                    }
                };

            if (continue_selection) {
                $self.off("jqGridBeforeSelectRow.setTreeNode");
                $self.on("jqGridBeforeSelectRow.setTreeNode", beforeSelectRow);
            }
        });
    },

展开或折叠节点时如何防止行 selection?

行选择是 jqGrid 的基本功能,它独立于 TreeGrid 的使用。换句话说,可以使用 beforeSelectRow 来防止在单击 ExpandColumn 列时选择行,并另外使用 selectOnContextMenu: false 来防止在单击鼠标右键时选择行(在上下文菜单上) . beforeSelectRow对应的代码可以是:

beforeSelectRow: function (iRow, e) {
    var $td = $(e.target).closest("tr.jqgrow>td"),
        iCol = $td.length > 0 ? $td[0].cellIndex : -1,
        p = $(this).jqGrid("getGridParam"),
        cm = iCol >= 0 ? p.colModel[iCol] : null;

    if (cm != null && cm.name === p.ExpandColumn &&
            $(e.target).closest(".tree-wrap").length > 0) {

        return false; // prevent row selection
    }
    return true;
}

如果单击 TreeGrid 的 expand/collapse 图标,上述代码会阻止选择。可以从 if 中删除 $(e.target).closest(".tree-wrap").length > 0 部分,以防止选择单击列中的任何位置。如果使用 ExpandColClick: true 选项可能会很实用。