基本特性

Grid是MIS类应用中最常见的控件之一，我们通常将一个二维表结构的数据以Grid形式展现给用户，直观且规整：

基本使用

Grid通过items属性定义Grid中的数据，items数据为一个数组或一个EntityList,如：

// @Bind #grid.onCreate
!function(self, arg) {
	var datas = [{
		order:1,
		name:"西班牙",
		wins:6,
		draws:0,
		losses:1,
		point:18,
		gs:8,
		ga:2
	},{
		order:2,
		name:"荷兰",
		wins:6,
		draws:0,
		losses:1,
		point:18,
		gs:12,
		ga:6
	},{
		order:3,
		name:"德国",
		wins:5,
		draws:0,
		losses:2,
		point:15,
		gs:16,
		ga:5
	}];
	self.set("items",datas);
}

另外我们还需要定义Grid中的列对象，如：

其中每一个Column都需要配置property属性为上面JSON对象对应的属性，如名称为wins的DataColumn:

依照以上方法在Grid中定义好所有需要显示的DataColumn对象后，你就可以在界面上看到最终的运行效果：

Grid下可添加的Column有多种类型：

上图中红色数字对应的Column对象如下：

序号	Column对象	说明
1	IndicatorColumn	用于指示行的状态,如上图第1行表示被编辑过，第9行表示被编辑过，并且数据校验未通过(productName非空)
2	RowSelectorColumn	选择器列，一般用于辅助表格的多选功能
3	RowNumColumn	行号列
4	DataColumn	数据列，一般显示对应数据对象的某一个property属性
5	ColumnGroup	组合列，组合列下可以添加DataColumn也可以添加ColumnGroup

属性详细说明

allowNoCurrent

基本特性与Tree的allowNoCurrent，详情请参考：Tree(DCUG)

currentIndex

当前子元素的行号，此行号是从0开始计算的。

var currentIndex = grid.get("currentIndex");

或者也可以动态设定：

grid.set("currentIndex", 5);

currentEntity

当前数据实体，这个实体是指items属性集合中对应的数据对象，如基本使用中的范例，如果当前Grid定位到第三行：

var currentEntity = grid.get("currentEntity");

则currentEntity对应的数据实体对象就是：

{
	order:3,
	name:"德国",
	wins:5,
	draws:0,
	losses:2,
	point:15,
	gs:16,
	ga:5
}

与currentIndex有所不同的是currentEntity是只读的属性，不允许JS动态指定，如果有需求通过currentIndex解决。

cellRenderer

默认的单元格渲染器：dorado.widget.grid.DefaultCellRenderer。

默认情况下items中的数据将会直接作为Grid中单元格DOM对象的innerText的值渲染：

dom.innerText = this.getText(arg.data, arg.column);

可以通过该机制设定和调整默认的渲染机制.

Grid的cellRenderer属于高级应用，大部分情况下推荐用DataColumn的onRenderCell事件解决，或定制DataColumn的renderer。详细说明请参考：DataColumn。

应用举例：

// @Bind #grid.onCreate
!function(self, arg) {
	MyDefaultCellRenderer = $extend(dorado.widget.grid.DefaultCellRenderer, {
		render: function(dom, arg) {
			var text = this.getText(arg.data, arg.column);
			$log(text);
			dom.innerText = text;
			if (text && text.length>30){
					dom.innerText =  text.substring(0,10)+"...";//长度超过10就以...结束
			}             
		}
	});
	self.set("cellRenderer", new MyDefaultCellRenderer());
};

执行效果：

dynaRowHeight

与DataColumn的wrappable属性配合使用。

例如表格中的某一个单元格中包含如下的内容：

西班牙1
西班牙2
西班牙3
西班牙4
西班牙5

上面的文字内容包含了换行的符号，是一个多行的文本内容，默认情况下单元格的显示效果将会是如下(注意name属性)：

