How to prevent row selection on tree_mode node col

问题:

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.

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

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?

回答1:

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

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.