因項目需求，要實現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