API
Component

DataTables ($UI/system/components/justep/dataTables/dataTables)

使用范围：UI2

Contents

component DataTables ($UI/system/components/justep/dataTables/dataTables) extends ViewComponent

<b>使用场景</b>：展示网格数据、分页显示数据; <b>使用方法</b>：将组件放入设计器中，并绑定需要展示数据的数据组件，可以使用CSS控制样式、可以排序、可以显示页脚汇总; ## <b>文档链接</b>：#http://docs.newdao.net/zhuo-mian-nei-rong-zu-jian/lie-886828-jian-535529.html#

Constructor Top

  DataTables ()
  DataTables ( options)

Attributes Top

string class

组件class
string data

关联的data组件xid
boolean disableInfiniteLoad

禁止上划加载数据
boolean disablePullToRefresh

禁止下拉刷新
string filter

数据过滤表达式，表达式中可以使用$model,$object,$parent,$row(执行过滤的数据行对象)变量
boolean flexibleWidth

表格宽自适应父容器，默认值：false
boolean multiSelect

使用checkBox多选，默认值：false
boolean ordering

使用排序，默认值：true
boolean responsive

响应式，flexibleWidth=false时生效，默认值：false
string rowActiveClass

行选中的class
string rowAttr

增加在行上属性的表达式，表达式执行结果返回Object，可以包含style、class属性，也可以增加自定义属性 表达式中可以使用$model,$row(当前渲染的数据行对象)变量 如： 1、简单 {style:'height:80px;',class:'...'} 2、根据数据设置不同底色 $row.val('fString')=='北京'?{style:'background:red;'}:{style:'background:blue;'} <b>注：</b> 修改值时不会刺激执行

boolean scrollCollapse

表格高自适应,配合scrollY使用，默认值：false
boolean scrollCollapse

表格高自适应,配合scrollY使用，默认值：false
string scrollX

水平滚动（非空有效），该属性可以是css设置，或者一个数字（作为像素量度来使用）
string scrollY

垂直滚动（非空有效），该属性可以是css设置，或者一个数字（作为像素量度来使用），充满父容器可以使用100%
boolean showRowNumber

显示行号，默认值：false
boolean stateDuration

保存状态时长
boolean stateSave

保存状态，默认值：false
boolean useFooter

使用footer，默认值：false，打开后可以通过api：setFooterData设置footer显示内容
string xid

组件标示

Methods Top

void addRow (Row row)
void clear ()
list<Row> getCheckeds ()
Data getData ()
Row getDataRow (node node)
string getFilter ()
object getRow (Row row)
Row getSelection ()
void hideCol (string col)
boolean isChecked (Row row)
void reload ()
void removeRow (Row row)
void setAllRowChecked (boolean checked)
void setFilter (string filter)
void setFooterData (object footerData)
void setRowChecked (Row row, boolean checked)
void setRowCss (Row row, object css)
void setSelection (Row row)
void showCol (string col)

Events Top

void onBeforeInit (BeforeInitEvent event)
void onCellRender (CellRenderEvent event)
void onFilter (FilterEvent event)
void onFooterRender (FooterRenderEvent event)
void onHeaderRender (HeaderRenderEvent event)
void onInit (ViewEvent event)
void onLoaded (ViewEvent event)
void onRowCheck (RowCheckEvent event)
void onRowChecked (RowCheckedEvent event)
void onRowCheckedAll (RowCheckedAllEvent event)
void onRowClick (RowClickEvent event)
void onRowDblClick (RowClickEvent event)
void onRowSelect (RowSelectEvent event)

Constructor details Top

public DataTables ()

<b>使用场景</b>：展示网格数据、分页显示数据; <b>使用方法</b>：将组件放入设计器中，并绑定需要展示数据的数据组件，可以使用CSS控制样式、可以排序、可以显示页脚汇总; ## <b>文档链接</b>：#http://docs.newdao.net/zhuo-mian-nei-rong-zu-jian/lie-886828-jian-535529.html#

public DataTables ( options)

构造函数

Inherited from ViewComponent

	
		参数options格式类似{parent:xx, config:{}}，parent是组件的父节点，允许为空或不指定，config是组件的参数选项

