Asp.net MVC 中使用easyui treegrid

                                                  

使用asp.net mvc 4+ mongodb做个小型系统，因此使用easyui各个控件，datagrid,properygrid都是根据official site demo走得很顺利，结果用treegrid时，十来个小时都没有成功。

最终是成功了，尽管项目还没做完（熬夜night and night之中），但是这个血泪过程还是在此跟大家share一下，希望有遇到类似问题的朋友可以省点时间。

使html 来设置 data-options方式：

<table id="tt" style="width:90%;height:400px"

       data-options="idField:'id',treeField:'name'"></table>

 

官网的数据：

var jdata = {

                "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 }

                ]

            };

 

$('#tt').treegrid('loadData',jdata);

会有以下错误：

Uncaught TypeError: Cannot read property 'options' ofundefined；

使用js来指定data-option:

<table id="tt" style="width:90%;height:400px"></table>

         var jdata = {

                "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 }

                ]

            };

 

            $('#tt').treegrid({

                data: jdata,

                idField: 'id',

                treeField: 'name',

                columns: [[

                    { title: 'Task Name', field:'name', width: 180 },

                    { field: 'progress', title:'Persons', width: 60, align: 'right' },

                    { field: 'begin', title:'Begin Date', width: 80 },

                    { field: 'end', title: 'End Date', width: 80 }

                ]]

            });

 

这个方式是可以的：

但是我走到这个可以的方式并不是很顺利的。

网上有类似的错误，并解决了，但是那些解决方案在我这里基本没有用，我最终是通过以js来设置data-option成功绑定后台数据的，我个总结错误原因如下：

1,data-option设置的方式，

使用html添加data-option及js指定data-option两种方式应该都有一定规则，至于什么规则，我也搞不清，而且easyui版本不同，可能有所区别。

2，Json数据格式：

成功绑定的json数据官网上给出两种，如果是指定通过_parentId来实现树型结构的,root结节一定不要有_parentId属性，有些博客说可以指定_parentId=0（我真的怀疑，这浪费我太多时间了），反正在1.45及1.51的版本都验证过，不可以，它会导致你的数据显示不出来，并且最可怕的是不报错；另外有些博客说json中不能有total及row这两个外层属性，而我测试过，如果没有这两个的话，数据将不会显示树型结构，当然这是树型结构不能显示的一种情况而已。

附上成功绑定服务器数据的例子：

html:

<table id="tt" style="width:90%; margin:0 auto 30px auto"></table>

js:

 function getprojectdetails()
    {
        var keyvalue = $("#inputkeyno").val();
        $.ajax({
            type: 'get',
            url: '/Home/GetProjectDetail/',
            data:{keyno:keyvalue},
            dataType: 'json',
            beforeSend: function () {
                SwitchStatusBar(true);
            },
            complete: function () {
                SwitchStatusBar(false);
            },
            error: function (xmlReq, err, c) {
                SwitchStatusBar(false);
            },
            success: function (data) {
                  .......
                $('#infomationtable').propertygrid('loadData', rows);
                $('#tt').treegrid({
                            data: componetsinfo,
                            idField: 'id',
                            treeField: 'PANU',
                            columns: [[
                                { title: 'Part Number', field: 'PANU', width: 180 },
                                { field: 'PANU_CODE', title: 'Part number code', width: 100, align: 'right' },
                                { field: 'PANU_Desc', title: 'Part Number Description', width: 200 },
                                { field: 'PANU_INST', title: 'Part Number Instruction', width: 200 },
                                { field: 'Description', title: 'Description', width: 200 },
                                { field: 'PFNA', title: 'Part Image', width: 80, formatter: function (value, row, index) { return formatcell(value, row, index); } }
                            ]]
                        });
            }
        });
    }

后台的数据结构：

结果：

作为root的五个节点，其数据结果不能有_parentId