您的位置:首页 > 产品设计 > UI/UE

EasyUI TreeGrid

2015-11-16 11:27 465 查看


数据格式1:

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


格式2:

[{
"id":1,
"name":"C",
"size":"",
"date":"02/19/2010",
"children":[{
"id":2,
"name":"Program Files",
"size":"120 MB",
"date":"03/20/2010",
"children":[{
"id":21,
"name":"Java",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":211,
"name":"java.exe",
"size":"142 KB",
"date":"01/13/2010"
},{
"id":212,
"name":"jawt.dll",
"size":"5 KB",
"date":"01/13/2010"
}]
},{
"id":22,
"name":"MySQL",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":221,
"name":"my.ini",
"size":"10 KB",
"date":"02/26/2009"
},{
"id":222,
"name":"my-huge.ini",
"size":"5 KB",
"date":"02/26/2009"
},{
"id":223,
"name":"my-large.ini",
"size":"5 KB",
"date":"02/26/2009"
}]
}]
},{
"id":3,
"name":"eclipse",
"size":"",
"date":"01/20/2010",
"children":[{
"id":31,
"name":"eclipse.exe",
"size":"56 KB",
"date":"05/19/2009"
},{
"id":32,
"name":"eclipse.ini",
"size":"1 KB",
"date":"04/20/2010"
},{
"id":33,
"name":"notice.html",
"size":"7 KB",
"date":"03/17/2005"
}]
}]
}]


主要区别于正常datagrid 的就是多俩属性:

idField: 'id',
treeField: 'YearTitle',

$('#billlist_PaidUse').treegrid({
url: 'FinancialAuditService.ashx?Method=GetBillList_PaidUse_TreeGrid&ContractGuid=' + $("#contractid").val(),
nowrap: false,
rownumbers: false,
singleSelect: false,
fitColumns: true,
idField: 'id', //注释该属性 否则getSelections方法返回总数只能为1
treeField: 'YearTitle',
loadMsg: '正在加载数据……',
toolbar: '#toolbar',
columns: [[
{ title: '唯一guid', field: 'Year', width: 100, checkbox: true },
{ title: '年份', field: 'YearTitle', width: 80, align: 'center' },
{ title: '应收金额', field: 'Receivable', width: 80, align: 'right' },
{ title: '<span class="jeClass">已收金额</span> ', field: 'Paid', width: 80, align: "right" },
{ title: '欠收金额', field: 'Arrears', width: 80, align: 'right' },
{ title: '有效期限', field: 'TimeLimits', width: 140 }
]],
toolbar: '#tbBillToolPaidUse', // id 为tb的Div 详细 查看前台页面HTML代码
onBeforeLoad: function () {
$(this).datagrid('rejectChanges');
},
onClickRow: function (rowIndex, rowData) {

},
onDblClickRow: function (rowIndex, rowData) {
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: