十年河东,十年河西,莫欺骚年穷...打错个字~_~
现有如下需求,构造分层次的Json数据,层次结构类似下图:
上图使用EasyUI生成的,静态HTML如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>测试</title> <link href="/jquery-easyui-1.3.0/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="/jquery-easyui-1.3.0/themes/default/easyui.css" rel="stylesheet" /> <script src="/jquery-easyui-1.3.0/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="/jquery-easyui-1.3.0/jquery.easyui.min.js" type="text/javascript"></script> <link href="/jquery-easyui-1.3.0/themes/icon.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { font: 12px/20px "微软雅黑", "宋体", Arial, sans-serif, Verdana, Tahoma; padding: 0; margin: 0; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: none; } .cs-north { height: 60px; background: #B3DFDA; } .cs-north-bg { width: 100%; height: 100%; background: url(~/jquery-easyui-1.3.0/themes/gray/images/header_bg.png) repeat-x; } .cs-north-logo { height: 40px; padding: 15px 0px 0px 5px; color: #fff; font-size: 22px; font-weight: bold; text-decoration: none; } .cs-west { width: 200px; padding: 0px; border-left: 1px solid #99BBE8; } .cs-south { height: 25px; background: url('~/jquery-easyui-1.3.0/themes/gray/images/panel_title.gif') repeat-x; padding: 0px; text-align: center; } .cs-navi-tab { padding: 5px; } .cs-tab-menu { width: 120px; } .cs-home-remark { padding: 10px; } /*以下为自定义样式,用于表单验证*/ .warn { border-color: #f78d8d !important; outline: 0 !important; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(239, 154, 154) !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(239, 154, 154) !important; } .error { color: red; font-size: small; } </style> <style type="text/css"> .tree li { margin-top: 4px; } </style> </head> <body> <ul class="easyui-tree" id="Ul1" style="padding-left: 5px;"> <li> <span>河南省</span> <ul> <li data-options="state:'open'"> <span>商丘市</span> <ul> <li data-options="state:'open'"> <span>永城市</span> <ul> <li> <span> <label>薛湖镇</label> </span> </li> <li> <span> <label>芒山镇</label> </span> </li> <li> <span> <label>陈集镇</label> </span> </li> </ul> </li> </ul> </li> <li data-options="state:'open'"> <span>洛阳市</span> <ul> <li data-options="state:'open'"> <span>伊川县</span> <ul> <li> <span> <label>太平镇</label> </span> </li> <li> <span> <label>大留镇</label> </span> </li> <li> <span> <label>小庙镇</label> </span> </li> </ul> </li> </ul> </li> </ul> </li> <li> <span>江苏省</span> <ul> <li data-options="state:'open'"> <span>苏州市</span> <ul> <li data-options="state:'open'"> <span>张家港市</span> <ul> <li> <span> <label>乐余镇</label> </span> </li> <li> <span> <label>锦丰镇</label> </span> </li> <li> <span> <label>兆丰镇</label> </span> </li> </ul> </li> </ul> </li> <li data-options="state:'open'"> <span>常熟市</span> <ul> <li data-options="state:'open'"> <span>长袖市</span> <ul> <li> <span> <label>平镇</label> </span> </li> <li> <span> <label>留镇</label> </span> </li> <li> <span> <label>庙镇</label> </span> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </body> </html>