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

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

上图使用EasyUI生成的，静态HTML如下：

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3.     <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
  4.     <title>测试</title>
  5.     <link href="/jquery-easyui-1.3.0/themes/default/easyui.css" rel="stylesheet" type="text/css" />
  6.     <link href="/jquery-easyui-1.3.0/themes/default/easyui.css" rel="stylesheet" />
  7.     <script src="/jquery-easyui-1.3.0/jquery-1.7.2.min.js" type="text/javascript"></script>
  8.     <script src="/jquery-easyui-1.3.0/jquery.easyui.min.js" type="text/javascript"></script>
  9.     <link href="/jquery-easyui-1.3.0/themes/icon.css" rel="stylesheet" type="text/css" />
  10.     <style type="text/css">
  11.         body {
  12.             font: 12px/20px "微软雅黑", "宋体", Arial, sans-serif, Verdana, Tahoma;
  13.             padding: 0;
  14.             margin: 0;
  15.         }
  16.  
  17.         a:link {
  18.             text-decoration: none;
  19.         }
  20.  
  21.         a:visited {
  22.             text-decoration: none;
  23.         }
  24.  
  25.         a:hover {
  26.             text-decoration: underline;
  27.         }
  28.  
  29.         a:active {
  30.             text-decoration: none;
  31.         }
  32.  
  33.         .cs-north {
  34.             height: 60px;
  35.             background: #B3DFDA;
  36.         }
  37.  
  38.         .cs-north-bg {
  39.             width: 100%;
  40.             height: 100%;
  41.             background: url(~/jquery-easyui-1.3.0/themes/gray/images/header_bg.png) repeat-x;
  42.         }
  43.  
  44.         .cs-north-logo {
  45.             height: 40px;
  46.             padding: 15px 0px 0px 5px;
  47.             color: #fff;
  48.             font-size: 22px;
  49.             font-weight: bold;
  50.             text-decoration: none;
  51.         }
  52.  
  53.         .cs-west {
  54.             width: 200px;
  55.             padding: 0px;
  56.             border-left: 1px solid #99BBE8;
  57.         }
  58.  
  59.         .cs-south {
  60.             height: 25px;
  61.             background: url('~/jquery-easyui-1.3.0/themes/gray/images/panel_title.gif') repeat-x;
  62.             padding: 0px;
  63.             text-align: center;
  64.         }
  65.  
  66.         .cs-navi-tab {
  67.             padding: 5px;
  68.         }
  69.  
  70.         .cs-tab-menu {
  71.             width: 120px;
  72.         }
  73.  
  74.         .cs-home-remark {
  75.             padding: 10px;
  76.         }
  77.         /*以下为自定义样式，用于表单验证*/
  78.         .warn {
  79.             border-color: #f78d8d !important;
  80.             outline: 0 !important;
  81.             -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(239, 154, 154) !important;
  82.             box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(239, 154, 154) !important;
  83.         }
  84.  
  85.         .error {
  86.             color: red;
  87.             font-size: small;
  88.         }
  89.     </style>
  90.  
  91.     <style type="text/css">
  92.         .tree li {
  93.             margin-top: 4px;
  94.         }
  95.     </style>
  96. </head>
  97. <body>
  98.     <ul class="easyui-tree" id="Ul1" style="padding-left: 5px;">
  99.         <li>
  100.             <span>河南省</span>
  101.             <ul>
  102.  
  103.                 <li data-options="state:'open'">
  104.                     <span>商丘市</span>
  105.                     <ul>
  106.                         <li data-options="state:'open'">
  107.                             <span>永城市</span>
  108.                             <ul>
  109.                                 <li>
  110.                                     <span>
  111.                                         <label>薛湖镇</label>
  112.                                     </span>
  113.                                 </li>
  114.                                  <li>
  115.                                     <span>
  116.                                         <label>芒山镇</label>
  117.                                     </span>
  118.                                 </li>
  119.                                  <li>
  120.                                     <span>
  121.                                         <label>陈集镇</label>
  122.                                     </span>
  123.                                 </li>
  124.                             </ul>
  125.                         </li>
  126.                     </ul>
  127.                 </li>
  128.                  <li data-options="state:'open'">
  129.                     <span>洛阳市</span>
  130.                     <ul>
  131.                         <li data-options="state:'open'">
  132.                             <span>伊川县</span>
  133.                             <ul>
  134.                                 <li>
  135.                                     <span>
  136.                                         <label>太平镇</label>
  137.                                     </span>
  138.                                 </li>
  139.                                  <li>
  140.                                     <span>
  141.                                         <label>大留镇</label>
  142.                                     </span>
  143.                                 </li>
  144.                                  <li>
  145.                                     <span>
  146.                                         <label>小庙镇</label>
  147.                                     </span>
  148.                                 </li>
  149.                             </ul>
  150.                         </li>
  151.                     </ul>
  152.                 </li>
  153.             </ul>
  154.         </li>
  155.  
  156.          <li>
  157.             <span>江苏省</span>
  158.             <ul>
  159.  
  160.                 <li data-options="state:'open'">
  161.                     <span>苏州市</span>
  162.                     <ul>
  163.                         <li data-options="state:'open'">
  164.                             <span>张家港市</span>
  165.                             <ul>
  166.                                 <li>
  167.                                     <span>
  168.                                         <label>乐余镇</label>
  169.                                     </span>
  170.                                 </li>
  171.                                  <li>
  172.                                     <span>
  173.                                         <label>锦丰镇</label>
  174.                                     </span>
  175.                                 </li>
  176.                                  <li>
  177.                                     <span>
  178.                                         <label>兆丰镇</label>
  179.                                     </span>
  180.                                 </li>
  181.                             </ul>
  182.                         </li>
  183.                     </ul>
  184.                 </li>
  185.                  <li data-options="state:'open'">
  186.                     <span>常熟市</span>
  187.                     <ul>
  188.                         <li data-options="state:'open'">
  189.                             <span>长袖市</span>
  190.                             <ul>
  191.                                 <li>
  192.                                     <span>
  193.                                         <label>平镇</label>
  194.                                     </span>
  195.                                 </li>
  196.                                  <li>
  197.                                     <span>
  198.                                         <label>留镇</label>
  199.                                     </span>
  200.                                 </li>
  201.                                  <li>
  202.                                     <span>
  203.                                         <label>庙镇</label>
  204.                                     </span>
  205.                                 </li>
  206.                             </ul>
  207.                         </li>
  208.                     </ul>
  209.                 </li>
  210.             </ul>
  211.         </li>
  212.     </ul>
  213. </body>
  214. </html>

