使用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>
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