EasyUI遇见的坑。

昨天，需要对多级分类做优化，在网上找了很久也不知道用什么控件来做，后台经同学指教，选择easyui控件的树形网格。

于是查阅了官方文档至此开始入坑：

清单1：

　　官方效果图

　　

 清单2：

　　引入js，css

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resource/jquery-easyui-1.3.4/themes/default/easyui.css">
    <script type="text/javascript" src="<%=request.getContextPath()%>/resource/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/resource/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>

清单3：

　　用法

<!--方式一-->

<table id="tt" class="easyui-treegrid"
       data-options="idField:'id',treeField:'name'">
    <thead>
    <tr>
        <th data-options="field:'name',180,align:'left'">名称</th>
        <th data-options="field:'code',180,align:'left'">编码</th>
        <th data-options="field:'order',180,align:'left'">顺序</th>
        <th data-options="field:'isShow',180,align:'left'">是否在导航条显示</th>
        <th data-options="field:'goodsNum',180,align:'left'">商品数量</th>
    </tr>
    </thead>
</table>

<!--方式二-->
<table id="tt"></table>

<script type="text/javascript">
// 列表头
    var treeColumn = [[
        {field:'_parentId',title:'_parentId',align:'left',180},
        {field:'id',title:'id',align:'left',180},
        {field:'name',title:'名称',align:'left',180},
        {field:'code',title:'编码',align:'left',180},
        {field:'order',title:'顺序',align:'left',180},
        {field:'isShow',title:'是否在导航条显示',align:'left',180},
        {field:'goodsNum',title:'商品数量',align:'left',180}
    ]];

    // 测试失败数据
    var rows =
        [
            {"_parentId":1,"checked":false,"code":"GT142308","goodsNum":0,"iconCls":"","id":16,"isShow":"0","name":"1234","order":"12","state":"open"},
            {"_parentId":1,"checked":false,"code":"GT141812","goodsNum":0,"iconCls":"","id":15,"isShow":"0","name":"t111","order":"3","state":"open"},
            {"_parentId":1,"checked":false,"code":"GT147418","goodsNum":0,"iconCls":"","id":14,"isShow":"0","name":"t111","order":"3","state":"open"},
            {"_parentId":1,"checked":false,"code":"GT147391","goodsNum":0,"iconCls":"","id":13,"isShow":"0","name":"t111","order":"3","state":"open"},
            {"_parentId":0,"checked":false,"code":"GT137395","goodsNum":0,"iconCls":"","id":7,"isShow":"0","name":"type3","order":"3","state":"open"},
            {"_parentId":2,"checked":false,"code":"GT137396","goodsNum":6,"iconCls":"","id":6,"isShow":"0","name":"mmm","order":"1","state":"open"},
            {"_parentId":0,"checked":false,"code":"GT137392","goodsNum":3,"iconCls":"","id":2,"isShow":"1","name":"type2","order":"1","state":"open"},
            {"_parentId":2,"checked":false,"code":"GT137393","goodsNum":0,"iconCls":"","id":3,"isShow":"0","name":"sfss","order":"1","state":"open"},
            {"_parentId":0,"checked":false,"code":"GT137391","goodsNum":2,"iconCls":"","id":1,"isShow":"0","name":"type1","order":"0","state":"open"},
            {"_parentId":1,"checked":false,"code":"GT137394","goodsNum":3,"iconCls":"","id":5,"isShow":"0","name":"type111001","order":"0","state":"open"}
        ];

    // 测试成功数据
    var row2 = {"rows":[
            {"_parentId":1,"checked":false,"code":"GT142308","goodsNum":0,"iconCls":"","id":16,"isShow":"0","name":"1234","order":"12","state":"open"},
            {"_parentId":1,"checked":false,"code":"GT141812","goodsNum":0,"iconCls":"","id":15,"isShow":"0","name":"t111","order":"3","state":"open"},
            {"_parentId":1,"checked":false,"code":"GT147418","goodsNum":0,"iconCls":"","id":14,"isShow":"0","name":"t111","order":"3","state":"open"},
            {"_parentId":1,"checked":false,"code":"GT147391","goodsNum":0,"iconCls":"","id":13,"isShow":"0","name":"t111","order":"3","state":"open"},
            {"_parentId":0,"checked":false,"code":"GT137395","goodsNum":0,"iconCls":"","id":7,"isShow":"0","name":"type3","order":"3","state":"open"},
            {"_parentId":2,"checked":false,"code":"GT137396","goodsNum":6,"iconCls":"","id":6,"isShow":"0","name":"mmm","order":"1","state":"open"},
            {"_parentId":0,"checked":false,"code":"GT137392","goodsNum":3,"iconCls":"","id":2,"isShow":"1","name":"type2","order":"1","state":"open"},
            {"_parentId":2,"checked":false,"code":"GT137393","goodsNum":0,"iconCls":"","id":3,"isShow":"0","name":"sfss","order":"1","state":"open"},
            {"_parentId":0,"checked":false,"code":"GT137391","goodsNum":2,"iconCls":"","id":1,"isShow":"0","name":"type1","order":"0","state":"open"},
            {"_parentId":1,"checked":false,"code":"GT137394","goodsNum":3,"iconCls":"","id":5,"isShow":"0","name":"type111001","order":"0","state":"open"}
        ]};

    $('#tt').treegrid({
        // url:'goodsType!getGoodsTypeMenus.action',
        idField:'id',
        treeField:'name',
         "auto",
        loadMsg: "加载中......",
        columns: treeColumn
        ,data: row2
    });
</script>

这里我使用的js脚本方式创建的树形网格，其中_parentId 必须有。

之前我一直使用 rows 数据进行构建：

 然后一直检查数据以及对应属性是否写错了，因为没有错误原因，找了很久也没发现究竟错在哪里。然后偶然的我想把 _parentId显示出来， 发现定义的变量有值但是显示却是没值，接着让我怀疑是不是我定义的数据格式有问题。

 查阅了一下网上提供的数据是：

{"total":7,"rows":[
{"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":60,"iconCls":"icon-ok"},
{"id":2,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":100,"_parentId":1,"state":"closed"},
{"id":21,"name":"Database","persons":2,"begin":"3/4/2010","end":"3/6/2010","progress":100,"_parentId":2},
{"id":22,"name":"UML","persons":1,"begin":"3/7/2010","end":"3/8/2010","progress":100,"_parentId":2},
{"id":23,"name":"Export Document","persons":1,"begin":"3/9/2010","end":"3/10/2010","progress":100,"_parentId":2},
{"id":3,"name":"Coding","persons":2,"begin":"3/11/2010","end":"3/18/2010","progress":80},
{"id":4,"name":"Testing","persons":1,"begin":"3/19/2010","end":"3/20/2010","progress":20}
],"footer":[
{"name":"Total Persons:","persons":7,"iconCls":"icon-sum"}
]}

上面的json格式可以不需要 total，footer  但是必须保留rows，对比了一下就是少一个 rows属性。