HTML代码仅供惨了，我们的重点的构造类似上图的JSON数据包。如何构造呢？

本篇利用LINQ结合数据库来构造这个JSON数据。

数据库部分如下：

  1. create table HelloChina
  2. (
  3. Id int identity(1,1) primary key,
  4. Province nvarchar(50),--省
  5. City  nvarchar(50),--市/区
  6. District nvarchar(50),--县/区
  7. OrgName nvarchar(50),--镇
  8. AddTime datetime default(getdate())
  9. )
  10.  
  11. insert into HelloChina(Province,City,District,OrgName) values('河南省','商丘市','永城市','薛湖镇')
  12. insert into HelloChina(Province,City,District,OrgName) values('河南省','商丘市','永城市','陈集镇')
  13. insert into HelloChina(Province,City,District,OrgName) values('河南省','商丘市','永城市','芒山镇')
  14.  
  15. insert into HelloChina(Province,City,District,OrgName) values('河南省','洛阳市','伊川县','太平镇')
  16. insert into HelloChina(Province,City,District,OrgName) values('河南省','洛阳市','伊川县','大留镇')
  17. insert into HelloChina(Province,City,District,OrgName) values('河南省','洛阳市','伊川县','小庙镇')
  18. insert into HelloChina(Province,City,District,OrgName) values('河南省','平顶山市','鲁山县','炉山镇')
  19. insert into HelloChina(Province,City,District,OrgName) values('河南省','平顶山市','平川市','大茂镇')
  20.  
  21. insert into HelloChina(Province,City,District,OrgName) values('江苏省','苏州市','张家港市','大学镇')
  22. insert into HelloChina(Province,City,District,OrgName) values('江苏省','苏州市','常熟市','小雪镇')
  23. insert into HelloChina(Province,City,District,OrgName) values('江苏省','南京市','南水市','高中镇')
  24. insert into HelloChina(Province,City,District,OrgName) values('江苏省','南京市','吴中市','初中镇')
  25.  
  26. insert into HelloChina(Province,City,District,OrgName) values('安徽省','合肥市','肥水县','沸水镇')
  27. insert into HelloChina(Province,City,District,OrgName) values('安徽省','合肥市','肥水县','肥牛镇')
  28. insert into HelloChina(Province,City,District,OrgName) values('安徽省','南京市','京东县','羊羔镇')
  29.  
  30. insert into HelloChina(Province,City,District,OrgName) values('山东省','临沂市','莒南县','老仆镇')

