因项目需求，要实现tree结构显示数据，没法，只能硬上了。但有懒写CSS样式，同事推荐用easyui. 网络搜索，下载看看先。http://www.jeasyui.com/
果然和我想的一样，不是咱国民做的。
国人的创新都去哪了。
《---------------------------------------------------------------------------------》
我就不吐槽了。继续谈我们的
编程都懂英文吧，自己不懂的问你家邻居。功能很强大，随用随知道。我今天主要用Tree.
先看看效果图
我这是用中国城市表做的测试。多级绑定。可以无限制的分级。只要你不嫌卡。---------------> what? 卡？ 废话，你绑定那么多数据，不卡才怪。
一、 先看前台页面：
引入js,css.你懂的。
|
1
2
3
4
5
6
|
<link rel=
"stylesheet"
type=
"text/css"
href=
"CSS/themes/default/easyui.css"
/>
<link rel=
"stylesheet"
type=
"text/css"
href=
"CSS/themes/icon.css"
/>
<script type=
"text/javascript"
src=
"JS/jquery-1.8.0.min.js"
></script>
<script type=
"text/javascript"
src=
"JS/jquery.easyui.min.js"
></script>
<script type=
"text/javascript"
src=
"JS/ajax.js"
></script>
<script type=
"text/javascript"
src=
"JS/CreateTree.js"
></script>
|
页面内容
|
1
2
3
|
<body onload=
"GetTreeData()"
>
<ul id=
"ttree"
></ul>
</body>
|
O><O 一段ul 就可以？？，，，，。。这就是工具的好处。简单迅速。工具决定效率。
二、 js 部分
CreateTree.js 是我自己写的js. 不想在html 页面上写。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function
GetTreeData()
{
$(
'#ttree'
).tree({
url:
'Ashx/Handler6.ashx'
,
loadFilter:
function
(data)
{
if
(data.d)
{
return
data.d;
}
else
{
return
data;
}
}
});
｝
|
如你所见。我用是ashx 一般处理程序。其实用啥都一样，只要返回对象是json对象就可以了。( 啥是json??)..
三、 后台代码
|
1
2
3
4
5
6
7
8
|
DataSet ds = DataHelper();
if
(ds !=
null
&& ds.Tables.Count > 0)
{
DataTable dt = ds.Tables[0];
stringbuilder.Append(GetDataString(dt,
"0"
));
stringbuilder = stringbuilder.Remove(stringbuilder.Length - 2, 2);
}
context.Response.Write(stringbuilder.ToString());
|
GetDataString方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
public
string
GetDataString(DataTable dt,
string
id)
{
StringBuilder stringbuilder =
new
StringBuilder();
DataRow[] CRow = dt.Select(
"City_ParId="
+id);
if
(CRow.Length > 0)
{
stringbuilder.Append(
"["
);
for
(
int
i = 0; i < CRow.Length; i++)
{
string
chidstring=GetDataString(dt, CRow[i][
"City_Id"
].ToString());
if
(!
string
.IsNullOrEmpty(chidstring))
{
stringbuilder.Append(
"{ \"id\":\""
+ CRow[i][
"City_Id"
].ToString() +
"\",\"text\":\""
+ CRow[i][
"City_Name"
].ToString() +
"\",\"state\":\"closed\",\"children\":"
);
stringbuilder.Append(chidstring);
}
else
{
if
(
int
.Parse(CRow[i][
"City_Id"
].ToString()) % 2 == 0)
{
stringbuilder.Append(
"{\"id\":\""
+ CRow[i][
"City_Id"
].ToString() +
"\",\"text\":\"<span style='color:red'>"
+ CRow[i][
"City_Name"
].ToString() +
"</span>\"},"
);
}
else
{
stringbuilder.Append(
"{\"id\":\""
+ CRow[i][
"City_Id"
].ToString() +
"\",\"text\":\""
+ CRow[i][
"City_Name"
].ToString() +
"\"},"
);
}
}
}
stringbuilder.Replace(
','
,
' '
, stringbuilder.Length - 1, 1);
stringbuilder.Append(
"]},"
);
}
return
stringbuilder.ToString();
}
|
我这是完成拼接。 按照官网给的实例写的样式。为啥？？因为这样正确。
这是官网上给的 ，看看
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
[{
"id"
:
1
,
"text"
:
"Folder1"
,
"iconCls"
:
"icon-ok"
,
"children"
:[{
"id"
:
2
,
"text"
:
"File1"
,
"checked"
:
true
},{
"id"
:
3
,
"text"
:
"Folder2"
,
"state"
:
"open"
,
"children"
:[{
"id"
:
4
,
"text"
:
"File2"
,
"attributes"
:{
"p1"
:
"value1"
,
"p2"
:
"value2"
},
"checked"
:
true
,
"iconCls"
:
"icon-reload"
},{
"id"
:
8
,
"text"
:
"Folder3"
,
"state"
:
"closed"
,
"children"
:[{
"id"
:
9
,
"text"
:
"File31"
},{
"id"
:
10
,
"text"
:
"File32"
}]
}]
}]
},{
"text"
:
"Languages"
,
"state"
:
"closed"
,
"children"
:[{
"id"
:
"j1"
,
"text"
:
"Java"
},{
"id"
:
"j2"
,
"text"
:
"C#"
}]
}]
|
基本就这。so easy..当然也可以加其他东西的。添加个右击啥的。
很简单。看实例。比这改改就可以了。因时间问题我写的有些简单。愿大家见谅。
我的百度博客 http://hi.baidu.com/flyredfly/item/f87b923e1ae3d683c3cf29e4
扫一扫
1721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