Parameters

options

参数选项

Attributes Detail Top

public string class

组件class

	
		"常用": "table",
		"紧凑型": "table-condensed",
		"条纹状": "table-striped",
		"边框": "table-bordered",
		"鼠标悬停高亮": "table-hover",
		"列头对齐方式": "x-dt-title-center,x-dt-title-left,x-dt-title-right,x-dt-title-justify"

public string data

关联的data组件xid

public boolean disableInfiniteLoad

禁止上划加载数据

public boolean disablePullToRefresh

禁止下拉刷新

public string filter

数据过滤表达式，表达式中可以使用$model,$object,$parent,$row(执行过滤的数据行对象)变量

public boolean flexibleWidth

表格宽自适应父容器，默认值：false

public boolean multiSelect

使用checkBox多选，默认值：false

public boolean ordering

使用排序，默认值：true

public boolean responsive

响应式，flexibleWidth=false时生效，默认值：false

public string rowActiveClass

行选中的class

public string rowAttr

增加在行上属性的表达式，表达式执行结果返回Object，可以包含style、class属性，也可以增加自定义属性 表达式中可以使用$model,$row(当前渲染的数据行对象)变量 如： 1、简单 {style:'height:80px;',class:'...'} 2、根据数据设置不同底色 $row.val('fString')=='北京'?{style:'background:red;'}:{style:'background:blue;'} <b>注：</b> 修改值时不会刺激执行

public boolean scrollCollapse

表格高自适应,配合scrollY使用，默认值：false

public boolean scrollCollapse

表格高自适应,配合scrollY使用，默认值：false

public string scrollX

水平滚动（非空有效），该属性可以是css设置，或者一个数字（作为像素量度来使用）

public string scrollY

垂直滚动（非空有效），该属性可以是css设置，或者一个数字（作为像素量度来使用），充满父容器可以使用100%

public boolean showRowNumber

显示行号，默认值：false

public boolean stateDuration

保存状态时长

public boolean stateSave

保存状态，默认值：false

public boolean useFooter

使用footer，默认值：false，打开后可以通过api：setFooterData设置footer显示内容

public string xid

组件标示

Methods Detail Top

public void addRow (Row row)

增加行

Parameters

Row row

data的行对象

Return Value

void

public void clear ()

清除DataTables组件所有行

Return Value

void

public list<Row> getCheckeds ()

返回多选选中的行

Return Value

list<Row>

rows 行数组

public Data getData ()

获取DataTables绑定的data对象

Return Value

Data

public Row getDataRow (node node)

根据行html节点获取bind的Data行对象

Parameters

node node

html节点

Return Value

Row

返回Data的行对象

public string getFilter ()

获取DataTables绑定的data filter表达式

Return Value

string

public object getRow (Row row)

根据行ID获取DataTables行对象,不存在返回null

Parameters

Row row

行

Return Value

object

返回DataTables行对象

public Row getSelection ()

返回选中行

Return Value

Row

选中行

public void hideCol (string col)

隐藏列

Parameters

string col

列名

Return Value

void

public boolean isChecked (Row row)

多选是否选中行

Parameters

Row row

行

Return Value

boolean

是否选中

public void reload ()

重新加载DataTables组件

Return Value

void

public void removeRow (Row row)

删除行

Parameters

Row row

data的行对象

Return Value

void

public void setAllRowChecked (boolean checked)

设置所有行多选状态

Parameters

boolean checked

选中状态

Return Value

void

public void setFilter (string filter)

设置data filter表达式

Parameters

string filter

filter表达式

Return Value

void

public void setFooterData (object footerData)

设置footer数据

Parameters

object footerData

footer数据，格式为：{列名:数据,...}，如：{sName:'合计：',sInt:500}

Return Value

void

public void setRowChecked (Row row, boolean checked)

设置行多选状态

Parameters

Row row

行
boolean checked

选中状态

Return Value

void

public void setRowCss (Row row, object css)

设置行的css

Parameters

Row row

行
object css

样式，同jquery格式，如:{height:100,width:50,...}

Return Value

void

public void setSelection (Row row)

设置选中行

Parameters

Row row

行

Return Value

void

public void showCol (string col)

显示列

Parameters

string col

列名

Return Value

void

Events Detail Top

public void onBeforeInit (BeforeInitEvent event)

[回调型事件]创建DataTables组件前事件

Parameters

BeforeInitEvent event


结构如下：

{ "source" : 组件的js对象, "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明 "settings" : 创建DataTables的参数 }

Return Value

void

public void onCellRender (CellRenderEvent event)

[回调型事件]单元格显示渲染

Parameters

CellRenderEvent event


结构如下：

{ "source" : 组件的js对象, "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明 "rowID" : 行ID "row" : 行 "html" : 输出显示的html，通过修改html影响展现 "colVal" : 列的值 "colName" : 列名 }

Return Value

void

public void onFilter (FilterEvent event)

[回调型事件]数据过滤，在filter表达式执行后触发，可以实现排序、过滤等逻辑

Parameters

FilterEvent event


结构如下：

{ "source" : 组件的js对象, "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明 "datas": 数据行数组 }

Return Value

void

public void onFooterRender (FooterRenderEvent event)

[回调型事件]footer显示渲染

Parameters

FooterRenderEvent event


结构如下：

{ "source" : 组件的js对象, "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明 "tfoot" : tfoot dom对象 "data": 绑定的data对象, "start": start, "end" : end, "display" : display }

Return Value

void

public void onHeaderRender (HeaderRenderEvent event)

[回调型事件]表头显示渲染

Parameters

HeaderRenderEvent event


结构如下：

{ "source" : 组件的js对象, "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明 "thead" : thead dom对象 "data": 绑定的data对象, "start": start, "end" : end, "display" : display }

Return Value

void

public void onInit (ViewEvent event)

[回调型事件]创建DataTables组件事件

Parameters

ViewEvent event


结构如下：

{ "source" : 组件的js对象, "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明 }

Return Value

void

public void onLoaded (ViewEvent event)

[回调型事件]DataTables组件记载事件

Parameters

ViewEvent event


结构如下：

{ "source" : 组件的js对象, "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明 }

Return Value

void

public void onRowCheck (RowCheckEvent event)

[回调型事件]多选勾选时，可以使用cancel取消

Parameters

RowCheckEvent event


结构如下：

{ "source" : 组件的js对象, "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明 "domEvent" : 触发的dom event对象,可以使用event.domEvent.stopPropagation();阻止事件冒泡 "rowID" : 对应的行ID "row" : 对应的行 "checked": 勾选状态 "cancel": 取消当前操作 }

Return Value

void

public void onRowChecked (RowCheckedEvent event)

[回调型事件]多选勾选后

Parameters

RowCheckedEvent event


结构如下：

{ "source" : 组件的js对象, "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明 "domEvent" : 触发的dom event对象,可以使用event.domEvent.stopPropagation();阻止事件冒泡 "rowID" : 对应的行ID "row" : 对应的行 "checked": 勾选状态 }

Return Value

void

public void onRowCheckedAll (RowCheckedAllEvent event)

[回调型事件]多选全选

Parameters

RowCheckedAllEvent event


结构如下：

{ "source" : 组件的js对象, "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明 "checked": 勾选状态 }

Return Value

void

public void onRowClick (RowClickEvent event)

[回调型事件]单击行事件

Parameters

RowClickEvent event


结构如下：

{ "source" : 组件的js对象, "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明 "domEvent" : 触发的dom event对象 "rowID" : 对应的行ID "row" : 对应的行 }

Return Value

void

public void onRowDblClick (RowClickEvent event)

[回调型事件]双击行事件

Parameters

RowClickEvent event


结构如下：

{ "source" : 组件的js对象, "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明 "domEvent" : 触发的dom event对象,可以使用event.domEvent.stopPropagation();阻止事件冒泡 "rowID" : 对应的行ID "row" : 对应的行 }

Return Value

void

public void onRowSelect (RowSelectEvent event)

[回调型事件]选中行

Parameters

RowSelectEvent event


结构如下：

{ "source" : 组件的js对象, "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明 "rowID" : 行ID "row" : 行 }

Return Value

void