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

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

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

html

代码语言：javascript复制

    <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

代码语言：javascript复制

<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>

后台绑定数据源：

代码语言：javascript复制

        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>0)
            {
                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=="1")
                        {
                            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 > 0)
                        node.Leaf = false;
                    root.Children.Add(node);
                }  
            }
        }

html script 后台

0 人点赞