new GridColumn(options)
- Description:
表格列控件
Examples
表格列作为FineUI.Grid的columns子项使用,field对应数据中的字段名:
FineUI.create({
type: 'Grid', renderTo: document.body, width: 600, height: 250, title: '员工列表',
columns: [
{ text: '编号', field: 'id', width: 80 },
{ text: '姓名', field: 'name', flex: 1 },
{ text: '部门', field: 'dept', flex: 1 }
],
data: [
{ id: 1, name: '张三', dept: '研发部' },
{ id: 2, name: '李四', dept: '设计部' }
]
});
使用renderer自定义单元格渲染(返回字符串或 HTML):
FineUI.create({
type: 'Grid', renderTo: document.body, width: 600, height: 250,
columns: [
{ text: '姓名', field: 'name' },
{
text: '状态', field: 'status', width: 100,
renderer: function (value) {
var color = value === '在职' ? 'green' : 'gray';
return '<span style="color:' + color + '">' + value + '</span>';
}
}
],
data: [{ name: '张三', status: '在职' }, { name: '李四', status: '离职' }]
});
使用columnType预设特定列类型(rownumberfield/checkboxfield/templatefield 等):
FineUI.create({
type: 'Grid', renderTo: document.body, width: 600, height: 250,
columns: [
{ columnType: 'rownumberfield' }, // 行号列
{ text: '姓名', field: 'name' },
{ text: '在校', field: 'atSchool', columnType: 'checkboxfield' } // 复选框列
],
data: [{ name: '张三', atSchool: true }, { name: '李四', atSchool: false }]
});
使用summaryRenderer显示合计行(配合 Grid 的 showSummary: true),this指向 Grid 实例,calcSummaryValue(field, type)可计算 sum/min/max/avg/count:
FineUI.create({
type: 'Grid', renderTo: document.body, width: 600, height: 250, showSummary: true,
columns: [
{ text: '产品', field: 'product', summaryRenderer: function () { return '合计:'; } },
{
text: '销量', field: 'count',
summaryRenderer: function (summaryRowIndex) {
return this.calcSummaryValue('count', 'sum');
}
}
],
data: [{ product: '产品 A', count: 10 }, { product: '产品 B', count: 25 }]
});
Parameters:
| Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
Object | 初始参数 Properties
|
Extends
Members
el :jQuery
- Description:
控件对应的jQuery节点对象
- Inherited From:
控件对应的jQuery节点对象
Type:
- jQuery
Methods
getEncodedText(text) → {string}
- Description:
获取编码后的字符串
- Inherited From:
Parameters:
| Name | Type | Description |
|---|---|---|
text |
string | 原始字符串 |
Returns:
编码后的字符串
- Type
- string
isType(value) → {boolean}
- Description:
检测当前实例是否指定的控件类型
- Overrides:
Example
grid1.isType('panel') // 返回true
grid1.isType('grid') // 返回true
Parameters:
| Name | Type | Description |
|---|---|---|
value |
Object | 控件类型 |
Returns:
如果当前实例是指定的控件类型,返回true;否则返回false
- Type
- boolean
Events
beforehide
- Description:
隐藏控件之前触发(返回false则取消隐藏操作)
- Inherited From:
beforeshow
- Description:
显示控件之前触发(返回false则取消显示操作)
- Inherited From:
hide
- Description:
隐藏控件时触发
- Inherited From:
layout
- Description:
布局控件时触发
- Inherited From:
remove
- Description:
移除控件时触发(调用
remove()时,控件 DOM 被销毁之前触发;可用于清理外部资源 / 解绑全局事件)
- Inherited From:
render
- Description:
渲染控件时触发
- Inherited From:
show
- Description:
显示控件时触发
- Inherited From: