你的位置:首页 > 软件开发 > Java > 列表组件抽象(5)

列表组件抽象(5)

发布时间:2016-09-21 10:00:14
这是我写的关于列表组件的第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

效果如下:

列表组件抽象(5)

对应的演示代码为:

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 (#换成@)。

可能感兴趣文章

我的浏览记录