dataTables组件，数据表格组件。

目录

一、综述
二、DOM结构
三、样式
四、属性
五、方法
六、事件
七、操作
八、案例

一. 综述

dataTables组件用来展示网格数据，分页显示数据、可以使用CSS控制样式、可以排序、可以显示页脚汇总。
dataTables组件是jquery原生插件DataTables的扩展。getRow方法、onBeforeInit事件中的event.settings使用原生API。

组件路径：$UI/system/components/justep/dataTables/

组件标识：UI2/system/components/justep/dataTables/dataTables

二. DOM结构

  • 典型dom结构

<div component="$UI/system/components/justep/dataTables/dataTables" flexibleWidth="true" rowActiveClass="active" xid="dataTables1" class="table table-hover table-striped" data="list">
    <columns xid="columns1">
      <column name="fID" xid="column3"/>
      <column name="fTitle" xid="column4"/>
      <column name="fState" xid="column5"/>
    </columns>
</div>

三. 样式

  • table

基础样式（必须）。

  • table-hover（鼠标悬停高亮）、table-striped（条纹状）

背景样式。

  • table-condensed

紧凑型显示。

  • table-bordered

边框。

  • x-dt-title-center、x-dt-title-left、x-dt-title-right、x-dt-title-justify

列头、单元格对齐方式。

四. 属性

组件具有公共属性，请参考组件公共属性

  • data

[string]关联的data组件xid

  • multiSelect

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

  • showRowNumber

[boolean]显示行号，默认值：false

  • ordering

[boolean]使用排序，默认值：true

  • stateSave

[boolean]保存状态，默认值：false

  • stateDuration

[string]保存状态时长，输入时长，如：“10”，也可以是“永久有效”，默认为：空

  • responsive

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

  • flexibleWidth

[boolean]表格宽度自适应于父容器，默认值：false

  • scrollX

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

  • scrollY

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

  • scrollCollapse

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

  • rowActiveClass

[string]行选中的class，默认值：active

  • rowAttr

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

  • useFooter

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

  • disablePullToRefresh

[boolean]禁止下拉刷新，默认值：true

  • disableInfiniteLoad

[boolean]禁止上划加载数据，默认值：true

  • xid

[string]组件标示

五. 方法

组件具有公共方法，请参考组件公共方法

  • addRow

void addRow (Row row)
增加行，这个方法一般不用调用，dataTables会自动感知data的数据变化，data新增行后dataTables会自动调用新增显示。

> 参数

row：[Row] data的行对象

> 返回值

void

  • clear

void clear ()
清除DataTables组件所有行，这个方法一般不用调用，dataTables会自动感知data的数据变化，data清除后dataTables会自动调用清除显示。

> 返回值

void

  • getCheckeds

list getCheckeds ()
返回多选选中的行

> 返回值

list rows 行数组

>例：

this.comp("dataTables1").getCheckeds();
  • getData

Data getData ()
获取DataTables绑定的data对象

> 返回值

data

>例：

this.comp("dataTables1").getData();
  • getDataRow

Data getDataRow (node node)
根据行html节点获取bind的Data行对象

> 参数

node：[node] html节点

> 返回值

row

>例：

//点击查看获取当前行的fTitle
Model.prototype.dataTables1CellRender = function(event){
    if(event.colName=="inventory"){
        event.html="<a href='' class='v'>查看</a> <a href='' class='edit'>编辑</a>";
    }
};
Model.prototype.dataTables1RowClick = function(event){
    var link=$(event.domEvent.target);
    if(link.hasClass("v")){
        var fTitle=this.comp("dataTables1").getDataRow(link).val("fTitle");
    }
};
  • getRow

TR getRow (Data.Row row)
根据行ID获取TR,不存在返回null
这个返回的对象是dataTables的行对象，可使用dataTables的原生api，详细参看datatables官网：
http://www.datatables.net/
http://www.datatables.net/reference/api/

> 参数

row:[Data.Row] 行

> 返回值

TR

>例：

//获取dataTables当前行对象
var rowObj=this.comp("dataTables1").getRow(data.getRowByID());
//获取fTitle
var fTitle=rowObj.data().val("fTitle");
  • getSelection

Data.Row getSelection ()
返回选中行

> 返回值

Data.Row

>例：

this.comp("dataTables1").getSelection();
  • hideCol

void hideCol (string col)
隐藏列

> 参数

col:[string] 列名

> 返回值

void

>例：

this.comp("dataTables1").hideCol("fState");
  • showCol

void showCol (string col)
显示列

> 参数

col：[string] 列名

> 返回值

void

>例：

this.comp("dataTables1").showCol("fState");
  • isChecked

boolean isChecked (Data.Row row)
多选是否选中行，选中返回true，未选中返回false

> 参数

row：[Data.Row] 行

> 返回值

boolean

>例：

this.comp("dataTables1").isChecked(data.getRowByID());
  • reload

void reload ()
重新加载DataTables组件，这个方法一般不用调用，dataTables会自动感知data的数据变化，自动重新加载。

> 返回值

void

  • removeRow

