如何使dojo treeGrid按两列进行分类?

9

我有一个简单的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");

示例 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
TreeGrid文档中提到网格可以有任意多层级,这意味着您可以拥有多个类别,只需在结构中定义即可。根据总层级,请制作一个fiddledemo,以便我们进行调查。 - cнŝdk
我怀疑这个问题,但需要一个实时的例子,特别是针对查询。 - John Glabb
1个回答

6
您可以在这里找到完整的工作示例:
现在,让我试着解释一下: 数据 首先,要支持网格中的多级别,您必须将数据格式化。对于具有n个级别的树,您需要在数据本身中有n-1个级别的分组。 例如,下面的JSON对象具有2个级别的分组(年份、地理位置),以支持3个级别(根节点、父节点和子节点)的树形结构。
{
   "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
                  }
               ]
            }
         ]
      }
   ]
}

布局

要呈现一个有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",
                  },
              ]
            }
         ]
      ]
   }
]

您可以看到,对于每个子级别,您需要添加一个组(我想称之为)字段,并将该组中的第一个字段设置为您的实际组字段。
我希望这个例子能够消除您的疑虑。 PS:在jsfiddle版本中,我使用了格式化程序来隐藏字符串字段的聚合值。

1
谢谢 Dipen。那个可以用。我会把它标记为答案。但是你有没有办法在展开时将聚合总计移动到类别级别?请参见上图。 - John Glabb
1
@JohnGlabb,你需要使用格式化程序来实现。请查看附带的 jsfiddle 链接,该链接使用格式化程序并在父行上显示总数。 - Dipen Shah
1
@JohnGlabb 不确定是否要移动它,从技术上讲,如果您想要,它可以显示空字符串。http://jsfiddle.net/rucdz41w/154/ - Dipen Shah
1
在你的 jsfiddle 示例中,如果你展开 2018 年,你会看到底部的总计是正确的。但我也想在该级别上显示亚太地区和北美洲的小计。 - John Glabb
2
@JohnGlabb 看了文档中的选项,不确定是否可能实现。 - Dipen Shah

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接