好大一棵树,新春的祝福(二):功能节点的数据结构和页面展示

1、数据结构

     在原有的基础上,把noteID改成FunctionID,去掉code字段,增加三个字段。

NoteLevel :表示第几级的节点,可以和css配合,“美化”显示效果。 ParentIDPath: 父节点的路径,用于找到一个节点的子节点和子子节点(及所有子节点)。也可以找到一个节点的所有父节点。 OrderID :所有节点的总排序,大家一起来排序,一个SQL语句就可以提取出来直接绑定控件,而不需要在使用递归了。

     由于用功能节点作为例子,所以再增加两个字段

WebURL: 打开网页的网址 Target   : 打开网页的目标

【表结构的截图】

     虽然使用三个字段才实现了原来的一个字段的功能,但是每个字段的分工都很明确,也更“专业”,当然你也可以说这三个都是冗余字段。

     2、提取数据

     由于节点的缩进效果不用空格来占位了,所以这里的提取数据的SQL就简单很多了。

SELECT FunctionID, NoteTitle, NoteLevel, ParentIDPath, WebURL, Target FROM Test_Tree2 ORDER BY  OrderID

 【提取数据用的SQL语句】

     还是一条SQL语句,由于OrderID是所有节点的总排序,所以得到记录集之后直接绑定控件就可以了,不需要使用递归。当然这里说的控件不是TreeView,而是Repeater、GridView等。

【使用OrderID字段排序的效果】

     3、如何来显示?(请CSS来帮忙)

     为什么放着好好的 TreeView 不用呢?因为他不是太灵活,不好控制页面的显示,如果美工做得效果太特殊了,那么就不好弄了。

     对于“单列”的树,我习惯使用Repeater来显示,内部采用DIV。而对于“多列”的树,我们可以使用GridView控件。GridView控件的树状结构在下一篇(权限选择)里面来说明。

     使用 Repeater 也是很简单的。

 .aspx里的代码:

<asp:Repeater ID="Rpt" runat="server">
        <ItemTemplate>
            <div id='n<%# (Container.DataItem as DataRowView)["FunctionID"]%>'><%# (Container.DataItem as DataRowView)["noteTitle"]%></div>
        </ItemTemplate>
        </asp:Repeater>

.aspx.cs里面的代码:

private void BindTree()
        {
            //提取数据
            string sql = "SELECT FunctionID, NoteTitle, NoteLevel, ParentIDPath, WebURL, Target FROM Test_Tree2 ORDER BY  OrderID";
            DataTable dt = dal.RunSqlDataTable(sql);

            Rpt.DataSource = dt;
            Rpt.DataBind();

            输出js脚本需要的js数组#region 输出js脚本需要的js数组
            if (dt.Rows.Count > 0)
            {
                System.Text.StringBuilder str = new System.Text.StringBuilder();

                str.Append("<script language=\"javascript\">var notes = new Array();");
                //打开指定结点的子结点 还未实现功能
                str.Append("var firstID = " + dt.Rows[0][0].ToString() + " ;\r\n");
                str.Append("var lastID = " + dt.Rows[dt.Rows.Count - 1][0].ToString() + " ;\r\n");
                str.Append("var a = notes;\r\n");
                foreach (DataRow dr in dt.Rows)
                {
                    str.Append("a[");
                    str.Append(dr["FunctionID"].ToString());            //FunctionID
                    str.Append("] = new Array('");
                    str.Append(dr["NoteLevel"].ToString());                //noteLevel
                    str.Append("','");
                    str.Append(dr["ParentIDPath"].ToString());                    //path
                    str.Append("','");
                    str.Append(dr["WebURL"].ToString());                //weburl
                    str.Append("','");
                    str.Append(dr["Target"].ToString());                //target
                    str.Append("','");
                    str.Append(dr["NoteLevel"].ToString() == "1" ? "1" : "0");                //isshow
                     str.Append("')\r\n");
                }

                str.Append("</script>");

                Response.Write(str.ToString());
            }
            #endregion
        }

【Repeater的前台和后台的代码】

     这样倒是可以显示出来,但是也太难看了,根本就区分不出来一级节点和二级节点,这样拿出来还不得被骂s。别着急我们可以请css来“美化”一下。

     增加了class属性和鼠标跟随和鼠标单击的Repeater的代码:

