EXT.NET 使用总结（2） ---TreePanel(带右键菜单，节点自定义属性)

TreePanel(带右键菜单，节点自定义属性)

其实这个树控件也挺好用的。http://www.ztree.me/v3/main.php#_zTreeInfo

html

    <ext:Panel ID="ContentPanel" runat="server" Width="960" MinHeight="560" Height="560"  Border="false" Closable="false" Layout="BorderLayout">

                <Items>

                    <ext:Panel ID="PanelWest" runat="server" Region="West" Title="已配置表" Width="200" Collapsible="true" Split="true"  MinWidth="175" MaxWidth="400" Layout="CardLayout" >

                        <Items>

                            <ext:TreePanel ID="IndexTableTree" RootVisible="false" runat="server" AutoScroll="true" Border="true">

                                <Listeners>

                                    <ItemClick Fn="LinkToDefineColumn"></ItemClick>

                                    <ItemContextMenu Fn="ShowMenu" StopEvent="true" />

                                </Listeners>

                                <Model>

                                    <ext:Model ID="Model1" runat="server">

                                        <Fields>

                                            <ext:ModelField Name="CODE" Type="String" />

                                            <ext:ModelField Name="BASETYPE" Type="String" />

                                            <ext:ModelField Name="SAVETYPE" Type="String" />

                                            <ext:ModelField Name="parenttablecode" Type="String" />

                                        </Fields>

                                    </ext:Model>

                                </Model>

                                <SelectionModel>

                                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />

                                </SelectionModel>

                            </ext:TreePanel>

                        </Items>

                        <Listeners>

                        <Collapse Fn="colsett"></Collapse>

                        <Expand Fn="colsett"></Expand>

                        </Listeners>

                    </ext:Panel>

                    <ext:Panel ID="PanelCenter" runat="server" Region="Center" Flex="4" Layout="CardLayout">

                    </ext:Panel>

            </Items>

    </ext:Panel>

    <ext:Menu ID="TreeContextMenu" runat="server">

        <Items>

            <ext:MenuItem ID="MenuItemAdd" runat="server" Text="添加从表" Handler="AddChildTable();" IconCls="diy_add">

            </ext:MenuItem>

            <ext:MenuItem ID="MenuItemAddParent" runat="server" Text="添加主表" Handler="AddParentTable();" IconCls="diy_add">

            </ext:MenuItem>

            <ext:MenuSeparator runat="server" ID="MenuSeparator1"/>

            <ext:MenuItem ID="MenuItemEdit" runat="server" Text="编辑表属性" Handler="EDITTable();" IconCls="diy_edit">

            </ext:MenuItem>

        </Items>

    </ext:Menu>

script

<script type="text/javascript">

    var ShowMenu = function (view, node, item, index, e) {

        SelectNode=node;

        var menu = <%=TreeContextMenu.ClientID %>;

        var id=node.get("id");

        var parenttablecode=node.get("parenttablecode");

        idflag=id;

        if (id=="RootPublic"||id=="RootPrivate") {

            return false;

        }

        var scode=node.get("S_CODE");

        S_CODE=scode;

        if (scode!="") {

            <%=MenuItemAdd.ClientID %>.hide();

            <%=MenuItemAddParent.ClientID  %>.hide();

            if ((parenttablecode == ""||parenttablecode == null) && (scode == "0" || scode == "1")) {

                    <%=MenuItemAdd.ClientID %>.show();

                }

        }else {

            <%=MenuItemAdd.ClientID %>.hide();

            <%=MenuItemAddParent.ClientID  %>.show();

        }

        <%=MenuSeparator1.ClientID %>.show();

        <%=MenuItemEdit.ClientID %>.show();

        menu.showAt([e.getXY()[0], e.getXY()[1] + 10]);

        e.stopEvent();

    }

</script>

后台绑定数据源：

        private void BuildTree()

        {

            Ext.Net.Node root = new Ext.Net.Node();

            root.Text = "Root";

            IndexTableTree.Root.Add(root);

             List<EXTTreeNode> listALL = GetData();

            List<EXTTreeNode> list = GetData().FindAll(p=>p.pId=="");

            if (list!= null &&list.Count>)

            {

                foreach (var item in list)

                {

                    Ext.Net.Node node = new Ext.Net.Node();

                    node.Text = item.name;

                    node.NodeID = item.id;

                    if (!string.IsNullOrWhiteSpace(noid))

                    {

                        string flag = "";

                        ifMyChild(item.id, listALL, noid, ref flag);

                        if (flag=="")

                        {

                            node.Expanded = true;

                        }

                    }

                    //添加自定义属性

                    node.CustomAttributes.Add(new ConfigItem("S_CODE", item.CODE, ParameterMode.Value));

                    node.CustomAttributes.Add(new ConfigItem("BASETYPE", item.BASETYPE, ParameterMode.Value));

                    node.CustomAttributes.Add(new ConfigItem("SAVETYPE", item.SAVETYPE, ParameterMode.Value));

                    node.CustomAttributes.Add(new ConfigItem("parenttablecode", item.parenttablecode, ParameterMode.Value));

                    node.Leaf = true;

                    //加载子节点

                    GetSubNode(node, listALL);

                    if (node.Children.Count > )

                        node.Leaf = false;

                    root.Children.Add(node);

                }

            }

        }