C#实体Model如下：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  6.  
  7. namespace AnBang.Model
  8. {
  9.     public class BureauMenuModel_P
  10.     {
  11.         public string Province { get; set; }
  12.         public List<BureauMenuModel_C> nodes { get; set; }
  13.     }
  14.  
  15.     public class BureauMenuModel_C
  16.     {
  17.         public string City { get; set; }
  18.         public List<BureauMenuModel_D> nodes { get; set; }
  19.     }
  20.  
  21.     public class BureauMenuModel_D
  22.     {
  23.  
  24.         public string District { get; set; }
  25.         public List<BureauMenuModel_O> nodes { get; set; }
  26.     }
  27.  
  28.     public class BureauMenuModel_O
  29.     {
  30.         public string OrgName { get; set; }
  31.     }
  32.  
  33.     public class ResultModel
  34.     {
  35.         public List<BureauMenuModel_P> Json { get; set; }
  36.         public string GroupName { get; set; }
  37.     }
  38.  
  39.     public partial class HelloChinaModel
  40.     {
  41.         public int Id { get; set; }
  42.         public string Province { get; set; }
  43.         public string City { get; set; }
  44.         public string District { get; set; }
  45.         public string OrgName { get; set; }
  46.         public Nullable<System.DateTime> AddTime { get; set; }
  47.     }
  48. }

根据各个层次的划分，我们的各个 Model 之间也一定要存在这种层次关系！

下面就是具体的实现：

思路分析：依次分组划分，然后依次构造。

时间不多，不作讲解，代码如下：

  1.         public BaseResponse<ResultModel> GetJson()
  2.         {
  3.             using (AnbSosCustomerEntities context = new AnbSosCustomerEntities())
  4.             {
  5.                 BaseResponse<ResultModel> response = new BaseResponse<ResultModel>();
  6.                 List<BureauMenuModel_P> MenuModelList = new List<BureauMenuModel_P>();
  7.                 //
  8.                 List<HelloChinaModel> MList = new List<HelloChinaModel>();
  9.                 var Hello = context.HelloChina;
  10.                 var Query = from Org in Hello
  11.                             select Org;
  12.                 if (Query.Count() > )
  13.                 {
  14.                     var data = Query.ToList();
  15.  
  16.                     MList = Mapper.DynamicMap<List<HelloChinaModel>>(data);
  17.                 }
  18.                 //根据省份 分组
  19.                 var P_ls = MList.GroupBy(a => a.Province).Select(g => (new { Province = g.Key, Citys = g })).ToList();
  20.                 foreach (var item in P_ls)
  21.                 {
  22.                     BureauMenuModel_P P = new BureauMenuModel_P();
  23.                     P.Province = item.Province;
  24.                     P.nodes = new List<BureauMenuModel_C>();
  25.                     var CityList = item.Citys.GroupBy(a => a.City).Select(g => new { City = g.Key, Districts = g }).ToList();
  26.                     foreach (var CItem in CityList)
  27.                     {
  28.                         BureauMenuModel_C C = new BureauMenuModel_C();
  29.                         C.City = CItem.City;
  30.                         C.nodes = new List<BureauMenuModel_D>();
  31.                         var Districts = CItem.Districts.GroupBy(a => a.District).Select(g => new { District = g.Key, Orgs = g }).ToList();
  32.                         foreach (var DistrictItem in Districts)
  33.                         {
  34.                             BureauMenuModel_D D = new BureauMenuModel_D();
  35.                             D.nodes = new List<BureauMenuModel_O>();
  36.                             D.District = DistrictItem.District;
  37.                             C.nodes = new List<BureauMenuModel_D>();
  38.                             var orgs = DistrictItem.Orgs.ToList();
  39.                             foreach (var org in orgs)
  40.                             {
  41.                                 BureauMenuModel_O O = new BureauMenuModel_O();
  42.                                 O.OrgName = org.OrgName;
  43.                                 D.nodes.Add(O);
  44.  
  45.                             }
  46.                             C.nodes.Add(D);
  47.                         }
  48.                         P.nodes.Add(C);
  49.                     }
  50.                     MenuModelList.Add(P);
  51.  
  52.                 }
  53.  
  54.                 //string Json = JsonConvert.SerializeObject(MenuModelList); ;
  55.                 response.Data = new ResultModel();
  56.                 response.Data.Json = MenuModelList;
  57.                 return response;
  58.             }
  59.         }

