简介

数据列。通常用于显示指定数据对象的某一个具体的属性，对应下图中红色4所在的列。

DataColumn要显示指定数据对象的某一个属性，是需要设定其property属性的：

详细属性说明

name

采用java变量名的命名规则，禁用中文，数字和特殊符号等，如下的一些命名规则都是不推荐的：

不良的name命名示例
中文
dept.id
$deptId
dept^id
dept@id
dept-201
20120101

align

设定数据列中数据的相对位置，支持left,center和right设定。默认为left。

下面以产品名称的设定为例查看不同的align设定的效果。

align为left:

align为center:

align为right:

caption

数据列的标题，与name不同的该处的设置有较大的灵活性，可以用中文，数字和特殊字符。如：

运行效果：

dataType

可通过dataType指定数据列对应的数据类型，这样可以实现数据输入，数据格式化的控制，如数字类型的DataColumn不允许字母输入，日期类型的数据要做合法性校验等。

如下图设置Length的dataType类型为float：

这样界面上就只允许输入数字，不允许输入英文字母了。

在IDE中DataType属性编辑框有一个下拉选项：

单击这个下拉选项，会弹出系统默认的向导窗口方便你选择适合的DataType：

defaultFilterOperator

该属性与Grid的过滤栏配合使用，通过该属性设置默认的过滤方式。

例如Grid的过滤栏默认对字符串的数据采用like匹配查询，如果想改为完全匹配，就可以直接设置为"=":

例如Grid的过滤栏默认对数字类型的数据采用=匹配查询，如果想改为完全匹配，就可以直接设置为">=":

可设置的比较操作符号有：

符号	说明
like	substr匹配
like*	匹配字符串前面的字符
*like	匹配字符串后面的字符
=	等于判断
<>	不等于判断
>	大于判断
>=	大于等于判断
<	小于判断
<=	小于等于判断

displayFormat

根据DataColumn的dataType设置数据的格式.

Date的format范例：

Date的format范例	说明
Y-m-d	返回类似"2000-09-25"的字符串
H:i:s	返回类似"23:10:30"的字符串
Y年m月d日 H点i分s秒	返回类似"2000年09月25日 23点10分30秒"的字符串

Float的format范例：

