dojo GridX 用法

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: 'minValue', field: 'MinValue', name: '最小值', width: '80px',

       editable: true, editor: 'dijit.form.NumberTextBox',

       editorArgs: {

             props: 'constraints:{places:"0,4"}', //设置editor的小数位数（各类属性可通过props设置） 

             fromEditor: function (v, cell) {//v为修改后的值，修改前的值可通过cell.data()获取

                    return v;

                    }

             },

        },

{ 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%控制表格能否充满所在区域，并随区域大小调整高度

autoHeight:true,//表格高度根据行数自动设置
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();

 

3.editor绑定事件

grid.edit.connect(grid.edit, "onApply", function(cell) {

            var columnId = cell.column.id;

            if(columnId!='minValue' && columnId!='maxValue'){

                return;

            }

            var rowIndex = cell.row.index();

            var nextRow = rowIndex + 1;

            var nextCol = 1;

            grid.cell(nextRow,nextCol,false).setRawData(cell.data());//响应当前行数值变化事件，设置另一个单元格的值

        });

 

参考资料：

http://blog.csdn.net/earthhour/article/details/25041723

http://www.mcpressonline.com/programming-other/general/techtip-more-gridx-features

https://github.com/oria/gridx/wiki/Module-Edit

posted on 2016-03-02 14:10 countryer 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/countryer/p/4856722.html