如果我们希望可以在单元格中看到所有的内容，就需要调整Grid的dynaRowHeight为true，并同时设置对应DataColumn的wrappable属性为true:

这个时候页面就可以根据单元格得内容自动调整css中的word-wrap和word-break等属性，从而使得单元格的高度可以自适应：

filterBarRenderer

参考showFilterBar属性，filterBarRenderer是用于定制下图中红圈内部的单元格的渲染器对象：

默认的单元格渲染器为：dorado.widget.grid.FilterBarCellRenderer。

定制范例：

// @Bind #grid.onCreate
!function(self, arg) {
	MyFilterBarCellRenderer = $extend(dorado.widget.grid.FilterBarCellRenderer,  {
		createSubControl: function(arg) {
			var column = arg.column;
			if (column.get("property") && column.get("filterable")) {
				var editor = this.createFilterExpressionEditor(arg);				
				editor.set("trigger", null);
				if (column.get("trigger")!=null){
					editor.set("trigger", column.get("trigger"));
				}
				return editor;
			} else {
				return null;
			}
		},
	});	
	self.set("filterBarRenderer", new MyFilterBarCellRenderer());
};

定制之后，过滤栏的显示效果：

fixedColumnCount

用于设定Grid中的锁定列(Excel中的术语叫冻结窗口),这是一个int类型的值，数子代表了要锁定从Grid左侧开始的多少列，如下动画是设置fixedColumnCount为2的操作效果图：

上面动画中可以看出当Grid拖动滚动栏的时候，左侧的order和name列始终可见。

footerRenderer

定制表格页脚栏的渲染器，默认的渲染器为：dorado.widget.grid.DefaultCellFooterRenderer

定制范例：

// @Bind #grid.onCreate
!function(self, arg) {
	MyCellFooterRenderer = $extend(dorado.widget.grid.DefaultCellFooterRenderer,  {
		render: function(dom, arg) {
			$invokeSuper.call(this, arguments);//调用父类的处理机制
			$(dom).css("background-color","beige");//设置背景色
		}
	});	
	self.set("footerRenderer", new MyCellFooterRenderer());
};

定制之后，过滤栏的显示效果(注意页脚中的黄色背景)：

FooterRenderer属性并不常用，一般只有控件开发人员扩展控件的时候才有需要，大多数页面编程技术人员建议直接利用DataColumn的onRenderFooterCell事件解决页脚内容自定义的需求。

footerRowHeight

用于设定Grid的默认页脚栏的行高，默认情况下页脚栏是隐藏的，需要将showFooter设置为true情况下,设定footerRowHeight才有意义。下图是设置footerRowHeight为50的效果图：

groupFooterRenderer

用于定制下图中Group页脚内部的单元格的渲染器对象：

默认的单元格渲染器为：dorado.widget.grid.GroupFooterRenderer。

定制范例：

// @Bind #grid.onCreate
!function(self, arg) {
	MyGroupFooterRenderer = $extend(dorado.widget.grid.GroupFooterRenderer,  {
		render: function(dom, arg) {
			$invokeSuper.call(this, arguments);
	        $(dom).css("font-weight","bold");//设置粗体显示
		}
	});	
	self.set("groupFooterRenderer", new MyGroupFooterRenderer());
};

定制之后，过滤栏的显示效果：

groupHeaderRenderer

用于定制下图中Group页眉内部的单元格的渲染器对象：

默认的单元格渲染器为：dorado.widget.grid.GroupHeaderRenderer。

定制范例：

// @Bind #grid.onCreate
!function(self, arg) {
	MyGroupHeaderRenderer = $extend(dorado.widget.grid.GroupHeaderRenderer,  {
		render: function(dom, arg) {
			$invokeSuper.call(this, arguments);
			var entity = arg.data;
			dom.firstChild.firstChild.innerText = entity.getText("$groupValue") + " 总数:(" + entity.get("$count") + ")";//调整显示内容
		}
	});	
	self.set("groupHeaderRenderer", new MyGroupHeaderRenderer());
};

