好大一棵树，新春的祝福（二）：功能节点的数据结构和页面展示

最新推荐文章于 2021-07-21 09:22:49 发布

自然框架

最新推荐文章于 2021-07-21 09:22:49 发布

阅读量998

点赞数

CC 4.0 BY-SA版权

分类专栏：通用权限文章标签：数据结构 tree css border function 脚本

本文链接：https://blog.youkuaiyun.com/jyk/article/details/4611657

通用权限专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种改进的树状结构数据展示方法，通过优化数据结构、利用Repeater结合CSS和JS实现美观且交互丰富的树状菜单。文章详细阐述了数据提取、前端展示及交互效果的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、n级分类的数据结构

2、我的树的数据结构和页面展现

3、在权限方面的应用

上一篇说了一下基本的n级分类的数据结构，最后提出了几个缺点，但是却没有给出修改方法，所以呢现在继续。

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的代码】

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