easy_ui之创建树(二)

如我在左侧创建一个树形菜单:可以有如下几种方式:
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 >


猜你喜欢

转载自blog.csdn.net/sj0613xz/article/details/78892388