<asp:Repeater ID="Rpt" runat="server">
        <ItemTemplate>
            <div style="display:block" id='n<%# (Container.DataItem as DataRowView)["FunctionID"]%>' class='css_Tree<%# (Container.DataItem as DataRowView)["NoteLevel"]%>' onclick="treeClick(this)" onmouseover="treeOver(this)"  onmouseout="treeOut(this)">
            <%# (Container.DataItem as DataRowView)["noteTitle"]%></div>
        </ItemTemplate>
        </asp:Repeater>
    </div>

     CSS的代码:

.css_Tree1  
{
    PADDING: 3px 1px 1px 10px ; 
    FONT-WEIGHT: bold; 
    FONT-SIZE: 16px; 
    COLOR: #222222;
    LINE-HEIGHT: 150%; 
    HEIGHT: 20px; 
    background-color:#ddddda; 
    
}
    
.css_Tree2  
{
    PADDING: 4px 1px 1px 30px ; 
    FONT-SIZE: 12px; 
    COLOR: #111111;  
    height:18pt; 
    background-color:#f6f6f6; 
}
 

.mySelectTree1
{
    PADDING: 3px 1px 1px 10px ; 
    FONT-WEIGHT: bold; 
    FONT-SIZE: 16px; 
    LINE-HEIGHT: 150%; 
    HEIGHT: 20px; 
     
    border: 0px solid #369;
    background-color: #ddddff;
    color: #000; 
      
}

.mySelectTree2
{
    border: 1px solid #369;
    background-color: #FFFFCF;
    color: #111; 
    PADDING: 4px 1px 1px 30px ; 
     FONT-SIZE: 12px; height:18pt;
}

.myActiveTree2
{
    PADDING: 4px 1px 1px 30px ; 
    FONT-SIZE: 12px; 
    COLOR: #111111;  
    height:18pt; 
    
    border: 1px solid #369;
    background-color: #CBDDEE;
    
    
    
}

【css的代码】

【效果截图】(好像还是挺难看的)

     怎么样?这样可以看得过去了吧。当然我是一点艺术细胞都没有的人,弄出来的css也是很难看,不过没关系,我们可以请专业人士来写出来漂亮的css。

优点:只要是可以用css表现出来的效果都可以加在这个“树”上面,而所需要做得只是修改一下css文件,而不用改代码。

4、如何展开收拢(js脚本)

     总算是好看了一点,但是现在任何效果都没有哇,至少也得弄出来个展开收拢的效果呀。

     所谓的收拢嘛,其实就是让子节点不可见,让网页里的标签不可见的话,可以使用style="display:none" 来做到,可见的话可以使用style="display:block"。

     我们可以给 div 加一个onclick事件,在事件里面修改子节点的display的值。

     思路很简单,代码也很简单。(代码在上面)

     5、加上鼠标跟随和选中的效果

     这个还是js脚本来实现,给div加上 onclick、onmouseover、 onmouseout 事件,然后在事件里面修改div的Class就可以了。

var oldDiv_Over
        var oldDiv_Active
      
        var oldCss1 
        var oldCss2 
        var oldCss_Over
        
        function treeClick(me)
        {
            var id = me.id;
            id = id.substring(1);
            var path = me.path;
            
            //alert(notes[id][2]);
            if (notes[id][2] == "#")
            {
                //一级节点,展开、收拢子节点。
                if (notes[id][4] == "1")
                {
                    //隐藏子节点
                    
                    ShowNote(id,0);
                    notes[id][4] = "0"
                }
                else
                {
                    //显示子节点
                    ShowNote(id,1);
                    notes[id][4] = "1"
                }    
            }
            else
            {
                //二级节点,打开网页
                var url = notes[id][2] + "?fid=" + notes[id][0] ;
                window.open(url ,notes[id][3]);
                
                if (oldDiv_Active)
                    oldDiv_Active.className = oldCss2 ;
                
                oldDiv_Active = me;
                oldCss2 = me.className;
                me.className = "myActiveTree2";
                
            }
        }
        
        function ShowNote(ParentID,isShow)
        {
            for (i=1;i<=lastID;i++)
            {
                if (notes[i])
                {
                    if (notes[i][0] == "2" )
                    {
                        path = notes[i][1];
                        if (path.indexOf("0," + ParentID) == 0 )
                        {
                            if (isShow == "0")
                                document.getElementById("n" + i).style.display = "none";
                            else
                                document.getElementById("n" + i).style.display = "block";
                        }
                    }
                } 
            }
        }
        
        function treeOver(me)
        {
            oldDiv_Over = me;
            oldCss_Over = me.className;
            
            var id = me.id;
            id = id.substring(1);
            
            if (oldDiv_Over != null && oldDiv_Active != oldDiv_Over)
                if (notes[id][0] == "1")
                    me.className = "mySelectTree1";
                else    
                    me.className = "mySelectTree2";
            
        }
        
        function treeOut(me)
        {
             if (oldDiv_Over != null && oldDiv_Active != oldDiv_Over)
                oldDiv_Over.className = oldCss_Over ;
           
        }

