十年河东,十年河西,莫欺骚年穷...打错个字~_~

现有如下需求,构造分层次的Json数据,层次结构类似下图:

如何构造分层次的 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>
View Code

相关文章: