当前位置 : 主页 > 网页制作 > Dojo >

dojo Grid用法总结

来源:互联网 收集:自由互联 发布时间:2021-06-15
1、没有数据时,提示信息 noDataMessage : "span class=\"dojoxGridNoData\"本单位当前无用户信息!/span" 要让这个属性起作用,store属性不能为null,而应该是size为0,即[],而且头信息中的Content-R

1、没有数据时,提示信息

noDataMessage : "<span class=\"dojoxGridNoData\">本单位当前无用户信息!</span>"

要让这个属性起作用,store属性不能为null,而应该是size为0,即[],而且头信息中的Content-Range应该是items 0-0/0

2、加载数据提示信息

loadingMessage : "请稍候...",

3、编程实现datagrid选中与取消

取消选中
grid.selection.setSelected(grid.selection.selectedIndex,false)
选中第4行
grid.selection.setSelected(4,true)
取消全部选中
grid.selection.deselectAll();
取下一个选中项

var item = grid.selection.getFirstSelected();

item = grid.selection.getNextSelected(item);

4、grid刷新

Grid.resize();
Grid._refresh();

5、禁止排序

    // 方法1:全部列禁止排序
    grid.canSort = function(){return false;};
    // 方法2:指定列禁止排序
    grid.canSort = function(col){
    	console.log(col);
    	// 禁止第三列排序
        if(Math.abs(col) == 3) {
            return false;
        } else {
            return true;
        }
    };

6、禁止调整列宽

在layout中设置列的属性noresize

{'name': 'Column 1', 'field': 'id', 'width': '100px', 'noresize': true} 

或者

<th field="id" width= "200px" noresize=true >id</th>

设置'width': 'auto'也能起到禁止的作用,但是有时列宽无法控制

7、设置单元格样式

以下两种方式任选
{
field : 'typeDesc',
name : '名称',
width : '100px',
//cellClasses : 'test' // 方法1
cellStyles : 'white-space: normal;word-wrap:break-word;' // 方法2
}

8、单元格文字超长,自动换行

cellStyles : 'white-space: normal;word-wrap:break-word;'

9、DataGrid增加单选、多选按钮及编号

require(['dojox/grid/_RadioSelector']);
require(['dojox/grid/cells/_base'],function(CellBase)

var layout_radio = [{
			type: "dojox.grid._RadioSelector"// type: "dojox.grid._CheckBoxSelector"
		},{ cells: [[
			new CellBase.RowIndex({ width: 5, name: '序号' }),// 编号
			{name: 'Column 1', field: 'col1'},
			{name: 'Column 2', field: 'col2'},
			{name: 'Column 3', field: 'col3'},
			{name: 'Column 4', field: 'col4', width: "150px"},
			{name: 'Column 5', field: 'col5'}
		],[
			{name: 'Column 6', field: 'col6', colSpan: 2},
			{name: 'Column 7', field: 'col7'},
			{name: 'Column 8'},
			{name: 'Column 9', field: 'col3', colSpan: 2}
		]]}];

10、给DataGrid设置最大高度

给DataGrid设置最大高度。如果实际数据高度不超过最大高度,则自动调整适应实际高度;如果超出,则以设置的最大高度为准,并显示滚动条。
autoHeight:10 // grid最大高度是10行
autoHeight不但能设置true/false,还能设置数字

11、grid行能被选择复制

selectable: true
网友评论