void removeRow (Row row)
删除行，这个方法一般不用调用，dataTables会自动感知data的数据变化，data删除行后dataTables会自动调用删除显示。

> 参数

row：[Row] data的行对象

> 返回值

void

  • setAllRowChecked

void setAllRowChecked (boolean checked)
设置所有行多选状态

> 参数

checked：[boolean] 选中状态

> 返回值

void

>例：

this.comp("dataTables1").setAllRowChecked(true);
  • setFooterData

void setFooterData (object footerData)
设置footer数据

> 参数

footerData：[object] footer数据，格式为：{列名:数据,…}，如：{sName:’合计：’,sInt:500}

> 返回值

video

>例：

this.comp('dataTables1').setFooterData({fTitle:'合计：',fState:'全部'});
  • setRowChecked

void setRowChecked (Data.Row row, boolean checked)
设置行的多选状态

> 参数

row：[Data.Row] 行； checked:[boolean] 选中状态

> 返回值

void

>例：

this.comp("dataTables1").setRowChecked(data.getRowByID(),true);
  • setRowCss

setRowCss (Row row, object css)
设置行的css

> 参数

row：[Row] 行对象； css：[object] 样式，同jquery格式，如:{height:100,width:50,…}

> 返回值

void

>例：

//单击行变色
Model.prototype.dataTables1RowClick = function(event){
    this.comp("dataTables1").setRowCss(event.row,{"background-color":"yellow"});
};
  • setSelection

void setSelection (Data.Row row)
设置选中行

> 参数

row：[Data.Row] 行

> 返回值

void

>例：

this.comp("dataTables1").setSelection(data.last());
  • 构造方法

new dataTables(option)
动态创建dataTables组件

> 参数

option：构造dataTables的初始参数参考组件属性

> 返回值

dataTables组件

>例：

var dataTables = require("$UI/system/components/justep/dataTables/dataTables");

var parentNode = this.getElementByXid("window");
var option = {
    parentNode : parentNode,
    //dataTables的属性，设计时有的属性都可以设置
    data : "list",
    class:'table table-hover table-striped',
    flexibleWidth : true,
    responsive : false,
    // 列定义
    columns : [{"sName":"fID","xid":"column3"},{"sName":"fTitle","xid":"column4"}
              ,{"sName":"fState","xid":"column5"}]
};
new dataTables(option);
  • get

Object get (String name)
获取属性

> 参数

name：[String] 属性名，取值范围：data、rowActiveClass、rowAttr

> 返回值

Object

>例：

  this.comp("dataTables1").get("data");
  • set

void set (json arg)
设置属性值

>参数

arg：[json] 属性值对，结构如下：

{
“data” : 关联的data组件xid（只能在onBeforeInit事件中使用），
“rowActiveClass” : 行选中的class，默认值：active
“rowAttr” : 增加在行上属性的表达式，表达式执行结果返回Object，可以包含style、class属性，也可以增加自定义属性表达式中可以使用$model,$row(当前渲染的数据行对象)变量
}

> 返回值

void

>例：

this.comp("dataTables1").set({
  "data":"listData",
  "rowActiveClass":"current"
  "rowAttr":"$row.val('fID')=='1'?{style:'background:red;'}:
            {style:'background:blue;'}"
});

六. 事件

  • public void onBeforeInit (object event)
    创建DataTables组件前事件

event结构如下：

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

>例：

//修改dataTables的属性
Model.prototype.dataTables1BeforeInit = function(event){
    event.source.set({"data":"listData"});
};
  • public void onInit (object event)
    创建DataTables组件事件

event结构如下：

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

>例：

//隐藏fState列
Model.prototype.dataTables1Init = function(event){
    event.source.hideCol("fState");
};
  • public void onCellRender (object event)
    单元格显示渲染

event结构如下：

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

>例：

//修改某列的内容
Model.prototype.dataTables1CellRender = function(event){
    if(event.colName == "inventory"){
        event.html = "<a href='' cass='view'>查看</a>";
    }
};
  • public void onFooterRender (object event)
    Footer显示渲染，组件初使化前和初使化后触发

event结构如下：

{
“source” : 组件的js对象,
“bindingContext” : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明
“tfoot” : tfoot dom对象
“data”: 绑定的data对象,
“start”: 数组中当前显示的起点,
“end” : 数组中当前显示终点,
“display” : 所有数据数组的显示位置
}

>例：

//设置Footer数据
Model.prototype.dataTables1FooterRender = function(event){
    event.source.setFooterData({fTitle:'合计：',fState:'全部'});
};
  • public void onHeaderRender (object event)
    Header显示渲染，组件初使化前和初使化后触发

event结构如下：

{
“source” : 组件的js对象,
“bindingContext” : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明
“thead” : thead dom对象
“data”: 绑定的data对象,
“start”: 数组中当前显示的起点,
“end” : 数组中当前显示终点,
“display” : 所有数据数组的显示位置
}

>例：

//获取header并隐藏
Model.prototype.dataTables1HeaderRender = function(event){
    $(event.thead).hide();
};
  • public void onLoaded (object event)
    DataTables组件加载完成事件

