如何防止 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
选项可能会很实用。
我正在使用 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
选项可能会很实用。