如我在左侧创建一个树形菜单:可以有如下几种方式:
1、利用<ul>和<li>创建静态的树:
在上篇文档创建的后台页面基础上添上:
<
ul
class
=
"easyui-tree"
>
<
li
>
<
span
>
Folder
</
span
>
<
ul
>
<
li
>
<
span
>
Sub Folder 1
</
span
>
<
ul
>
<
li
><
span
>
File 11
</
span
></
li
>
<
li
><
span
>
File 12
</
span
></
li
>
<
li
><
span
>
File 13
</
span
></
li
>
</
ul
>
</
li
>
<
li
><
span
>
File 2
</
span
></
li
>
<
li
><
span
>
File 3
</
span
></
li
>
</
ul
>
</
li
>
<
li
><
span
>
File21
</
span
></
li
>
</
ul
>
即homePage.jsp变为:
<%@
page
language
=
"java"
contentType
=
"text/html; charset=UTF-8"
pageEncoding
=
"UTF-8"
%>
<%@
include
file
=
"/common/head.jsp"
%>
<
html
>
<
head
>
<
title
>
我的简单的easy_ui测试
</
title
>
<
style
type
=
"text/css"
>
body
{
font-family
:
microsoft yahei
;
}
</
style
>
</
head
>
<
body
class
=
"easyui-layout"
style
="
background-color
:
#1D5D9C
"
data-options
=
"fit:true"
>
<
div
region
=
"north"
style
="
height
:
78px
;
background-color
:
#1D5D9C
"
>
</
div
>
<
div
region
=
"west"
style
="
width
:
200px
;
left
:
20px
;
background-color
:
#E4EEFC
"
split
=
"true"
>
<
ul
class
=
"easyui-tree"
>
<
li
>
<
span
>
Folder
</
span
>
<
ul
>
<
li
>
<
span
>
Sub Folder 1
</
span
>
<
ul
>
<
li
><
span
>
File 11
</
span
></
li
>
<
li
><
span
>
File 12
</
span
></
li
>
<
li
><
span
>
File 13
</
span
></
li
>
</
ul
>
</
li
>
<
li
><
span
>
File 2
</
span
></
li
>
<
li
><
span
>
File 3
</
span
></
li
>
</
ul
>
</
li
>
<
li
><
span
>
File21
</
span
></
li
>
</
ul
>
</
div
>
<
div
data-options
=
"region:'center'"
style
="
background
:
#87E2D1
;"
>
</
div
>
<
div
region
=
"south"
style
="
height
:
25px
;
padding
:
5px
"
align
=
"center"
>
</
div
>
</
body
>
</
html
>