应用noscroll属性后丢失LazyTreeGrid功能

时间：2016-09-23 14:27:45

标签： dojo dojox.grid

我使用dojox.grid.LazyTreeGrid小部件显示如下所示的简单树形网格：

dojo.require("dojox.grid.LazyTreeGrid");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dojo.data.ItemFileWriteStore");

dojo.ready(function(){
    /* set up data store */
    var data = { identifier: 'name',
        label: 'name',
        items: [
          { name:'Africa', type:'continent', children:[
          { name:'Egypt', type:'country' },
          { name:'Kenya', type:'country', children:[
          { name:'Nairobi', type:'city', adults: 70400, popnum: 2940911 },
          { name:'Mombasa', type:'city', adults: 294091, popnum: 707400 } ]
          },
          { name:'Sudan', type:'country', children:
          { name:'Khartoum', type:'city', adults: 480293, popnum: 1200394 }
          } ]
          },
          { name:'Asia', type:'continent', children:[
              { name:'China', type:'country' },
              { name:'India', type:'country' },
              { name:'Russia', type:'country' },
              { name:'Mongolia', type:'country' } ]
          } ]        
    };
    var store = new dojo.data.ItemFileWriteStore({data: data});
        var model = new dijit.tree.ForestStoreModel({store: store, childrenAttrs: ['children']});

    /* set up layout */
    var layout = [
      {name: 'Name', field: 'name', width: '10em'},
      {name: 'Type', field: 'type', width: '15em'},
      {name: 'Population', field: 'population', width: '15em'},
      {name: 'Area', field: 'area', width: '15em'}
    ];

    /* create a new grid: */
    var grid = new dojox.grid.LazyTreeGrid({
        id: 'grid',
        treeModel: model,
        structure: layout,
        rowSelector: '20px'
      }, document.createElement('div'));

    /* append the new grid to the div */
    dojo.byId("gridDiv").appendChild(grid.domNode);

    /* Call startup() to render the grid */
    grid.startup();
});
#grid {
    width: 43em;
    height: 15em;
}
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css" rel="stylesheet"/>
<body class="claro">
    <div id="gridDiv"></div>
</body>

我试图将第一列锁定到位，这样您仍然可以沿着表格中的其他列水平滚动。我通过更改定义layout并向其添加noscroll:true的方式来实现此目的：

var layout = [
  {cells:[ [
    {name: 'Name', field: 'name', width: '10em'},
    ] ], noscroll:true
  },
  {cells:[ [
    {name: 'Type', field: 'type', width: '15em'},
    {name: 'Population', field: 'population', width: '15em'},
    {name: 'Area', field: 'area', width: '15em'}
    ] ]
  }
];


dojo.require("dojox.grid.LazyTreeGrid");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dojo.data.ItemFileWriteStore");

dojo.ready(function(){
    /* set up data store */
    var data = { identifier: 'name',
        label: 'name',
        items: [
          { name:'Africa', type:'continent', children:[
          { name:'Egypt', type:'country' },
          { name:'Kenya', type:'country', children:[
          { name:'Nairobi', type:'city', adults: 70400, popnum: 2940911 },
          { name:'Mombasa', type:'city', adults: 294091, popnum: 707400 } ]
          },
          { name:'Sudan', type:'country', children:
          { name:'Khartoum', type:'city', adults: 480293, popnum: 1200394 }
          } ]
          },
          { name:'Asia', type:'continent', children:[
              { name:'China', type:'country' },
              { name:'India', type:'country' },
              { name:'Russia', type:'country' },
              { name:'Mongolia', type:'country' } ]
          } ]        
    };
    var store = new dojo.data.ItemFileWriteStore({data: data});
        var model = new dijit.tree.ForestStoreModel({store: store, childrenAttrs: ['children']});

    /* set up layout */
    var layout = [
      {cells:[ [
        {name: 'Name', field: 'name', width: '10em'},
        ] ], noscroll:true
      },
      {cells:[ [
        {name: 'Type', field: 'type', width: '15em'},
        {name: 'Population', field: 'population', width: '15em'},
        {name: 'Area', field: 'area', width: '15em'}
        ] ]
      }
    ];

    /* create a new grid: */
    var grid = new dojox.grid.LazyTreeGrid({
        id: 'grid',
        treeModel: model,
        structure: layout,
        rowSelector: '20px'
      }, document.createElement('div'));

    /* append the new grid to the div */
    dojo.byId("gridDiv").appendChild(grid.domNode);

    /* Call startup() to render the grid */
    grid.startup();
});
#grid {
    width: 43em;
    height: 15em;
}
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css" rel="stylesheet"/>
<body class="claro">
    <div id="gridDiv"></div>
</body>

执行此操作后，您可以看到最左侧的列已锁定到位。但是，我无法扩展此专栏中的字段以查看他们的孩子（埃及，肯尼亚，苏丹等）。这是小部件的错误吗？或者我是以错误的方式做这件事的？我是否可以使用其他小部件来实现相同的功能？

1 个答案:

答案 0 :(得分：0)

使用dgrid这似乎很容易实现。您可以查看两个演示：http://dgrid.io/js/dgrid/test/extensions/CompoundColumns_Tree.html和http://dgrid.io/js/dgrid/test/complex_column.html。

要实现列的锁定，请为其列集设置样式以确定其宽度。也许你可以用dojox.grid实现类似的东西（而不是noscroll：true）。

这是一个示例，它是一个CompoundColumns_Tree.html演示，其样式可以锁定第一列。

require(
{
	packages: [
		{
			name: 'dgrid',
			location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0'
		},
		{
			name: 'dstore',
			location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1'
		}
	]
}, 
[
  'dgrid/Tree',
  'dgrid/ColumnSet',
  'dgrid/OnDemandGrid',
  'dgrid/extensions/CompoundColumns',
  'dgrid/test/data/createHierarchicalStore',
  'dgrid/test/data/hierarchicalCountryData',
  'dojo/on'
], function (Tree, ColumnSet, OnDemandGrid, CompoundColumns, createHierarchicalStore, data, on) {
  var CompoundTree = OnDemandGrid.createSubclass([ Tree, CompoundColumns, ColumnSet ]);
  var store = createHierarchicalStore({ data: data });

  var columnSets = [
    [
      [
        {
          field: 'name',
          label: 'Name',
          renderExpando: true
        }
      ]
    ],
    [
      [
        {
          label: 'Information',
          children: [
            {
              field: 'type',
              label: 'Type'
            }, {
              field: 'population',
              label: 'Population'
            }
          ]
        }
      ]
    ]
  ];

  var grid = new CompoundTree({
    columnSets: columnSets,
    collection: store.getRootCollection()
  }, 'grid');
});
.dgrid {
  width: 400px;
  margin: 10px;
}

.dgrid .dgrid-content .dgrid-cell {
  height: 24px;
}

.dgrid-column-set-0 {
  width: 25%;
}

.field-type {
  width: 150px;
}
.field-population {
  width: 200px;
}
<link href="https://cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/skins/claro.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">


<div class="claro">
  <div id="grid"></div>
</div>

相关问题
最新问题