Float的format范例	说明
#,##0.00	123456789.789格式化为 123,456,789.79
$#,##0.00/DAY	1234.567格式化为 $1,234.57/DAY
(###)########	02145375683格式化 (021)45375683

更详细的格式设置，请参考Client-API文档中:

Date
dorado.util.Common

editable

是否允许这个DataColumn可编辑，默认为true。如果要禁止编辑的话就设置为false。

大多数情况下禁止编辑是通过DataColumn的readOnly属性的设置实现的，editable与它的差别在于，如果此时DataColumn绑定了trigger，editable设置为false不会影响trigger的正常操作。有关trigger的功能和详细说明请参考:Trigger(DCUG)

常见应用(DataColumn不可编辑，但是下拉框可下拉选择)：

editType

DataColumn在可编辑情况下，可以通过该属性设置对应的编辑框对象，默认值为TextEditor，可选的有：

可选项	图例	说明
None		不提供编辑框，就是不能编辑
TextEditor		提供默认的编辑框
PasswordTextEditor		提供密码输入编辑框，输入的字符会转换为点显示
TextArea		大文本编辑框，支持换行输入
CheckBox		复选框
RadioGroup		单选框
NumberSpinner		数字微调编辑器

filterBarRenderer

功能同Grid的filterBarRenderer，详细说明请参考：Grid(DCUG)#filterBarRenderer

通过DataColumn的filterBarRenderer属性，使我们可以为不同的DataColumn定制不同的filterBarRenderer。

默认的查询过滤条件下拉框为：

如果想约束用户，使其只能输入一个查询条件，下面定制一个不含复杂查询条件的下拉框：

var MyFilterBarRenderer = $extend(dorado.widget.grid.FilterBarCellRenderer, {
    getCriterionDropDown: function() {
        if (!this._criterionDropDown) {
            this._criterionDropDown = new dorado.widget.grid.CriterionDropDown({
                supportsMultiCriterions: false
            });
        }
        return this._criterionDropDown;
    },
  
    createFilterExpressionEditor: function(arg) {
        var editor = $invokeSuper.call(this, arguments);
        editor.set("trigger", this.getCriterionDropDown());
        return editor;
    }
});

或者：

var MyFilterBarCellRenderer = $extend(dorado.widget.grid.FilterBarCellRenderer,  {
    createSubControl: function(arg) {
        var editor = this.createFilterExpressionEditor(arg);                
		editor.set({
			dataType: dorado.datatype.DateDataType,
			trigger: "defaultDateDropDown"
		});
        return editor;
    },
});
//@Bind #dataGrid.onCreate
!function(self,arg) {
	self.set("&orderDate.filterBarRenderer", new MyFilterBarCellRenderer());
}

通过上面的代码我们定制了orderDate的日期下拉过滤栏：

filterable

当Grid的showFilterable属性设置为true的时候，Grid会出现如下的过滤栏：

默认情况下是所有的DataColumn都允许过滤查询的，急filterable的默认值为true。

如果想专门指定某一个DataColumn是否支持过滤查询，可通过filterable属性设置，如下卖弄我们设置losses的filterable为false：

则最终浏览器中显示的效果为(注意losses列已经不能进行过滤处理了)：

footerRenderer

功能同Grid的footerRenderer，详细说明请参考：Grid(DCUG)#footerRenderer

通过DataColumn的footerRenderer属性，使我们可以为不同的DataColumn定制不同的footerRenderer。

headerAlign

与align属性对应的，headerAlign用于设置表格页眉内容的水平对齐方式。

可选值有：left, center和right，默认值为center.

以下几个效果图是针对name列设置不同headerAlign的效果图。

headerAlign为left

headerAlign为center

headerAlign为right

headerRenderer

功能同Grid的headerRenderer，详细说明请参考：Grid(DCUG)#headerRenderer

通过DataColumn的headerRenderer属性，使我们可以为不同的DataColumn定制不同的headerRenderer。

ignored

该属性可忽略DataColumn对象，注意这是一个服务器端功能，如果设置DataColumn的ignored为true，表示Grid忽略此DataColumn。这样最终生成的Grid将不会包含该Column对象。这一点与visible有显著不同。通过visible设置为false隐藏后的DataColumn我们还可以通过如下的api访问DataColumn并重新显示这个DataColumn:

grid.getColumn("name").set("visible", true);

但是如果这个DataColumn是通过ignored设置为true而不可见情况下，有过Grid以及不包含这个Column对象了，那么你尝试用JS访问这个Column的时候就会返回空：

grid.getColumn("name").set("visible", true);//由于getColumn()方法返回null对象，因此这行js就会报错

通过ignored设置为true而不可见的DataColumn在客户端都是不可访问的对象，你无法为这些DataColumn做任何的操作。

metaData

IDE中看到的metaData属性是为对象监听器这种Java编程准备的一个属性，其中的信息最终不会发送到浏览器客户端，也就是说你无法在浏览器端通过js访问这个属性。

类似应用实例参考DatType中的PropertyDef中的MetaData使用实例：通过AutoJdbc-Addon生成PropertyDefs

property

简单数据对象的属性映射

用于映射绑定数据对象的具体属性。如范例的方式定义Grid中的数据对象：

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

在Grid设计的时候，只要设定DataColumn的property属性与上面JSON中的属性对应即可，如：

复杂数据对象的属性映射

另外如果对应的数据结构复杂情况下,property还支持路径设置方式，如Grid的数据定义如下：

用于映射绑定数据对象的具体属性。如范例的方式定义Grid中的数据对象：

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

在Grid设计的时候，可以设定DataColumn的property如下路径访问的方式访问JSON中的子对象的属性，如：

readOnly

用于控制DataColumn的只读属性。支持可以动态设置：

dataColumn.set("readOnly", true/false);

通过js动态设置readOnly属性后DataColumn会动态调整自身的编辑模式。

renderer

功能同Grid的cellRenderer，详细说明请参考：Grid(DCUG)#cellRenderer

通过DataColumn的cellRenderer属性，使我们可以为不同的DataColumn定制不同的cellRenderer。

Grid为DataColumn默认提供了几个CellRenderer的实现类：

dorado.widget.grid.DefaultCellRenderer:默认的表格列脚渲染器。
dorado.widget.grid.CheckBoxCellRenderer:用于将一个复选框填充到表格单元格中单元格渲染器。
dorado.widget.grid.RadioGroupCellRenderer:用于将一个单选框组填充到表格单元格中单元格渲染器。
dorado.widget.grid.ProgressBarCellRenderer:用于将一个进度条填充到表格单元格中单元格渲染器。

如果DataColumn的dataType属性为boolean或Boolean,则DataColumn会自动的将dorado.widget.grid.CheckBoxCellRenderer作为自身的单元格渲染器。但是如果数据类型是String类型，那么我们就可以通过定制renderer属性实现，如下范例：

如果你的数据无法与此匹配，则也可以通过如下的方式详细设定ProgressBarCellRenderer的属性：

// @Bind #grid.onCreate
!function(self, arg) {
	MyCheckBoxCellRenderer = $extend(dorado.widget.grid.CheckBoxCellRenderer,{
			createSubControl: function(arg) {
				var checkbox = $invokeSuper.call(this, arguments);
				checkbox.set({
					offValue: "N",
					onValue: "Y",
					triState: true
				});
				return checkbox;
			}
	});
	self.getColumn("ga").set("renderer", new MyCheckBoxCellRenderer());
}

最终页面渲染效果：

RadioGroupCellRenderer只有在DataGrid中才支持，Grid不支持RadioGroupCellRenderer。具体使用将在DataGrid中详细说明。

其中的reorderLevel如果想用进度条显示，就可以在配置DataColumn属性为dorado.widget.grid.ProgressBarCellRenderer：

最终预览效果：

ProgressBarCellRenderer默认最小值为0，最大值为100.

如果你的数据无法与此匹配，则也可以通过如下的方式详细设定ProgressBarCellRenderer的属性：

MyProgressBarCellRenderer = $extend(dorado.widget.grid.ProgressBarCellRenderer,{
		createSubControl: function(arg) {
			return new dorado.widget.ProgressBar({
				maxValue: 1000,
				textPattern: "{percent} 百分比"			
			}); 
		}
});

// @Bind #grid.onCreate
!function(self, arg) {
	self.getColumn("reorderLevel").set("renderer", new MyProgressBarCellRenderer());
}

最终页面渲染效果：

required

这个属性用于非空控制，但是前提是其中包含的数据必须是Entity对象，普通的JSON不支持，详细说明参考DataGrid的使用。

resizeable

是否允许用户通过鼠标调整列的宽度，默认情况下是允许的，如果想关闭这个功能就将resizeable设置为false。

sortState

排序标记。此标记仅用于显示，与实际的排序效果无关。可有如下几种取值：

none - 未排序
asc - 升序排序
desc - 降序排序

显示效果：

上图中name的sortState为asc, wins的sortState为 desc。

大多数情况下我们都不需要设置这个属性，一般情况下我们直接单击列头的时候会自动将Grid中的数据做排序处理，并最终引起这个DataColumn的sortState的变化，这个时候我们就可以通过JS访问这个状态从而得知当前DataColumn的排序状态。

var sortState = column.get("sortState");

summaryType

DataColumn默认支持的数据统计方式有：

summaryType	说明
sum	数据列的合计
average	数据列的平均值
count	行数统计
max	取最大值
min	取最小值

以上这些数据统计都是基于Grid中的可见数据的，如果您的数据采用懒加载或分页处理形式，则不会对其他数据做统计。

在这种情况下就需要自行计算合计值，并利用Grid的footerEntity属性动态设定内部值，从而自定义Grid页脚的统计数据。如：

gird.get("footerEntity").set("salary", 3000);

supportsOptionMenu

在DataColumn的标题中单击可以打开如下的系统菜单：

说明：菜单中提供的功能都依赖Grid和DataColumn的特性，此处以快捷菜单形式提供给用户，便于快捷操作。

升序和降序排序

实现对当前列数据对象的排序，排序操作后还会有标题列排序提示图标，如下order列的小箭头：

order反序排列的小箭头：

锁定到此列和撤销锁定

类似Excel的冻结功能

按此列进行记录分组和取消记录分组

实现和撤销记录分组功能，分组效果如下：

显示过滤栏

显示和关闭过滤栏

组合列和取消组合列

动态添加和删除组合列，单击组合列菜单的时候会自动弹出如下的系统菜单用于创建组合列：

确定按钮单击后，自动将当前列作为新建的组合列的子列(如下的wins列)：

之后可以直接将其他列拖拽到组合列中，动画效果如下：

最终的效果如：

表格列

动态显示和隐藏表格列，展开表格列菜单的时候可以看到它会将Grid中的所有列都列出来：

单击其中的复选框可以使列显示或隐藏。

trigger

DataColumn也支持trigger，有关Trigger的使用请参考：Trigger(DCUG)

如果需要定义多个trigger，就用逗号隔开：

DataColumn编辑是的效果如下：

typeFormat

用户设定单元给对应编辑框的输入格式，格式规则同DataColumn的displayFormat。

更详细的格式设置，请参考Client-API文档中:

Date
dorado.util.Common

参考范例，日期我们期望的显示格式为"xxxx年xx月xx日",但是输入的时候我们却期望用"xxxx-xx-xx"或"xxxx/xx/xx"或没有分隔符号的格式"xxxxxxxx"，那么我们就可以利用typeFormat实现，如下图是设定birthdya的typeFormat为"Ymd"之后编辑时的效果：

IDE设计视图：

该属性只有在指定dataType情况下才有意义。

userData

用户自定义扩展属性，可通过JS访问：

column.set("userData", "teststring");

或则存储较为复杂的JSON数据：

grid.getColumn("name").set("userData", {
	id:1,
	flag:"temp",
	name:"san"
});

如果我们通过对象监听器技术在服务器端设置了这个属性，那么也可以在客户端访问到它。

ColumnExtraInfo.Java代码：

public class ColumnExtraInfo {
	private int id;
	private String flag;
	private String name;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getFlag() {
		return flag;
	}
	public void setFlag(String flag) {
		this.flag = flag;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}	
}

对象监听器中的Java代码：

column.setUserData(columnExtraInfo);

那么我们在浏览器端就可以通过JS访问内部的信息：

var entity = column.get("userData");
var id = entity.id;
var flag = entity.flag;
var name = entity.name;

有关对象监听器的详细使用请参考：10. 对象监听器(SEFC)

visible

该属性可以设置隐藏DataColumn，visible设置为false,控件就被隐藏。也可以通过JS代码动态设置其visible使之显示：

grid.getColumn("name").set("visible", true);

width

定义列的宽度，列的宽度有两种定义形式：

表达式	说明
80	绝对宽度，表示多少个像素
*	自适应宽度

这两种宽度与Grid中的stretchColumnsMode功能配合起来能使表格的宽度达到不同的自适应的效果。

有关stretchColumnsMode的说明请参考：Grid(DCUG)#stretchColumnsMode

wrappable

该属性与css中表格单元格数据含回车符号时的渲染方式有关：css中的word-wrap和word-break等属性。

在Grid中与Grid的dynaRowHeight配合使用，详细说明参考：Grid(DCUG)#dynaRowHeight