定制之后，过滤栏的显示效果：

groupOnSort

是否需要在对数据进行分组之前先进行自动排序( 参考groupProperty属性的详细说明 )。如下的数据：

Samsung手机I9000和S8500手机在Grid中并不是紧挨在一起的数据，如果直接分组可能就会出现如下的效果：

上图中Samsung就有两个Group。

如果我们希望这两个Samsung手机能处于一个分组，就需要设置groupOnSort属性为true,使Grid中的数据先安装制造商排序，之后再分组，就可以得到如下的展现效果：

上面两个Samsung的手机就处在一个Group中。

groupOnSort的默认值为true,所以一般情况下我们不会遇到上面的问题，但是值得注意的是如果在分组之前要进行排序是会增加浏览器的计算工作的，如果在极端情况下希望优化分组效率，则应该先将准备好的数据在Java端排好序再交给Grid,并设置groupOnSort为false,这样分组效率将会大大提高。

groupProperty

Grid支持将内部的items数据分组显示，如下的表格数据：

下面我们按照制造商进行分类，设置Grid的groupProperty属性为制造商列对应的property属性：

则页面数据的展现效果就如下：

groupProperty也可以通过JS代码动态设定：

gridPhones.set("groupProperty", "manufacturer");

如果想要取消分组设定，则设置为null即可：

gridPhones.set("groupProperty", null);

headerRenderer

定制表格页眉的渲染器，默认的渲染器为：dorado.widget.grid.DefaultCellHeaderRenderer

定制范例：

// @Bind #grid.onCreate
!function(self, arg) {
	MyCellHeaderRenderer = $extend(dorado.widget.grid.DefaultCellHeaderRenderer,  {
		render: function(dom, arg) {
			$invokeSuper.call(this, arguments);//调用父类的处理机制
			$(dom).css("background-color","beige");//设置背景色
		}
	});	
	self.set("headerRenderer", new MyCellHeaderRenderer());
};

定制之后，过滤栏的显示效果(注意页眉中的黄色背景)：

HeaderRenderer属性并不常用，一般只有控件开发人员扩展控件的时候才有需要，大多数页面编程技术人员建议直接利用DataColumn的onRenderHeaderCell事件解决页脚内容自定义的需求。

headerRowHeight

页眉的默认高度，下图是设置headerRowHeight为50的效果图：

highlightCurrentRow

与Tree中的highlightCurrentRow的概念一致，详情参考:Tree(DCUG)

highlightHoverRow

与Tree中的highlightHoverRow的概念一致，详情参考:Tree(DCUG)

highlightSelectedRow

与Tree中的highlightSelectedRow的概念一致，详情参考:Tree(DCUG)

readOnly

控制表格是否允许编辑，默认情况下是可以编辑的

rowHeight

表格数据行的默认高度，下图是设置rowHeight为50的效果图：

rowRenderer

定制表格数据行的渲染器，默认的渲染器为：dorado.widget.grid.DefaultRowRenderer

定制范例：

// @Bind #grid.onCreate
!function(self, arg) {
	MyRowRenderer = $extend(dorado.widget.grid.DefaultRowRenderer,  {
		render: function(dom, arg) {
			$invokeSuper.call(this, arguments);
			var entity = arg.data;
			if (entity.wins>5){//wins超过5的设置背景色
				$(dom).css("background-color","beige");
			}
		}
	});	
	self.set("rowRenderer", new MyRowRenderer());
};

定制之后，过滤栏的显示效果(注意数据行中的黄色背景)：

scrollMode

该功能机制与BlockView中的scrollMode一样，详情请参考：BlockView(DCUG)

selectionMode

与Tree的selectionMode功能类似，详情请参考:Tree(DCUG)#selectionMode和selection

