前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >EXT.NET 使用总结(2) ---TreePanel(带右键菜单,节点自定义属性)

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

作者头像
DougWang
发布2020-02-18 16:22:24
6000
发布2020-02-18 16:22:24
举报
文章被收录于专栏:java跬步java跬步

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);
                }  
            }
        }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2013-12-31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档