如何防止free_jqgrid中tree_mode节点上的行选择崩溃? [英] How to prevent row selection on tree_mode node collapse in free-jqgrid?

问题描述

我正在使用free-jqgrid 4.15.2作为导航.它处于树状模式，当用户折叠节点时，默认行为是立即选择它.我希望他们能够隐藏菜单的某些部分而无需选择单击的行，但是似乎没有容易发生的事件与扩展和折叠tree_mode节点相对应.

I'm using free-jqgrid 4.15.2 as navigation. It's in tree mode and when users collapse a node, the default behaviour is to immediately select it. I'd like them to be able to hide sections of the menu without selecting the clicked row, but there do not seem to be easily accessible events that correspond with expanding and collapsing tree_mode nodes.

我的master分支中有这些事件，但是我们转向free-jqgrid打破了它.这是使用jqgrid的早期版本的工作代码.

I have these events in my master branch, but our move to free-jqgrid broke it. Here's the working code using a very early version of jqgrid.

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

我也尝试劫持setTreeNode，但是扩展文件中缺少全局变量.

I also tried hijacking setTreeNode, but the global variables were missing in my extension file.

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

在展开或折叠节点时，如何防止选择行?

How can I prevent row selection when expanding or collapsing nodes?

推荐答案

选择行是jqGrid的基本功能，它与TreeGrid的使用无关.换句话说，可以使用beforeSelectRow防止单击ExpandColumn列时选择行，还可以使用selectOnContextMenu: false防止单击鼠标右键(在上下文菜单上)时选择行. beforeSelectRow的对应代码可能如下:

Selection of row is the base functionality of jqGrid and it's independent on the usage of TreeGrid. In other words one can use beforeSelectRow to prevent row selection on click of the ExpandColumn column and to use selectOnContextMenu: false additionally to prevent row selection on click on the right mouse button (on context menu). The corresponding code of beforeSelectRow could be the following:

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的展开/折叠图标，以上代码将阻止选择.可以从if删除$(e.target).closest(".tree-wrap").length > 0部分，以防止选择单击列中的任何位置.如果使用ExpandColClick: true选项，可能会很实用.

The above code prevent selection if the expand/collapse icon of TreeGrid was clicked. One can remove $(e.target).closest(".tree-wrap").length > 0 part fron the if to prevent selection of click on any place in the column. It could be practical if ExpandColClick: true option is used.

这篇关于如何防止free_jqgrid中tree_mode节点上的行选择崩溃?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！