event结构如下：

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

>例：

//获取当前对象
Model.prototype.dataTables1Loaded= function(event){
    event.source;
};
  • public void onRowCheck (object event)
    多选勾选选中时事件，可以使用cancel取消

event结构如下：

{
“source” : 组件的js对象,
“bindingContext” : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明
“rowID” : 对应的行ID
“row” : 对应的行
“checked”: 勾选状态
“cancel”: 取消当前操作
}

>例：

//获取当前选中行ID
Model.prototype.dataTables1RowCheck = function(event){
    event.rowID;
};
  • public void onRowChecked (object event)
    多选勾选选中后事件

event结构如下：

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

>例：

//获取当前选中行ID
Model.prototype.dataTables1RowChecked = function(event){
    event.rowID;
};
  • public void onRowCheckedAll (object event)
    多选勾选全选中后事件

event结构如下：

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

>例：

//获取全选框的选中状态
Model.prototype.dataTables1RowCheckedAll = function(event){
    evnet.checked;
};
  • public void onRowClick (object event)
    单击行事件

event结构如下：

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

>例：

//获取触发的对象并判断
Model.prototype.dataTables1RowClick = function(event){
    var link=$(event.domEvent.target);
    if(link.hasClass("current")){}
};
  • public void onRowDblClick (object event)
    双击行事件

event结构如下：

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

>例：

//获取选中行ID
Model.prototype.dataTables1RowDblClick = function(event){
    event.rowID;
};
  • public void onRowSelect (object event)
    选中行事件

event结构如下：

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

>例：

//获取选中行ID
Model.prototype.dataTables1RowSele = function(event){
    event.rowID;
};
  • public void onFilter (FilerEvent event)
    数据行过滤事件，通过修改event.data影响数据

event结构如下：

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

>例：

//获取data数据行数组
Model.prototype.dataTables1Filter= function(event){
    event.datas;
};

七. 操作

  • (无)

八. 案例

1、批量删除
1
  • 增加dataTables组件、data组件
  • 设置dataTables组件属性：绑定显示的data数据，multiSelect改为true（显示多选框）
  • 在组件上点右键，选择添加列，选择要显示的列，点确定按钮。
  • 增加button组件，绑定onclick事件
  • 在onclick事件，实现获取多选行对象并删除
1

代码示例：


<div component="$UI/system/components/justep/dataTables/dataTables" flexibleWidth="true" useFooter="true" showRowNumber="false" xid="dataTables1" rowActiveClass="active" class="table table-hover table-striped" data="list" multiSelect="true">
    <columns xid="columns1">
      <column name="fID" xid="column3" className="x-dt-cell-center"/>
      <column name="fTitle" xid="column4"/>
      <column name="fState" xid="column5" width="40" className="x-dt-cell-center"/>
    </columns>
</div>


Model.prototype.delBtnClick = function(event){
  var checkedRows=this.comp("dataTables1").getCheckeds();
  this.comp("list").deleteData(checkedRows);
};
2、显示按钮、链接
  • 增加dataTables组件、data组件，给data组件增加一列fOperate，用于显示操作按钮
  • 设置dataTables组件属性：绑定显示的data数据
  • 在组件上点右键，选择添加列，选择要显示的列，点确定按钮
  • dataTables组件增加onCellRender事件
  • 显示按钮——onCellRender事件中的event.html可以控制单元格的展现，给event.html设置为<button>，就可以展现出按钮
  • 显示链接——onCellRender事件中的event.html可以控制单元格的展现，给event.html设置为<a>，就可以展现出链接
  • 在添加的按钮和链接的单击事件中获得model对象的方法
    • v3.3版本及以前：使用justep.Bind.contextFor(this).$model
    • v3.4版本及以后：使用justep.Util.getModel(this)

代码示例：


<div component="$UI/system/components/justep/dataTables/dataTables" flexibleWidth="true" rowActiveClass="active" class="table table-hover table-striped" xid="dataTables1" useFooter="false" multiSelect="false" showRowNumber="false" data="list" onCellRender="dataTables1CellRender" onRowClick="dataTables1RowClick">
    <columns xid="columns1">
      <column name="fID" xid="column3" className="x-dt-cell-center"/>
      <column name="fTitle" xid="column4"/>
      <column name="fState" xid="column5" width="40" className="x-dt-cell-center"/>
      <column name="fOperate" xid="column6" label="操作" width="40" className="x-dt-cell-center"/>
    </columns>
  </div>


Model.prototype.dataTables1CellRender = function(event){
    if(event.colName=="fOperate"){
        event.html = "<button class='btn btn-default btnDel' onclick='justep.Bind.contextFor(this).delData(event,"" + event.rowID + "")'>删除</button>";
        //上面这句代码中，第一个event是onclick的dom事件对象，第二个event是onCellRender的事件对象，this是button这个节点
    }
};

Model.prototype.delData = function(event, rowid) {
    var row = this.comp("mainData").getRowByID(rowid);
    this.comp("mainData").deleteData(row);
    event.stopPropagation();//停止事件的传播，否则还会出发RowClick事件
};

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443