最大的不同点在于Grid如过你添加了RowSelectorColumn,则Grid中selection代表的集合和界面上看到的RowSelectorColumn类选中的行集合是一个概念，而Tree中它们是不同的东西：

showFilterBar

是否打开Grid的过滤栏，如果设置为true，Grid的显示效果如下：

打开过滤栏的下拉框：

在其中输入一些查询条件，并单击确定按钮就可以对Grid中items中数据过滤查询：

showFooter

默认情况下页脚栏是隐藏的，需要将showFooter设置为true情况下才能看到页脚栏：

页脚栏一般比较常用的场景是提供一些统计信息，如下：

关于统计信息的实现细节参考DataColumn。

showGroupFooter

如下图，该属性控制是否显示Group的页脚：

如果将showGroupFooter设置为false,则显示效果如下：

showHeader

该属性用于控制是否显示表格控件的页眉。如下图中红线内部的内容：

showHeader默认值为true, 如果设置为false,则Grid的显示效果就如下：

footerEntity

表格汇总栏对应的数据实体。

当我们需要手工的设置表格汇总栏中的数据时，应该直接修改此数据实体中相应属性的值。

如下图：

上图中页脚中的数据是针对当前可见数据的汇总数据，如果我们期望自行计算汇总数据（如分页情况下计算总结果），那么计算后的结果，我们就可以利用footerEntity对象写入，这样Grid就会自动显示footerEntity的值，如：

grid.get("footerEntity").set({
wins: 170,
draws: 50,
losses: 40,
point: 510
});

filterEntity

表格过滤栏对应的数据实体。

当我们需要手工的设置表格过滤栏中的数据时，应该直接修改此数据实体中相应属性的值。

selection

Grid的selectionMode相关，通过该属性可访问Grid中当前选中行：

var datas = grid.get("selection");
var labelStr = "";
datas.each(function(data){
    labelStr+=data.get("name")+"\n";
});
dorado.MessageBox.alert(labelStr);

与Tree中的selection功能类似，详情请参考:Tree(DCUG)#selectionMode和selection

editing

表格当前是否正处于编辑状态。系统内部属性，不建议编程使用。

currentColumn

当前列。

参考技巧：激活Grid中指定Column指定行的单元格，进入编辑状态：

grid.set("currentIndex", 0);
grid.setFocus();
var column = grid.getColumn("name");
grid.setCurrentColumn(column);

运行效果：

stretchColumnsMode

该属性设置表格列的宽度调整模式。此属性在fixedColumnCount生效时不起作用。

一共有四种模式：off，stretchableColumns，lastColumn 和 allColumns

off模式

如果采用off模式，由于浏览器大小或Grid所在容器的大小发生变化时，Column的宽度不会自适应的调整，如下图右侧就会出现一个空白区域：

stretchableColumns模式

Column宽度会自适应，与allColumns模式类似，但是对于设置了宽度的Column列，就无法自动调整大小，

如下图中order与name在Grid宽度发生变化时，其Column的宽度是不变的：

lastColumn模式

只调整最后一列

allColumns模式

按照各列宽度的权重，对所有列进行调整。

Dorado 9 : Grid(DCUG)

基本特性

基本使用

属性详细说明

allowNoCurrent

currentIndex

currentEntity

cellRenderer

dynaRowHeight

filterBarRenderer

fixedColumnCount

footerRenderer

footerRowHeight

groupFooterRenderer

groupHeaderRenderer

groupOnSort

groupProperty

headerRenderer

headerRowHeight

highlightCurrentRow

highlightHoverRow

highlightSelectedRow

readOnly

rowHeight

rowRenderer

scrollMode

selectionMode

showFilterBar

showFooter

showGroupFooter

showHeader

footerEntity

filterEntity

selection

editing

currentColumn

stretchColumnsMode

off模式

stretchableColumns模式

lastColumn模式

allColumns模式

Attachments: