| 多选 | 序号 | 标题 | 内容 | 浏览量 | 操作 编辑 删除 查看 |
|---|
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格式： { name : {String} 表头名称 field : {String} 数据的字段名称，注意：当type类型为radio或checkbox时，该字段表示为是否为选中状态 nowrap : {Boolean} 是否强制不换号 align : {String} 对齐方式，默认居中对齐，仅支持的参数：left、center、right type : {String} 类型，仅支持的参数：radio(单选框)、checkbox(复选框)、order(序号) width : {String} 表格的宽度，需要填写px或%单位，例如：300px sorts : {Boolean} 是否开启排序 fixed : {Boolean} 是否开启悬浮列，目前只实现了两端列的悬浮，并且需要设置width才行 el : {Boolean} 内容是否溢出隐藏显示三个点，默认宽度为200px，如需自定义宽度，请设置width属性 template : {String | Function} 自定义模板，如果为Function类型，需要return返回html数据，具体说明请看下面的数据模板 } |
| data | Json | 否 | - | 如果不需要通过url来请求数据，可直接通过该参数赋值数据 |
| parseData | Json | 否 | - |
如果你的接口返回数据格式不符合 table 的默认规定格式，可以通过该参数重新定义error、count、hidden、list、message table默认规定格式： { "error": false, //错误 "message": "", //消息 "count": 0, //总页数 "hidden": "", //隐藏某列，用逗号‘,’分割，不是必传的 "list": [] //数据列表 }例如你的接口返回信息并不是上面的默认格式，如下： { "success": false, //错误 "msg": "", //消息 "data": { "total": 0, //总页数 "list" : [] //数据列表 } }那么你可以通过parseData来解析成 table 需要的参数： ice.table({ id:'table', parseData:{ error: 'success', message: 'msg', count: 'data.total', list: 'data.list' } }); |
| highlight | Bool | 否 | true | 是否高亮当前选中的行 |
| click | Function | 否 | - | 点击当前行的回调方法名称 |
| form | Function | 否 | - | 表单查询后的回调函数 |
| checkbox | Function | 否 | - |
复选框选中的回调函数 //回调函数 checkbox(e){ //this: 当前ice.table的对象 //e: 选中的数据集合，如下 // [{ // index : 当前这条数据的下标 // data : 当前这条数据对象 // list : 当前数据列表对象 // res : 整个接口返回的数据 // },……] console.log(e); } |
| radio | Function | 否 | - |
单选框选中的回调函数 //回调函数 radio(e){ //this: 当前ice.table的对象 //e: 选中的数据对象，与checkbox不同的是它不是集合，如下 // { // index : 当前这条数据的下标 // data : 当前这条数据对象 // list : 当前数据列表对象 // res : 整个接口返回的数据 // } console.log(e); } |
以上所有的回调方法说明：
//ice.table传参中，radio、heckbox、success回调函数中的this指向ice.table自身对象，值如下： // this指向table对象，如下 // this.url 接口地址 // this.page 当前页 // this.count 数据条数 // this.size 每页数据条数 // this.data 渲染的数据 // this.thead 表头 // this.list 数据列表 // this.res 接口返回来的所有数据 // this.param 传参 // this.tr 表格所有的tr对象集合 // this.table 表格元素对象 // this.tableBox table表格元素的父级对象 // this.tableMain tableBox元素的父级对象 // this.paging 分页对象 // this.radio 单选对象 // this.checkbox 多选对象 // this.load 加载中元素对象 // this的方法： // this.getRadio() 获取单选数据 // this.getCheckbox() 获取多选数据 // this.render() 重载表格 // this.checkall() 复选框全选 // this.inverse() 复选框反选 // this.deselect() 复选框全不选 // this.openLoad() 打开加载中的蒙层动画 // this.closeLoad() 关闭加载中 // this.del(index) 删除指定下标的数据，不传下标删除所有 //thead参数template中data-click指定的点击事件，例如data-click="edit" function edit(e){ // this指向table对象，参考上面 console.log(this); //e指向当前条数据，值如下： //index : 当前这条数据的下标 //data : 当前这条数据对象 //list : 当前数据列表对象 //res : 整个接口返回的数据 console.log(e.data); }数据表格支持绑定多个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更简洁），在语法上拥有独立的环境变量。
| 多选 | 序号 | 用户 | 内容 | 浏览量 | 操作 编辑 删除 刷新 |
|---|
最大的一个亮点就是数据模板了，咱家的Table美眉将数据模板做的非常简洁（各种赞美省略五万字……直奔主题吧！），你可以在表头中直接定义需要展示的数据模板，用template标签表示，也可以在js的thead中的template参数中设置，这两者是完全统一的，语法拥有独立的环境变量，可使用js原生的语法来写，非常的方便，内置了this、index、list等变量。
js语法在花括号中表示
单行语法使用一对花括号： { js语言 }，例如：{this.title} 输出当前这条数据title字段的内容
多行语法使用一对花括号+%符号： {% js语言 %}，如下：
js中传参的方式，template还支持传递一个function，你可以在function中return返回自定义的html哦。
//thead中的template参数使用示例 //----------------------------------- //info : 当前这条数据对象 //index : 当前这条数据的下标 //list : 当前数据列表对象 template: function(info, index, list){ //说明：标签中的data-click是table独有的属性，当它被定义时，会给该标签添加点击事件，当 //用户点击时会执行定义的方法 return `编辑`; } //上面data-click中自定义的点击事件 function edit(e){ // this指向table对象，参考以上文档 console.log(this); //e指向当前条数据，值如下： //index : 当前这条数据的下标 //data : 当前这条数据对象 //list : 当前数据列表对象 //res : 整个接口返回的数据 console.log(e.data); }| 序号 | 标题 {this.title} | 类型 {% if(this.type == 0){ '免费' }else if(this.type == 1){ '试看' }else if(this.type == 2){ '收费' } %} | 浏览量 | 操作 编辑 删除 查看 |
|---|