dojo GridX 用法

1. 表格的加载显示

function CreateGrid() {
var store = new dojo.store.Memory({
data: [
{ id: 1, UserName: "User1", Password: "123abc", col4: "编辑" },
{ id: 2, UserName: "User2", Password: "123abc", col4: "编辑" },
{ id: 3, UserName: "User3", Password: "123abc", col4: "编辑" },
{ id: 4, UserName: "User4", Password: "123abc", col4: "编辑" }
]
});

var structure = [
{ id: 'UserName', name: '用户名', field: 'UserName' },
{ id: 'Password', name: '密码', field: 'Password', width: '70px' },
{ id: 'col4', name: '编辑', field: 'col4', width: '75px',
decorator: function (data) {
return "<label class='TableLink'>" + data + "</label>";
}
}];

var grid = new gridx.Grid({
id: 'UserInfoGrid',
style: "width:100%;height:100%;", //height:100%控制表格能否充满所在区域，并随区域大小调整高度
cacheClass: "gridx/core/model/cache/Sync",
store: store,
structure: structure,
selectRowMultiple: true, //与gridx.modules.IndirectSelect一起，控制行首Radio/Checkbox的显示，该属性控制显示Radio或Checkbox
//Declare initialOrder as grid parameter:
sortInitialOrder: { colId: 'UserName', descending: false }, //默认按照name字段升序排列
barTop: [                                                                     //放在[]内的多个工具条，将在一行显示
//[{ content: "<h1>影像数据列表</h1>", colSpan: 6, style: "text-align: center;font-size:12px;"}],
[
{ pluginClass: "gridx/support/QuickFilter", style: 'text-align: right;' }  //查询框，需要与modules配合使用
]
],
barBottom: [
"gridx/support/Summary",
{ pluginClass: "gridx/support/LinkPager", style: 'text-align: center;' },
{ pluginClass: "gridx/support/LinkSizer", style: 'text-align: right;' }
],
modules: [
//Declare this module in the "modules" parameter.
gridx.modules.VirtualVScroller,                        //竖直方向滚动条
gridx.modules.SingleSort,
gridx.modules.Pagination,
gridx.modules.Filter,                  //自动过滤查询框
gridx.modules.Bar,
"gridx/modules/ColumnResizer",  //允许手动调整列宽
gridx.modules.RowHeader,          //显示行首，不显示行首则Radio/Checkbox无法显示
gridx.modules.select.Row,
"gridx/modules/IndirectSelect"    ////与selectRowMultiple一起，控制行首Radio/Checkbox的显示，该插件控制显示
],
selectRowTriggerOnCell: true   //点击行中的任意单元格，选中改行；如果行首有Radio或CheckBox，则同时选中
});

grid.pagination._pageSize = 20;//设置每页显示的行数

grid.startup();
return grid;
}

2. 表格宽度和尺寸的控制

一般情况下，表格需要充满其所在区域，目前我的做法是：

在表格属性中，设置  style: "width:100%;height:100%;", //height:100%控制表格能否充满所在区域，并随区域大小调整高度

此时，表格宽度在页面尺寸变化时，可正常变化，但宽度仍存在问题。为解决宽度不能自动变化的问题，可在页面尺寸变化事件中，手动修改表格宽度

//左右方向充满页面的表格宽度
var newWidth = document.body.clientWidth - 32;  //32为表格与页面之间的间隙，该值不会随页面尺寸等设置变化
dijit.byId("UserInfoGrid").set("style", " width:" + newWidth + "px;");
dijit.byId("UserInfoGrid").resize();