EasyUI TreeGrid

 

数据格式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) {
            }
        });