Table数据表格
数据表格的使用有两种方式,一种是表头由html控制,一种是表头由js来控制,只需绑定表格的id即可,具体使用方式如下
方式一,表头由html编写 【推荐使用这种方式,更加直观!】
运行代码
方式二,表头由js编写
运行代码
以上是表格的两种使用方式,具体的参数设置html方式与js方式的字段名完全一致,唯一的区别就是html是通过设置属性data来实现的,例如table标签中设置列宽data-width="300"
API-ice.table方法的json传参设置

ice.table的json传参设置

名称 类型 必填 默认 说明
id String - 用于渲染该表格的id
url String - 异步数据请求的链接
type String post ajax异步请求的类型,有效值:post、get
size Number 10 每页数据条数
paging Bool true 是否显示分页
param Json - 接口传参,格式为key、value形式
thead Json true

table标签中如果没有thead标签,此处必填

thead格式:

data Json - 如果不需要通过url来请求数据,可直接通过该参数赋值数据
parseData Json -

如果你的接口返回数据格式不符合 table 的默认规定格式,可以通过该参数重新定义error、count、hidden、list、message

table默认规定格式:

例如你的接口返回信息并不是上面的默认格式,如下:

那么你可以通过parseData来解析成 table 需要的参数:

highlight Bool true 是否高亮当前选中的行
click String - 点击当前行的回调方法名称
form Function - 表单查询后的回调函数
checkbox Function -

复选框选中的回调函数

radio Function -

单选框选中的回调函数

以上所有的回调方法说明:

绑定表单

数据表格支持绑定多个form表单,她的使用是非常简洁的,只需要给form添加data-table为table的id即可,例如你的数据表格id是table,那么form元素上将data-table设为table的idtable,绑定表单后,查询数据时,ajax异步请求的数据会自动带上表单的参数,例如你的表单定义了一个input输入框用来搜索数据,input的name为search,输入的内容为周杰伦,那么提交表单后,数据表格会劫持该表单的请求,并把search等于周杰伦的数据自动附加到当前的表格请求中,接下来我们先看一下绑定的form表单形式。

提示:form表单的编写与原生一样,能正常提交表单即可,所以按钮的类型type应该为submit,唯一不同的地方就是form标签的action属性不用写提交表单的地址,可以用#号来代替,或者干脆不写。

运行代码
数据操作

关于数据操作,咱们的Table妹内置了一些非常方便的方法和返回值,让你自由的操作每条数据,每个字段。

我本人在做这个数据表格之前曾花费了很大的精力研究了一下很多第三方的数据表格,最后抛去各种不便和编写方式,定制了一套属于我们iceui女神自己标准的数据表格,该方式目前是前无仅有的,一些灵感也来源于我前不久开发的iceView模板引擎(类似vue,比vue更简洁),在语法上拥有独立的环境变量。

运行代码
数据模板template

最大的一个亮点就是数据模板了,咱家的Table美眉将数据模板做的非常简洁(各种赞美省略五万字……直奔主题吧!),你可以在表头中直接定义需要展示的数据模板,用template标签表示,也可以在js的thead中的template参数中设置,这两者是完全统一的,语法拥有独立的环境变量,可使用js原生的语法来写,非常的方便,内置了this、index、list等变量。

js语法在花括号中表示

单行语法使用一对花括号: { js语言 },例如:{this.title} 输出当前这条数据title字段的内容

多行语法使用一对花括号+%符号: {% js语言 %},如下:

js中传参的方式,template还支持传递一个function,你可以在function中return返回自定义的html哦。

数据模板使用示例
运行代码
上面html中的template等同下面的js设置方式