这是我写的关于列表组件的第5篇博客。前面的相关文章有:1. 列表组件抽象(1)-概述2. 列表组件抽象(2)-listViewBase说明3. 列表组件抽象(3)-分页和排序管理说明4. 列表组件抽象(4)-滚动列表及分页说明本文介绍如何实现一个简洁易用的表格组件。它对应的源码是 ...
这是我写的关于列表组件的第5篇博客。前面的相关文章有:
1. 列表组件抽象(1)-概述
2. 列表组件抽象(2)-listViewBase说明
3. 列表组件抽象(3)-分页和排序管理说明
4. 列表组件抽象(4)-滚动列表及分页说明
本文介绍如何实现一个简洁易用的表格组件。
它对应的源码是:
https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/listView/tableView.js
https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/listView/tableDrag.js
https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/listView/tableOrder.js
https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/listView/tableDefault.js
其中tableView是表格组件的核心。tableDrag和tableOrder是我写的两个插件,分别让表格支持列宽调整和自动生成序号列。tableDefault目前的作用仅仅是简化插件的配置。下面的demo可以让你了解下它的基本功能:
http://liuyunzhuge.github.io/blog/form/dist/html/tableView.html
效果如下:
对应的演示代码为:
http://liuyunzhuge.github.io/blog/form/dist/js/app/tableView.js
在了解它的详细实现思路前,你可以通过上面的演示代码来查看这个组件的使用方式。整体上它与其它列表组件的用法类似,但是由于表格组件在结构和功能上的特异性,所以它在实例化的时候要用到好几个其它列表组件不具备的option。实例代码如下:
define(function (require) { var $ = require('jquery'), ListView = require('mod/listView/tableView'), TableDefault = require('mod/listView/tableDefault'), api = { list: './api/tableView.json', }; var list = new ListView('#table_view', { multipleSelect: true, heightFixed: true, url: api.list, tableHd: ['<tr>', ' <th>序号</th>', ' <th><input type="checkbox" ></th>', ' <th data-field="name" data-drag="false" >姓名 <i ></i></th>', ' <th data-field="contact" data-drag-min="100" data-drag-max="200" >联系方式 <i ></i></th>', ' <th data-field="email" >邮箱 <i ></i></th>', ' <th>昵称</th>', ' <th>备注</th>', '</tr>'].join(""), colgroup: ['<colgroup>', ' <col width="70">', ' <col width="40">', ' <col width="120">', ' <col width="120">', ' <col width="180">', ' <col width="180">', ' <col width="200">', '</colgroup>'].join(""), tpl: ['{{#rows}}<tr>', '<td><span ></span></td>', '<td align="middle" ><input type="checkbox" ></td>', '<td>{{name}}</td>', '<td>{{contact}}</td>', '<td>{{email}}</td>', '<td>{{nickname}}</td>', '<td><button type="button">操作</button></td>', '</tr>{{/rows}}'].join(''), sortView: { config: [ {field: 'name', value: ''}, {field: 'contact', value: 'desc', order: 2}, {field: 'email', value: 'asc', order: 1} ] }, pageView: { defaultSize: 20 }, plugins: TableDefault.plugins }); list.$element.on('click','.btn-action', function(e) { console.log(list.getRowData($(this).closest('tr').index())); }); list.query();});
原标题:列表组件抽象(5)
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。