jqGrid treeGrid 捕捉展开折叠事件 [英] jqGrid treeGrid catch expand collaps events

问题描述

我使用 jqGrid 来制作一些大树.现在我想记住 cookie 中展开和折叠的节点

所以我想捕捉 expand 和 collaps 事件.我在手册中找不到它

所以我是这样解决的

grid.find("div.treeclick").bind("click",function(e){classes = $(this).attr('class');//返回://ui-icon treeclick ui-icon-triangle-1-s tree-minus//ui-icon treeclick ui-icon-triangle-1-e tree-plusif(classes.indexOf('-minus') != -1)alert('展开！');否则 if(classes.indexOf('-plus') != -1)警报('崩溃！')});

有人可以提出另一种方法吗?

解决方案

jqGrid 中目前没有可以帮助您捕捉树节点折叠或展开的事件或回调.

通常，您发布的代码会进行正确的测试.然而，你自己对解决方案并不完全满意.我也觉得不太好.我看到的最大问题是您测试哪个图标具有按钮，但图标将被网格中相同事件的原始处理程序更改.绑定的顺序应该非常重要.

在您的情况下，我更喜欢在不存在事件的情况下使用子类化技术.这很容易，但 100% 有效.

树网格有方法 expandNode 和collapseNode 已记录在案.在单击节点图标的情况下，jqGrid 也会在内部调用该方法.expandNode 方法调用 reloadGrid 来显示展开的树.

所以我建议在Tree Grid创建后添加如下代码:

var orgExpandNode = $.fn.jqGrid.expandNode,orgCollapseNode = $.fn.jqGrid.collapseNode;$.jgrid.extend({展开节点:函数(rc){alert('在 expandNode 之前:rowid="' + rc._id_ + '", name="' + rc.name + '"');返回 orgExpandNode.call(this, rc);},折叠节点:函数(rc){alert('在collapseNode之前:rowid="' + rc._id_ + '", name="' + rc.name + '"');返回 orgCollapseNode.call(this, rc);}});

您可以在演示上查看结果.>

更新: 免费 jqGrid 支持回调和事件，使得上述对 expandNode 和 collapseNode 的覆盖不再需要.它支持在扩展或折叠节点或行之前或之后调用的额外回调.回调名称:treeGridBeforeExpandNode、treeGridAfterExpandNode、treeGridBeforeCollapseNode、treeGridAfterCollapseNode、treeGridBeforeExpandRow、treeGridAfterExpandRow、treeGridBeforeCollapseRow、treeGridAfterCollapseRow 和对应的jQuery Events jqGridTreeGridBeforeExpandNode、jqGridTreeGridAfterExpandNode、jqGridTreeGridBeforeCollapseNode、jqGridTreeGridAfterCollapseNode、jqGridTreeGridBeforeExpandRow、jqGridTreeGridAfterExpandRow、jqGridTreeGridBeforeCollapseRow、jqGridTreeGridAfterCollapseRow代码>.所有回调都有一个参数:options，它有两个属性:rowid 和 item.item 是节点，它将展开/折叠.

I use jqGrid to epose some big Tree. Now I want to remember expanded and collapsed nodes in cookies

So I want to catch expand and collaps event. I couldn't find it in manual

So I've resolved it in this way

grid.find("div.treeclick").bind("click",function(e){
    classes = $(this).attr('class');
    //returns:
    //ui-icon treeclick ui-icon-triangle-1-s tree-minus
    //ui-icon treeclick ui-icon-triangle-1-e tree-plus
    if(classes.indexOf('-minus') != -1)
        alert ('Expand!');
    else if(classes.indexOf('-plus') != -1)
        alert ('Collaps!')
});

Could anybody propose another way?

解决方案

There are currently no event or callback in the jqGrid which could help you to catch collapsing or expanding of the tree nodes.

In general the code which you posted do correct tests. Nevertheless you self are not full satisfied by the solution. I find it also not so good. The most problem which I see is that you test which icon has the button, but the icon will be changed by the original handler of the same events in the grid. The the order of the bindings should be very important.

On your place I prefer to use subclassing technique in such cases when no event exists. It's very easy, but it's 100% effective.

The Tree Grid has methods expandNode and collapseNode which are documented. The method will be called internally by jqGrid too in case of clicks on the node icon. The method expandNode calls reloadGrid to display the expanded tree.

So I suggest to add the following code after the Tree Grid is created:

var orgExpandNode = $.fn.jqGrid.expandNode,
    orgCollapseNode = $.fn.jqGrid.collapseNode;
$.jgrid.extend({
    expandNode: function (rc) {
        alert('before expandNode: rowid="' + rc._id_ + '", name="' + rc.name + '"');
        return orgExpandNode.call(this, rc);
    },
    collapseNode: function (rc) {
        alert('before collapseNode: rowid="' + rc._id_ + '", name="' + rc.name + '"');
        return orgCollapseNode.call(this, rc);
    }
});

You can see the results on the demo.

UPDATED: Free jqGrid supports callbacks and events, which makes the above overwriting of expandNode and collapseNode unneeded. It supports already additional callbacks called before or after expanding or collapsing of nodes or rows. The names of callbacks: treeGridBeforeExpandNode, treeGridAfterExpandNode, treeGridBeforeCollapseNode, treeGridAfterCollapseNode, treeGridBeforeExpandRow, treeGridAfterExpandRow, treeGridBeforeCollapseRow, treeGridAfterCollapseRow and the corresponding jQuery Events jqGridTreeGridBeforeExpandNode, jqGridTreeGridAfterExpandNode, jqGridTreeGridBeforeCollapseNode, jqGridTreeGridAfterCollapseNode, jqGridTreeGridBeforeExpandRow, jqGridTreeGridAfterExpandRow, jqGridTreeGridBeforeCollapseRow, jqGridTreeGridAfterCollapseRow. All callbacks has one parameter: options, which has two properties: rowid and item. The item is the node, which will be expanding/collapsing.

这篇关于jqGrid treeGrid 捕捉展开折叠事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！