您的位置：首页 > 其它

Ext.net TreePanel的Checkbox操作及父子联动

2012-08-29 11:43 507 查看

需求：

在使用Ext.net的TreePanel时，我们需要使用节点的Checkbox联动状态：

当选中一个树节点的Checkbox时，需要让它的父节点设为选中，并同时选中他所有的子节点。

当取消一个树节点的Checkbox选中状态时，需要同时取消它所有子节点的选中状态。

很多资料上作用node.getUI().checkbox.checked = true/flase;方式来设置节点checkbox的状态，但这种方式在联动的情况下容易出现一个问题，就是通过TreePanel1.getChecked();不能获取到选中节点的值，所以建议使用node.ui.toggleCheck(checked)方法来处理。

但toggleCheck同样存在一个问题：

check子节点时，使用parentNode.getUI().toggleCheck(true)选中父节点，会触发父节点被选中的事件。需要这里不需要它触发父节点被选中事件，需要重定一下toggleCheck方法。

下面demo使用VS2010 + Ext.net 1.2版本实现，测试通过：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreePanelCheckBox.aspx.cs"
    Inherits="ExtNet12Examples.TreePanel.TreePanelCheckBox" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TreePanel 的Checkbox操作及父子级Checkbox联动Demo</title>
    <script type="text/javascript">
        function checkchange(node, checked) {
            if (checked) {
                checkParentNode(node.parentNode, checked);
            }

            checkChildNode(node, checked);
        }

        function checkChildNode(node, checked) {
            if (node == undefined) {
                return;
            }
            node.attributes.checked = checked;
            node.ui.toggleCheck(checked);
            node.eachChild(function (child) {
                checkChildNode(child, checked);
            });
        }

        function checkParentNode(node, checked) {
            if (node == undefined) {
                return;
            }
            node.attributes.checked = checked;
            node.ui.toggleCheck(checked);
            checkParentNode(node.parentNode);
        }

        var getCheckedNodes = function () {
            var msg = "",
                selNodes = TreePanel1.getChecked();

            Ext.each(selNodes, function (node) {
                if (msg.length > 0) {
                    msg += ", ";
                }

                msg += node.text;
            });

            Ext.Msg.show({
                title: "Selected Nodes",
                msg: msg.length > 0 ? msg : "None",
                icon: Ext.Msg.INFO,
                minWidth: 200,
                buttons: Ext.Msg.OK
            });
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <script language="javascript" type="text/javascript">
        Ext.override(Ext.tree.TreeNodeUI, {
            toggleCheck: function (value) {
                var cb = this.checkbox;
                if (cb) {
                    cb.checked = (value === undefined ? !cb.checked : value);
//                    this.onCheckChange();
                }
            }
        });
    </script>
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:TreePanel ID="TreePanel1" runat="server" Width="200" AutoScroll="true" ContainerScroll="true" Animate="false"
        CollapseFirst="true" BodyStyle="background-color:#F1F7FE;" RootVisible="false">
        <Root>
            <ext:TreeNode runat="Server" Text="根" NodeID="root">
                <Nodes>
                    <ext:TreeNode Text="test1" NodeID="test1" Checked="False" Expanded="true">
                        <Nodes>
                            <ext:TreeNode Text="c_test1" NodeID="c_test1" Checked="False">
                            </ext:TreeNode>
                            <ext:TreeNode Text="c_test2" NodeID="c_test2" Checked="False" Expanded="true">
                                <Nodes>
                                    <ext:TreeNode Text="cc_test1" NodeID="cc_test1" Checked="False">
                                    </ext:TreeNode>
                                    <ext:TreeNode Text="cc_test2" NodeID="cc_test2" Checked="False">
                                    </ext:TreeNode>
                                    <ext:TreeNode Text="cc_test3" NodeID="cc_test3" Checked="False">
                                    </ext:TreeNode>
                                    <ext:TreeNode Text="cc_test4" NodeID="cc_test4" Checked="False">
                                    </ext:TreeNode>
                                </Nodes>
                            </ext:TreeNode>
                            <ext:TreeNode Text="c_test3" NodeID="c_test3" Checked="False">
                            </ext:TreeNode>
                            <ext:TreeNode Text="c_test4" NodeID="c_test4" Checked="False">
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                    <ext:TreeNode Text="test2" NodeID="test2" Checked="False">
                        <Nodes>
                            <ext:TreeNode Text="c_test11" NodeID="c_test11" Checked="False">
                            </ext:TreeNode>
                            <ext:TreeNode Text="c_test22" NodeID="c_test22" Checked="False">
                            </ext:TreeNode>
                            <ext:TreeNode Text="c_test33" NodeID="c_test33" Checked="False">
                            </ext:TreeNode>
                            <ext:TreeNode Text="c_test44" NodeID="c_test44" Checked="False">
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                    <ext:TreeNode Text="test3" NodeID="test3" Checked="False">
                        <Nodes>
                            <ext:TreeNode Text="c_test111" NodeID="c_test111" Checked="False">
                            </ext:TreeNode>
                            <ext:TreeNode Text="c_test222" NodeID="c_test222" Checked="False">
                            </ext:TreeNode>
                            <ext:TreeNode Text="c_test333" NodeID="c_test333" Checked="False">
                            </ext:TreeNode>
                            <ext:TreeNode Text="c_test444" NodeID="c_test444" Checked="False">
                            <Listeners>
                            </Listeners>
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                </Nodes>
            </ext:TreeNode>
        </Root>
        <Listeners>
        <CheckChange Fn="checkchange" />
        </Listeners>
    </ext:TreePanel>
    <ext:Button ID="Button1" runat="server" Text="Submit">
        <Listeners>
              <Click Fn="getCheckedNodes" />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>

效果：

源码：http://download.csdn.net/detail/llxchen/4533901

原下载：http://download.csdn.net/detail/llxchen/4533696 有Bug，请勿下载。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航