如何将dojo treeGrid分为两列?

[英]How to make dojo treeGrid categorized by two columns?


I have a simple dojo treeGrid that is categorized just by first column. But how to make it categorized/collapsible by second as well? Note the treeGrid has totals shown in each category. Also, is there a way to move totals to the category level but not to the bottom?

我有一个简单的dojo treeGrid,它只是按第一列分类。但是如何使其分类/折叠呢?请注意,treeGrid在每个类别中都显示了总计。另外,有没有办法将总计移到类别级别而不是底部?

var layout = [ 
    { cells: [ 
       [ {field: "year", name: "Year"}, 
         {field: "childItems", 
           children: [ { field: "unid", name: "unid", hidden: true},
                       { field: "geography", name: "Geography"}, 
                       { field: "country", name: "Coungtry"}, 
                       { field: "status", name: "Status"}, 
                       { field: "credit", name: "Credit"}, 
                       { field: "debit", name: "Debit"}
                     ], 
                  aggregate: "sum" 
                  } 
                  ]] } ]

var jsonStore = new dojo.data.ItemFileWriteStore({ url: <...............>});


var grid = new dojox.grid.TreeGrid({ 
    structure: layout, 
    store: jsonStore, 
    query: {type: 'year'}, 
    queryOptions: {deep: true},
    rowSelector: true, 
    openAtLevels: [false],
    autoWidth: true,
    autoHeight: true
    }, 
    dojo.byId("treeGrid"));

grid.startup();

dojo.connect(window, "onresize", grid, "resize");

sample JSON store:

示例JSON商店:

{
  "identifier": "id",
  "label": "name",
  "items": [
    {
      "id": "2018",
      "type": "year",
      "year": "2018",
      "childItems": [
        {
          "id": "id0",
          "geography": "Asia Pacific",
          "country": "Australia",
          "programname": "Program 1",
          "totalPlanned": 0,
          "totalForecasted": 0
        },
        {
          .....
        }
      ]
    },
    {
          .....
    }
  ]
}

enter image description here

1 个解决方案

#1


6  

You can find completely working example over here:

你可以在这里找到完全有效的例子:

Now, let me try to explain it:

现在,让我试着解释一下:

Data

数据

First of all to support multiple levels in the grid you must have your data in the same format. For tree with n levels, you need to have n-1 level grouping in your data itself. For example, JSON object below have 2 levels of grouping (year, geography) to support tree with 3 levels (root, parent, and child).

首先,为了支持网格中的多个级别,您必须以相同的格式拥有数据。对于具有n个级别的树,您需要在数据本身中进行n-1级别分组。例如,下面的JSON对象有2个级别的分组(年份,地理位置),以支持具有3个级别(root,parent和child)的树。

{
   "identifier":"id",
   "label":"name",
   "items":[
      {
         "id":"2018",
         "type":"year",
         "year":"2018",
         "geography":[
            {
               "id":"id1",
               "geography":"Asia Pacific",
               "childItems":[
                  {
                     "id":"ci1",
                     "country":"Australia",
                     "programname":"Program 1",
                     "credit":100,
                     "debit":50
                  }
               ]
            }
         ]
      }
   ]
}

Layout

布局

To render a tree with n-levels you have to make sure layout of the tree is properly configured with same nesting as your data. To support data structure from JSON object above you need to set layout to:

要渲染具有n级的树,您必须确保使用与数据相同的嵌套正确配置树的布局。要从上面的JSON对象支持数据结构,您需要将布局设置为:

[
   {
      cells:
      [
         [
            { field:"year", name:"Year" },
            {
              field:"geography",
              children:
              [
                  { field:"geography", name:"Geography" },
                  { 
                    field:"childItems",
                    children:[
                        { field:"unid", name:"unid", hidden:true },
                        { field:"country", name:"Country" },
                        { field:"programname", name:"Program" },
                        { field:"credit", name:"Credit" },
                        { field:"debit", name:"Debit" }
                     ],
                     aggregate:"sum",
                  },
              ]
            }
         ]
      ]
   }
]

You can see that, for each child level(s) you have to add a group (as I would like to call it) field and set first field within that group to your actual group field.

您可以看到,对于每个子级别,您必须添加一个组(我想称之为)字段,并将该组中的第一个字段设置为您的实际组字段。

I hope this example will clear your doubt. PS: In the jsfiddle version I have used formatters just to hide aggregate values for string fields.

我希望这个例子能够清除你的怀疑。 PS:在jsfiddle版本中,我使用格式化程序来隐藏字符串字段的聚合值。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2018/08/01/d41f079e168fcea4772551177760ca4.html



 
© 2014-2018 ITdaan.com 粤ICP备14056181号