前端调用代码如下：

  1.         IBase Implement = new BaseImplement();
  2.         protected void Page_Load(object sender, EventArgs e)
  3.         {
  4.             List<BureauMenuModel_P> MenuModelList = new List<BureauMenuModel_P>();
  5.             if (Implement.GetJson().Data.Json != null)
  6.             {
  7.                 MenuModelList = Implement.GetJson().Data.Json;
  8.             }
  9.             string Json = JsonConvert.SerializeObject(MenuModelList );
  10.             Response.Write(Json);
  11.         }

得到的JSON数据如下：

  1. [
  2.     {
  3.         "Province": "河南省",
  4.         "nodes": [
  5.             {
  6.                 "City": "商丘市",
  7.                 "nodes": [
  8.                     {
  9.                         "District": "永城市",
  10.                         "nodes": [
  11.                             {
  12.                                 "OrgName": "薛湖镇"
  13.                             },
  14.                             {
  15.                                 "OrgName": "陈集镇"
  16.                             },
  17.                             {
  18.                                 "OrgName": "芒山镇"
  19.                             }
  20.                         ]
  21.                     }
  22.                 ]
  23.             },
  24.             {
  25.                 "City": "洛阳市",
  26.                 "nodes": [
  27.                     {
  28.                         "District": "伊川县",
  29.                         "nodes": [
  30.                             {
  31.                                 "OrgName": "太平镇"
  32.                             },
  33.                             {
  34.                                 "OrgName": "大留镇"
  35.                             },
  36.                             {
  37.                                 "OrgName": "小庙镇"
  38.                             }
  39.                         ]
  40.                     }
  41.                 ]
  42.             },
  43.             {
  44.                 "City": "平顶山市",
  45.                 "nodes": [
  46.                     {
  47.                         "District": "平川市",
  48.                         "nodes": [
  49.                             {
  50.                                 "OrgName": "大茂镇"
  51.                             }
  52.                         ]
  53.                     }
  54.                 ]
  55.             }
  56.         ]
  57.     },
  58.     {
  59.         "Province": "江苏省",
  60.         "nodes": [
  61.             {
  62.                 "City": "苏州市",
  63.                 "nodes": [
  64.                     {
  65.                         "District": "常熟市",
  66.                         "nodes": [
  67.                             {
  68.                                 "OrgName": "小雪镇"
  69.                             }
  70.                         ]
  71.                     }
  72.                 ]
  73.             },
  74.             {
  75.                 "City": "南京市",
  76.                 "nodes": [
  77.                     {
  78.                         "District": "吴中市",
  79.                         "nodes": [
  80.                             {
  81.                                 "OrgName": "初中镇"
  82.                             }
  83.                         ]
  84.                     }
  85.                 ]
  86.             }
  87.         ]
  88.     },
  89.     {
  90.         "Province": "安徽省",
  91.         "nodes": [
  92.             {
  93.                 "City": "合肥市",
  94.                 "nodes": [
  95.                     {
  96.                         "District": "肥水县",
  97.                         "nodes": [
  98.                             {
  99.                                 "OrgName": "沸水镇"
  100.                             },
  101.                             {
  102.                                 "OrgName": "肥牛镇"
  103.                             }
  104.                         ]
  105.                     }
  106.                 ]
  107.             },
  108.             {
  109.                 "City": "南京市",
  110.                 "nodes": [
  111.                     {
  112.                         "District": "京东县",
  113.                         "nodes": [
  114.                             {
  115.                                 "OrgName": "羊羔镇"
  116.                             }
  117.                         ]
  118.                     }
  119.                 ]
  120.             }
  121.         ]
  122.     },
  123.     {
  124.         "Province": "山东省",
  125.         "nodes": [
  126.             {
  127.                 "City": "临沂市",
  128.                 "nodes": [
  129.                     {
  130.                         "District": "莒南县",
  131.                         "nodes": [
  132.                             {
  133.                                 "OrgName": "老仆镇"
  134.                             }
  135.                         ]
  136.                     }
  137.                 ]
  138.             }
  139.         ]
  140.     }
  141. ]

有人会问我，安徽省为什么有个南京市，我想说：数据库数据我是随便写的，不要介意哦！

@陈卧龙的博客

如何构造分层次的 Json 数据的更多相关文章

  1. 如何构造树状 JSON 数据 JSON-Tree

    十年河东,十年河西,莫欺骚年穷...打错一个字哈.~_~ 接着上一篇博客,上一篇博客是=使用数据库结合LINQ构造的,为了方便理解,本篇采用泛型分组进行构造. 有兴趣的小虎斑可以参考上一篇博客:如何构 ...

  2. Java构造和解析Json数据的两种方法详解二

    在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Jso ...

  3. Java构造和解析Json数据的两种方法详解一

    一.介绍 JSON-lib包是一个beans,collections,maps,java arrays 和XML和JSON互相转换的包,主要就是用来解析Json数据,在其官网http://www.js ...

  4. 反面教材 构造构造 json 数据

    构造构造 json 数据 说说你们在项目中遇到过的最糟糕的代码 - V2EX https://www.v2ex.com/t/214099

  5. 自己构造用于异步请求的JSON数据

    有时候.serialize()或者.serializeJSON()莫名其妙的不能按照我们的要求将数据序列化. 或者其他什么问题然我们需要自己惊醒JSON数据的构造.因为js对JSON的支持做的比较好, ...

  6. Java构造和解析Json数据的两种方法详解二——org.json

    转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html 在www.json.org上公布了很多JAVA下的jso ...

  7. Java构造和解析Json数据的两种方法详解一——json-lib

    转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/23/3096001.html 在www.json.org上公布了很多JAVA下的jso ...

  8. ajax 请求json数据中json对象的构造获取问题

    前端的界面中,我想通过ajax来调用写好的json数据,并调用add(data)方法进行解析,请求如下: json数据如下: { “type”:"qqq", "lat&q ...

  9. Salesforce Apex 使用JSON数据的示例程序

    本文介绍了一个在Salesforce Apex中使用JSON数据的示例程序, 该示例程序由以下几部分组成: 1) Album.cls, 定了了封装相关字段的数据Model类 2) RestClient ...

随机推荐

  1. 小程序 青少儿书画 利用engineercms作为服务端

    因为很多妈咪们喜欢发布自己宝宝的作品,享受哪些美好时刻,记录亲子创作过程. 为了方便妈咪们展示亲子创作,比如宝宝们画作,涂鸦,书法,作文,其他才艺,特利用engineercms作为服务端,重新设计了一 ...

  2. 进程管理-PV操作

    1.临界资源:诸进程需要互斥方式对其进行共享的资源. 2.临界区:每个进程中访问临界资源的那段代码. 3.信号量:一种特殊的变量.

  3. 【HANA系列】SAP HANA XS使用Data Services查询CDS实体【二】

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Dat ...

  4. 【PAT】B1041 考试座位号（15 分）

    /* */ #include<stdio.h> #include<algorithm> using namespace std; struct stu{ char number ...

  5. 用python写个简单的小程序，编译成exe跑在win10上

    每天的工作其实很无聊,早知道应该去IT公司闯荡的.最近的工作内容是每逢一个整点,从早7点到晚11点,去查一次客流数据,整理到表格中,上交给素未蒙面的上线,由他呈交领导查阅. 人的精力毕竟是有限的,所以 ...

  6. <!DOCTYPE>标签与table高度100% （转）

    <!DOCTYPE>标签可声明三种DTD类型,分别表示严格版本.过渡版本以及基于框架的 HTML 文档. 三种HTML文档类型: HTML 4.01 规定了三种文档类型:Strict.Tr ...

  7. IntelliJ IDEA 项目结构旁边出现 0%classes,0% lines covered

    不知道一不小心点到哪里,项目变成如下形式 使用ctrl +  Alt + F6弹出如下框,取消勾选-->点击Show Selected就可以去掉了 官网解释

  8. java调用Linux执行Python爬虫，并将数据存储到elasticsearch中--（java后台代码）

    该篇博客主要是java代码,如需相应脚本及java连接elasticsearch工具类代码,请移步到上一篇博客(https://www.cnblogs.com/chenyuanbo/p/9973685 ...

  9. 4、爬虫之mongodb

    mongodb 简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品 ...

  10. web机试

    测试: <html><style> </style><title>Demo</title> <body><div > ...