功能节点的数据结构和页面展示。 用CSS来体现大模块、小模块的效果。 用js来实现展开和收拢。 用js来修改div的Class,以达到鼠标跟随和鼠标单击(选中节点)的效果。
目录
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("");
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、 onm ouseout 事件,然后在事件里面修改div的Class就可以了。
Code
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级分类
加一个“编号”
我的树
功能演示
新闻管理
员工管理