dojo Grid用法总结

前端之家收集整理的这篇文章主要介绍了dojo Grid用法总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

2、加载数据提示信息@H_403_1@

loadingMessage : "请稍候...",

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

取消选中
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刷新@H_403_1@ Grid.resize();
Grid._refresh();

5、禁止排序@H_403_1@
    // 方法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、禁止调整列宽@H_403_1@

在layout中设置列的属性noresize

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

或者

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

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

7、设置单元格样式@H_403_1@
以下两种方式任选
{
field : 'typeDesc',name : '名称',width : '100px',//cellClasses : 'test' // 方法1
cellStyles : 'white-space: normal;word-wrap:break-word;' // 方法2
}

8、单元格文字超长,自动换行@H_403_1@
cellStyles : 'white-space: normal;word-wrap:break-word;'

9、DataGrid增加单选、多选按钮及编号@H_403_1@
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设置最大高度@H_403_1@
给DataGrid设置最大高度。如果实际数据高度不超过最大高度,则自动调整适应实际高度;如果超出,则以设置的最大高度为准,并显示滚动条。
autoHeight:10 // grid最大高度是10行
autoHeight不但能设置true/false,还能设置数字

11、grid行能被选择复制@H_403_1@
selectable: true

原文链接:https://www.f2er.com/dojo/291299.html

猜你在找的Dojo相关文章