GridColumnDefinition

Description:

• 列定义接口

  
  代码参考页面下方的示例

Source:

• grid.js, line 219

Properties:

Name	Type	Attributes	Default	Description
key	string			列关键字，默认以该关键字从行数据中提取单元格值，行数据的关键字属性值里包含 DisplayValue 则优先显示此值
type	GridColumnTypeEnum | GridColumn	<optional>	Grid.ColumnTypes.Common	列的类型，可以为 GridColumn 的子类，或者如下内置类型 Grid.ColumnTypes Grid.ColumnTypes.Common - 0: 通用列（只读） Grid.ColumnTypes.Input - 1: 单行文本列 Grid.ColumnTypes.Dropdown - 2: 下拉选择列 Grid.ColumnTypes.Checkbox - 3: 复选框列 Grid.ColumnTypes.Icon - 4: 图标列 Grid.ColumnTypes.Text - 5: 多行文本列 Grid.ColumnTypes.Date - 6: 日期选择列 Grid.ColumnTypes.Radio - 7: 单选框列
caption	string	<optional>		列标题文本
captionStyle	any	<optional>		列标题的元素样式
captionTooltip	string	<optional>		列标题的帮助文本
width	number	<optional>		大于 0 则设置为该宽度，否则根据列内容自动调整列宽
align	"left" | "center" | "right"	<optional>	left	列对齐方式
enabled	boolean | string | GridItemBooleanCallback	<optional>		列是否可用（可编辑），允许以下类型 boolean 则直接使用该值 string 则以该值为关键字从行数据中取值作为判断条件 GridItemBooleanCallback 则调用回调，以返回值作为判断条件
filter	GridItemFilterCallback	<optional>		单元格取值采用该函数返回的值
text	string	<optional>		单元格以该值填充内容，忽略filter与关键字属性
visible	boolean	<optional>	true	列是否可见
resizable	boolean	<optional>	true	列是否允许调整宽度
sortable	boolean	<optional>	true	列是否允许排序
orderable	boolean	<optional>	true	列是否允许重排顺序
allcheck	boolean	<optional>	false	列为复选框类型时是否在列头增加全选复选框
shrink	boolean	<optional>	false	列为收缩列，禁用自动调整大小
class	string	<optional>		单元格元素的额外样式类型字符串（仅在重建行元素时设置）
contentWrap	boolean	<optional>	false	单元格文本是否换行（仅在重建行元素时设置）
maxLines	number	<optional>	0	大于 0 时限制显示最大行数
css	any	<optional>		单元格css样式对象（仅在重建行元素时读取）
totalCss	any	<optional>		合计行样式（仅在重建合计行元素时读取）
style	any | GridItemObjectCallback	<optional>		单元格样式（填充行列数据时读取），支持直接返回样式对象或调用函数返回（若赋值则忽略 styleFilter）
styleFilter	GridItemObjectCallback	<optional>		已过时 根据返回值填充单元格样式（填充行列数据时读取）
background	string | GridItemStringCallback	<optional>		设置单元格背景色（填充行列数据时读取），支持直接设置颜色字符串或调用函数返回（若赋值则忽略 bgFilter）
bgFilter	GridItemStringCallback	<optional>		已过时 根据返回值设置单元格背景色
switch	boolean	<optional>	false	复选框为 ui-switch 样式 @since 1.0.6
attrs	any | GridItemObjectCallback	<optional>		根据返回值设置单元格元素的附加属性，允许直接设置对象也支持调用函数返回对象
events	KeyMap.<function()>	<optional>		给单元格元素附加事件（事件函数上下文为数据行对象）
allowFilter	boolean	<optional>	false	是否允许进行列头过滤
filterValues	Array.<any>	<optional>		过滤值的数组
filterAllowNull	boolean	<optional>	false	是否区分 null 与空字符串
filterSource	Array.<ValueItem> | GridColumnFilterSourceCallback	<optional>		自定义列过滤器的数据源，支持调用函数返回数据源
filterAsValue	boolean	<optional>	false	列头过滤强制使用 Value 字段
filterTemplate	GridItemHtmlCallback	<optional>		列头过滤项的模板函数
sortFilter	GridItemSortCallback	<optional>		自定义列排序函数
sortAsText	boolean	<optional>	false	按照 DisplayValue 排序
dropOptions	DropdownOptions	<optional>		列为下拉列表类型时以该值设置下拉框的参数
dropRestrictCase	boolean	<optional>	false	下拉列表是否区分大小写
source	Array.<GridSourceItem> | Promise.<Array.<GridSourceItem>> | GridDropdownSourceCallback	<optional>		列为下拉列表类型时以该值设置下拉列表数据源，支持返回异步对象，也支持调用函数返回
sourceCache	boolean	<optional>	false	下拉列表数据源是否缓存结果（即行数据未发生变化时仅从source属性获取一次值）
iconType	"fa-light" | "fa-regular" | "fa-solid"	<optional>	fa-light	列为图标类型时以该值设置图标样式
dateMin	string	<optional>		列为日期类型时以该值作为最小可选日期值
dateMax	string	<optional>		列为日期类型时以该值作为最大可选日期值
dateDisplayFormatter	string	<optional>		列为日期类型时日期显示的格式化字符串
dateValueFormatter	string | DateFormatterCallback	<optional>		列为日期类型时自定义日期格式化字符串或函数
tooltip	string | GridItemStringCallback	<optional>		额外设置单元格的 tooltip，支持直接使用字符串或者使用函数返回的字符串
onAllChecked	function	<optional>		列头复选框改变时触发事件
onChanged	function	<optional>		单元格变化时触发事件
onFilterOk	function	<optional>		列过滤点击 OK 时触发的事件
onFiltered	function	<optional>		列过滤后触发的事件
onDropExpanded	function	<optional>		列为下拉框类型时在下拉列表展开时触发的事件

Example

[
     {
         key: 'name',
         // type: Grid.ColumnTypes.Common,
         caption: 'Name',
         captionStyle: {
             'font-style': 'italic'
         },
         width: 150,
         allowFilter: true
     },
     {
         key: 'birthday',
         type: Grid.ColumnTypes.Date,
         caption: 'Birthday',
         width: 120,
         dateMin: '1900-01-01',
         dateMax: '2025-01-01',
         dateValueFormatter: toDateValue
     },
     {
         key: 'age',
         type: Grid.ColumnTypes.Input,
         caption: 'Age',
         enabled: false,
         align: 'right',
         filter: item => {
             const ms = new Date() - new Date(item.birthday);
             const age = Math.floor(ms / 1000 / 60 / 60 / 24 / 365);
             return String(age);
         }
     },
     {
         key: 'sex',
         type: Grid.ColumnTypes.Dropdown,
         caption: 'Sex',
         source: [
             { value: 'male', text: 'Male' },
             { value: 'female', text: 'Female' },
             { value: 'other', text: 'Other' }
         ]
     },
     {
         key: 'active',
         type: Grid.ColumnTypes.Checkbox,
         caption: 'Active'
     },
     {
         key: 'remove',
         type: Grid.ColumnTypes.Icon,
         text: 'times',
         resizable: false,
         sortable: false,
         orderable: false,
         tooltip: 'Remove',
         events: {
             onclick: () => {
                 showConfirm('Remove', 'Are you sure you want to remove this person?', [
                     {
                         key: 'yes',
                         text: 'Yes',
                         trigger: () => {
                             console.log('yes');
                             return true;
                         }
                     },
                     {
                         key: 'no',
                         text: 'No'
                     }
                 ], 'question')
             }
         }
     }
 ]