jquery easyui：EasyUI Treegrid 树形网格

用jquery easyui 的 Treegrid 树形网格 进行数据展示，不过官网的API 和 demo 让我愣了好久，摸索后整理出来供大家详细参看。 
jquery easyui 官网：http://www.jeasyui.net/plugins/186.html 
      下面以城市为例子，先展示最终效果图 

第一步：引入JS和CSS

<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

• 1
• 2
• 3
• 4
• 5

第二步：使用 javascript 创建树形网格（treegrid）。（喜欢用HTML的人可以替换）

<table id="tt"></table>

• 1

因为为了详细讲解下，就用自己的字段信息参数不用demo

$(function(){
    $('#tt').treegrid({
        url:'${pageContext.request.contextPath}/city/getCityList',
        method:'post',          //请求方式
        idField:'id',           //定义标识树节点的键名字段
        treeField:'name',       //定义树节点的字段
        fit:true,               //网格自动撑满
        fitColumns:true,        //设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
        columns:[[
            {field:'name',title:'名称',width:100},
            {field:'_parentId',title:'所属父级',width:100},
        ]]
    });
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

idField ：一般定义成主键就可以 
treeField：是指定那列要展示成树形 
左边是以“name”定义，右边是以“_parentId”定义 
      

第三步：定义实体类 

红色框内是easyui-tree 自带的属性值，也是效果的主要展示

_parentId （必须）：记得前面有“_” ，他是用来记录父级节点，没有这个属性，是没法展示父级节点
其次就是这个父级节点必须存在，不然信息也是展示不出来，在后台遍历组合的时候，如果父级节点不存在或为0时，此时 _parentId 应该不赋值。如果赋值 “0” 则显示不出来
state：是否展开
checked：是否选中（用于复选框）
iconCls：选项前面的图标，如果自己不设定，父级节点默认为文件夹图标，子级节点为文件图标

• 1
• 2
• 3
• 4
• 5

其他属性字段可自行添加。

easyui-treegrid 拼接数据格式展示

{
    "total": 25,
    "rows": [
        {
            "id": 1,"name": "全国",
            "_parentId": null,            //没有对应的父级节点为null
            "state": "closed",
            "iconCls": "icon-city",
            "checked": false
        },
        {
            "id": 2,
            "name": "北京市",
            "_parentId": 1,               //对应的父级节点
            "state": "closed",
            "iconCls": "icon-city",
            "checked": false
        }
    ]
}