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

问题描述

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

所以我想捕捉展开和折叠事件.我在手册中找不到它

所以我就这样解决了

grid.find("div.treeclick").bind("click",function(e){类 = $(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)警报('展开！')；否则 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);}});

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

更新: Free jqGrid 支持回调和事件，其中使上述对 expandNode 和 collapseNode 的覆盖不再需要.它已经支持在展开或折叠节点或行之前或之后调用的附加回调.回调的名称:treeGridBeforeExpandNode、treeGridAfterExpandNode、treeGridBeforeCollapseNode、treeGridAfterCollapseNode、treeGridBeforeExpandRow、treeGridAfterExpandRow、treeGridBeforeCollapseRow、treeGridAfterCollapseRow及对应的jQuery事件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屋！