Grid

 <div id="grid"></div>

#grid>.ui-grid {
     width: 600px;
     height: 400px;
 }

const grid = new Grid('#grid', GetTextByKey);
 grid.columns = [
     {
         key: 'name',
         caption: 'Name',
         width: 140,
         allowFilter: true
     },
     {
         key: 'age',
         caption: 'Age',
         type: Grid.ColumnTypes.Input,
         width: 80
     },
     {
         key: 'study',
         caption: 'Study',
         type: Grid.ColumnTypes.Dropdown,
         width: 120,
         source: [
             { value: 'a', text: 'A' },
             { value: 'b', text: 'B' },
             { value: 'c', text: 'C' }
         ]
     }
 ];
 grid.multiSelect = true;
 grid.init();
 grid.source = [
     { name: '张三', age: '19', study: 'a' },
     { name: '李四', age: '24', study: 'a' },
     { name: '王五', age: '20', study: 'c' }
 ];

Classes

Grid

Members

(readonly) allSource :Array.<GridRowItem>

Description:

• 返回所有数据的数据（未过滤）

Source:

• grid.js, line 1181

Type:

• Array.<GridRowItem>

(readonly) changed :boolean

Description:

• 获取当前 Grid 是否已发生改变

Source:

• grid.js, line 1168

Type:

• boolean

(readonly) currentItem :GridRowItem|null

Description:

• 获取当前选中的行对象

Source:

• grid.js, line 1216

Since:

• 1.0.7

Type:

• GridRowItem | null

(readonly) element :HTMLDivElement

Description:

• 获取 Grid 的页面元素

Source:

• grid.js, line 1161

Type:

• HTMLDivElement

loading :boolean

Description:

• 获取或设置 Grid 当前的加载状态

Source:

• grid.js, line 1330

Type:

• boolean

readonly :boolean

Description:

• 获取或设置 Grid 是否为只读

Source:

• grid.js, line 1262

Type:

• boolean

scrollTop :number

Description:

• 获取或设置 Grid 当前滚动的偏移量

Source:

• grid.js, line 1348

Type:

• number

(readonly) selectedIndex :number

Description:

• 获取当前选中行的索引，为 -1 则当前没有选中行

Source:

• grid.js, line 1256

Type:

• number

selectedIndexes :Array.<number>

Description:

• 获取或设置当前选中的行索引的数组，设置后会刷新列表

Source:

• grid.js, line 1306

Type:

• Array.<number>

(readonly) sortKey :string|null

Description:

• 获取当前排序的列关键字，为 null 则当前无排序列

Source:

• grid.js, line 1203

Type:

• string | null

source :Array.<GridRowItem>

Description:

• 获取已过滤的数据数组，或者设置数据并刷新列表

Source:

• grid.js, line 1272

Type:

• Array.<GridRowItem>

(readonly) sourceExpandable :Array.<GridExpandableObject>

Description:

• 获取已过滤的数据中的扩展对象数组

Source:

• grid.js, line 1189

Properties:

Type:

• Array.<GridExpandableObject>

(readonly) startIndex :number

Description:

• 获取虚模式起始索引

Source:

• grid.js, line 1249

Type:

• number

total :GridRowItem

Description:

• 获取或设置合计行数据

Source:

• grid.js, line 1296

Since:

• 1.0.1

Type:

• GridRowItem

(readonly) virtual :boolean

Description:

• 获取当前是否为虚模式状态

Source:

• grid.js, line 1196

Type:

• boolean

(static, readonly) ColumnTypes :GridColumnTypeEnum

Description:

• 列类型枚举

Source:

• grid.js, line 1116

Properties:

Type:

• GridColumnTypeEnum

Methods

addItem(item, indexopt) → {GridRowItem}

Description:

• 添加行数据

Source:

• grid.js, line 2125

Since:

• 1.0.1

Parameters:

Returns:

Type

GridRowItem

addItems(array, indexopt) → {Array.<GridRowItem>}

Description:

• 批量添加行数据

Source:

• grid.js, line 2167

Since:

• 1.0.1

Parameters:

Returns:

Type

Array.<GridRowItem>

clearHeaderCheckbox()

Description:

• 清除列头复选框的选中状态

Source:

• grid.js, line 1808

expandAll(expandedopt) → {boolean}

Description:

• 展开/收折所有行

Source:

• grid.js, line 2465

Parameters:

Returns:

Type

boolean

export(compressedopt, moduleopt) → {Promise.<GridExportData>}

Description:

• 导出已压缩的数据源，结构为

  {
    columns: [],
    source: [],
    rowHeight: number,
    sortDirection: number,
    sortKey?: string,
    sortArray?: Array<{
      column: string,
      order: "asc" | "desc"
    }>
  }
  

Source:

• grid.js, line 2320

Since:

• 1.0.2

Parameters:

Returns:

Type

Promise.<GridExportData>

init(containeropt)

Description:

• 初始化Grid控件

Source:

• grid.js, line 1361

Parameters:

refresh()

Description:

• 重新填充Grid单元格数据

Source:

• grid.js, line 1680

reload(keepopt)

Description:

• 重新计算需要渲染的行，并载入元素，一般需要在高度变化时调用

Source:

• grid.js, line 1612

Parameters:

removeItem(index) → {GridRowItem}

Description:

• 删除行数据

Source:

• grid.js, line 2213

Since:

• 1.0.1

Parameters:

Returns:

Type

GridRowItem

removeItems(indexesopt) → {Array.<GridRowItem>}

Description:

• 批量删除行数据

Source:

• grid.js, line 2245

Since:

• 1.0.1

Parameters:

Returns:

Type

Array.<GridRowItem>

resetChange()

Description:

• 把所有行重置为未修改的状态

Source:

• grid.js, line 1707

resize(forceopt, keepopt, callbackopt)

Description:

• 调整 Grid 元素的大小，一般需要在宽度变化时（如页面大小发生变化时）调用

Source:

• grid.js, line 1574

Parameters:

scrollToIndex(index)

Description:

• 滚动到指定行的位置

Source:

• grid.js, line 1563

Parameters:

setData(source)

Description:

• 设置数据列表，该方法为 source 属性的语法糖

Source:

• grid.js, line 1555

Parameters:

setItem(index, item)

Description:

• 设置单行数据

Source:

• grid.js, line 2097

Since:

• 1.0.1

Parameters:

showSortPanel(callbackopt, layoutopt)

Description:

• 显示多列排序设置面板

Source:

• grid.js, line 1819

Since:

• 1.0.1

Parameters:

sort(reloadopt)

Description:

• 根据当前排序列数组进行多列排序

Source:

• grid.js, line 1758

Parameters:

sortColumn(reloadopt)

Description:

• 根据当前排序字段进行列排序

Source:

• grid.js, line 1720

Parameters:

Events

cellClicked

Description:

• 单元格单击时触发，colIndex 为 -1 则表示点击的是行的空白处

Source:

• grid.js, line 1028

This:

• Grid

Parameters:

Returns:

Type

boolean

onBodyScrolled

Description:

• 列滚动时触发的事件

Source:

• grid.js, line 1073

This:

• Grid

Parameters:

onCellDblClicked

Description:

• 单元格双击时触发的事件，colIndex 为 -1 则表示点击的是行的空白处

Source:

• grid.js, line 1044

This:

• Grid

Parameters:

onColumnChanged

Description:

• 列发生变化时触发的事件

Source:

• grid.js, line 1064

This:

• Grid

Parameters:

onRowChanged

Description:

• 行发生变化时触发的事件

Source:

• grid.js, line 1101

Since:

• 1.0.3

This:

• Grid

Parameters:

onRowCollapsed

Description:

• 扩展行收缩时触发的事件

Source:

• grid.js, line 1091

This:

• Grid

Parameters:

onRowDblClicked

Description:

• 行双击时触发的事件

Source:

• grid.js, line 1051

This:

• Grid

Parameters:

onRowExpanded

Description:

• 扩展行展开时触发的事件

Source:

• grid.js, line 1082

This:

• Grid

Parameters:

onSelectedRowChanged

Description:

• 选中行发生变化时触发的事件

Source:

• grid.js, line 1036

This:

• Grid

Parameters:

willSelect

Description:

• 即将选中行时触发

Source:

• grid.js, line 1019

This:

• Grid

Parameters:

Returns:

Type

boolean