首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何勾选/取消勾选树形面板的所有节点,然后只在extjs中向服务器发送请求?

如何勾选/取消勾选树形面板的所有节点,然后只在extjs中向服务器发送请求?
EN

Stack Overflow用户
提问于 2019-06-03 17:12:30
回答 3查看 344关注 0票数 0

我是extjs的新手,我使用过树形面板。我写了一些代码,用于选中和取消选中树控件的复选框。我有像下面这样的树的结构。

代码语言:javascript
复制
|-Parent 1
    |- Child 1
    |- Child 2
        |- Sub child 2.1
        |- Sub child 2.2
    |- Child 3
    |- Child 4
        |- Sub child 4.1
        |- Sub child 4.2
    |- Child 5
    |- Child 6

|-Parent 2
    |- Child 1
    |- Child 2
        |- Sub child 2.1
    |- Child 3

在listener中,我编写了检查和取消检查节点的代码,假设所有节点都被选中,用户取消选中Sub child 2.3,那么Child 2Parent 1都会被取消检查,这是正常工作的。

现在的问题是,每当这个check/uncheck事件发生时,它都会触发一个DB调用。我想让它像一次一样,让它完成所有的check/uncheck操作,然后单次调用db,而不是每次都调用。我很困惑,怎么才能做到这一点?下面是相同的代码。

代码语言:javascript
复制
items: [
    Ext.create('Ext.tree.Panel', {
        checkPropagation: 'both',
        itemId: 'datasourceCustodianTree',
        rootVisible: false,
        store: {
            fields: ['value'],
            root: {
                expanded: true,
                children: treeData,
                text: 'Source:',
            }
        },
        listeners: {
            checkchange: function (node, checked, options) {
                var list1 = [], list2 = [], list3 = [];
                var tree = me.down('#datasourceTree');


                // Propagate change downwards (for all children of current node).
                var setChildrenCheckedStatus = function (current) {
                    if (current.parentNode) {
                        var parent = current.parentNode;
                        current.set('checked', parent.get('checked'));
                        suspendEvent = true;
                    }

                    if (current.hasChildNodes()) {                                                
                        current.eachChild(arguments.callee);
                    }
                };

                if (node.hasChildNodes()) {
                    node.eachChild(setChildrenCheckedStatus);                                            
                }

                // Propagate change upwards (if all siblings are the same, update parent).
                var updateParentCheckedStatus = function (current) {
                    if (current.parentNode) {
                        var parent = current.parentNode;

                        var checkedCount = 0;
                        parent.eachChild(function (n) {
                            checkedCount += (n.get('checked') ? 1 : 0);
                        });

                        // Children have same value if all of them are checked or none is checked.
                        var sameValue = (checkedCount == parent.childNodes.length) || (checkedCount == 0);

                        if (sameValue) {
                            var checkedValue = (checkedCount == parent.childNodes.length);
                            parent.set('checked', checkedValue);
                            suspendEvent = true;
                        } else {
                            // Not all of the children are checked, so uncheck the parent.
                            parent.set('checked', false);
                            suspendEvent = false;
                        }

                        updateParentCheckedStatus(parent);
                    }
                }

                updateParentCheckedStatus(node);                

                this.getChecked().forEach(function (item) {
                    if (item.data.parentId !== "root" && item.isLeaf()) {
                        if (item.data.listFor.toLowerCase() === 'item1') {
                            list1.push(item.data.value);
                        } else if (item.data.listFor.toLowerCase() === 'item2') {
                            list2.push(item.data.value);
                        } else if (item.data.listFor.toLowerCase() === 'item3') {
                            list3.push(item.data.value);
                        }
                    }
                });

                // DB Call to get data on any checkchange event.
                me.updateData(list1, list2, list3);
            }
        }
    })
]

如何避免这样的操作?我试着让它成为resumeEvent('checkchange')之后的suspendEvent('checkchange');。但这并不起作用,因为它只会调用此事件一次。

现在我不知所措,该怎么办?

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56424249

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档