6、小结

     这个功能节点的数据结构是n级的,css样式也可以是n级的,但是js脚本却是按照两级来编写的,为什么呢?因为我觉得功能节点这一块,设置成两级的是比较合理的,客户看起来和操作起来都比较舒服,如果级数多了的话,有一点迷宫的感觉了。

     什么?您说您的项目就是很复杂的,二级的不够必须是三级的,那么怎么实现呢?有两种方法:

     第一种是把一级节点放在上面作为导航;第二种是,把三级节点做成标签的形式。

     如果您的项目三级节点也是不行的,必须是四级的,那么也可以,就是把上面的两种方法和在一起,一级的节点放在上面作为导航栏,二级、三级的“升一级”放在左面的功能节点里,四级节点做成标签的形式。

     什么?四级的还不够,那我也没有什么办法了。

演示效果,可以单击节点

树状结构的演示

基本的n级分类

加一个“编号”

我的树

功能演示

新闻管理

员工管理

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Replace方法与正则表达式的性能比较

今天做项目时遇到一个小需求:要将字符串中的回车符号替换成其它符号(比如"<br/>")。 考虑到不同的情况下,有些系统中是用\r\n作回车符,有些仅用\n就代表...

22390
来自专栏DOTNET

设计模式(行为模式)——观察者模式

1 定义 定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。 2 适用性 1)当一个抽象模型有两个方面,其中一...

36160
来自专栏大内老A

我的WCF之旅(4):WCF中的序列化[上篇]

SOA 和Message Windows Communication Foundation (WCF) 是基于面向服务架构(Service Orienta...

251100
来自专栏web开发

java导出Excel表格

最近自己着手写了一个前后端分离的后台管理系统(主要是写着玩,java还是熟悉一点,所以前后端均是自己写),后端使用的Java SpringMVC。后来想着在用户...

579100
来自专栏林德熙的博客

C# Span 入门 stackallocAllocHGlobal

本文简单告诉大家如何使用 Span 新的功能 需要知道 Span 是 7.2 才有的功能,如果在正式项目使用,建议安装 Nuget 的方式

26420
来自专栏腾讯数据库技术

时间精度引起MySQL主从不一致问题剖析

1. 主从数据不一致          近日接报某实例一个datetime字段主从数据不一致,其它数据暂未发现异常。第一反应可能是人为修改,如果用户有高权限帐...

36820
来自专栏GIS讲堂

Arcgis API for Android之GPS定位

先说说写这篇文章的原因吧,在群内讨论的过程中,有人提到了定位的问题,刚好,自己以前在做相关工作的时候做过相关的东西,所以就总结一下,给大家共享出来,由于本人水平...

17330
来自专栏xingoo, 一个梦想做发明家的程序员

【插件开发】—— 9 编辑器代码分块着色-高亮显示!

前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 5 SWT简单控件的使用与布局搭...

30660
来自专栏walterlv - 吕毅的博客

.NET 中 GetProcess 相关方法的性能

2018-08-19 07:04

9430
来自专栏Golang语言社区

50. RESTful API的简单实现 | 厚土Go学习笔记

RESTfull API是现在很流行的 API 设计风格。众所周知的 HTTP 1.1规范正是基于 REST 架构风格的指导原理来设计的。需要注意的是,REST...

29740

扫码关注云+社区

领取腾讯云代金券