你的位置:首页 > Java教程

[Java教程]列表组件抽象(5)


这是我写的关于列表组件的第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

效果如下:

image

对应的演示代码为:

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();});

补充:在demo中,我用heightFixed这个option用来表示是否要固定表格的高度;用plugins这个option来配置当前实例要扩展的插件功能,利用到了tableDefaults来注册默认的插件组;最后通过jquery的形式给表格行内的某个dom元素绑定了点击事件,并在回调内通过表格组件的实例化方法getRowData获取到了该行对应的表格数据。

这个表格组件除了支持分页查询,排序之外,还支持以下功能:

1. 序号列生成,列宽调整,理论上可以通过自定义插件的方式再扩展更多的功能;比如树形表格、表格编辑等;可直接通过表格实例,对插件进行增删改查;

2. 自由切换是否固定表格高度,当表格高度固定时,表头会固定,然后表体会以auto模式控制滚动条;滚动时,表头由于固定所以不会被遮挡,便于用户查看表格数据;如果表格高度不固定,那么表体就不会出现滚动条,表头固定也就没有意义了;

3. css完全灵活,可通过option改变表格组件内部实现时需要的所有css class;

4. html结构相对灵活,表头和表体的html都以模板的形式定义,如需在表头和表体中插入相对个性化的内容,直接在模板中插入即可;

5. 支持表格行,单选和多选;当然两种模式只能用其一;

6. 可方便地根据表格行的索引,获取该行对应的原始数据和解析后的数据;原始数据就是ajax返回后未经parseData这个option处理的数据;解析后的数据就是parseData处理后的数据;

7. 可方便地获取所有选中行的单个属性值;

8. 当窗口resize,DOM更改等影响到表格内容的时候,表格的布局会自动调整;也支持手动触发调整;

总的来说,这个组件的实现并不麻烦,就是因为要实现的功能多,所以内容也多。

首先,先来了解下它html结构:

<div id="table_view" >  <div >    <table >    </table>  </div>  <div >    <table >    </table>  </div>  <div >    <ul >    </ul>  </div></div>

它把表格组件分成表头、表体、表尾三部分。表头显示表格标题行;表体显示数据;表尾显示分页组件。因为要考虑做表头固定,所以标题行和数据行不能属于同一个table元素。固定只能利用绝对定位来做。

在设置css的时候,边框和表头的背景色的设置比较关键:

1. 不管是表头的table和表体的table,都没有上下左右边框,你看到的边框都是由table的包裹元素设置的。这么做的目的,是为了表格组件在UI上的整体性考虑的。

2. 表头的背景不是设置在表头的table上,而是设置在table的包裹元素上。这么做的原因还是跟UI整体性有关,当表体出现滚动条时,表体内的table的宽度变窄,为了让表头内的table宽度与表体内table的宽度保持一致,必须给表头添加一个padding-right,并且大小为浏览器滚动条的宽度:

image

如果表头的背景直接设置在table上,那么padding-right那个位置,将让人认为是页面上多余的空间,看起来别扭。

接下来看看表格组件源码中的要点。

1)defaults如下:

var DEFAULTS = $.extend({}, ListViewBase.DEFAULTS, {  //是否固定高度,如果固定高度,将会在合适的时候添加纵向滚动条  heightFixed: false,  //colgroup的html  colgroup: '',  //用来作为标题行的html  tableHd: '',  tableViewInitClass: 'table_view_init',  tableViewHdClass: 'table_view_hd',  tableHdClass: 'table_hd',  tableViewBdClass: 'table_view_bd',  tableBdClass: 'table_bd',  tableFtViewClass: 'table_ft_view',  dataListClass: 'data_list',  pageViewClass: 'table_page_view',  //布局改变时的回调  adjustLayout: $.noop,  //是否进行多列选择  multipleSelect: false,  //行选中时添加的css类  selectedClass: 'selected',  //全选的checkbox的l类名  allCheckboxClass: 'table_check_all',  //单选的checkbox类名  rowCheckboxClass: 'table_check_row',  //插件列表  plugins: [],//{plugin: TableDrag, options: {...}}});

需要说明的有:

allCheckboxClass和rowCheckboxClass对应全选和单选的checkbox,由于checkbox并不是在组件内部写死的,而是定义在模板内,所以必须通过选择器才能使用。这个比直接把checkbox写在组件内部的好处是,大大增加增加组件的灵活性;

plugins在配置的时候,用字面量对象来传递单个插件的定义。如{name: “tableDrag”,plugin: TableDrag, options: {…}},name用来标识插件实例,方便管理插件;plugin表示插件的构造函数,options传递插件需要的option。

2)表格组件的初始化方法都比较简单,主要是根据tableHd,colgroup这些option初始化表格组件的DOM结构;初始化布局;初始化行选择的功能;初始化插件实例。

3)setRowSelected是一个实例方法,接受表格行的jq对象,并将其设置为选中状态。外部也可直接调用它来实现手工选中行。

4)setUpTableSelect是一个内部用的实例方法, 初始化行选择的功能。

5)getSelectedTrs是一个实例方法,返回选中行的jq对象。外部可使用。

6)getSelectedIndexs是一个实例方法,返回选中行的索引,数组形式。外部可使用。

7)getRowData是一个实例方法,传入一个索引,返回该索引对应行的经过parseData解析后的数据。

8)getOriginalRowData是一个实例方法,传入一个索引,返回该索引对应行的原始数据。

9)getFields是一个实例方法,传入一个属性名称,返回所有选中行的解析后的数据中该属性的值。

10)getOriginalFields是一个实例方法,传入一个属性名称,返回所有选中行的原始数据中该属性的值。

11)getPlugin是一个实例方法,传入插件定义时的name值,即可返回该插件的实例,

12)addPlugin是一个实例方法,用来手工实例化一个插件,它接收一个满足plugins option元素要求的对象,用来实例化插件。

addPlugin: function (config) {  if (!config.name) {    throw "plugin config must have [name] option";  }  if (!config.plugin) {    throw "plugin config must have [plugin] option";  }  if (!isFunc(config.plugin)) {    throw "plugin config 's [plugin] options must be a constructor";  }  this.removePlugin(name);  this.plugins[config.name] = new config.plugin(this, config.options);},

每个插件实例化的时候,都会给它的构造函数,传入两个参数,一个是表格组件本身,另外一个就是插件相关的options。意味着所有的插件的构造函数都得按这个形式来。

13)removePlugin是一个实例方法,用来销毁某个插件的实例。销毁除了要考虑功能的取消逻辑,还要考虑好内存泄漏的问题,所以一定要检查插件所有的可能会导致内存泄漏的地方,尤其是那些绑定的事件。这个方法内部会通过调用插件的destroy方法来完成销毁,所以在定义插件的时候最好是提供这样一个方法:

removePlugin: function (name, args) {  var plugin = this.getPlugin(name);  if (!plugin) return;  //插件必须定义destroy方法,才能有效的回收内存  if (isFunc(plugin.destroy)) {    plugin.destroy.apply(plugin, args);  }  delete this.plugins[name];},

14)adjustLayout是一个实例方法。初始化完毕,浏览器窗口调整,以及查询完毕之后都会主动调用,以更新table的UI布局。外部也可直接调用,尤其是在外部更改table的DOM内容,而table不知道的情况下,以防UI错乱。

adjustLayout: function () {  this.adjustPaddingTop();  this.adjustTableHdViewPos();  this.adjustTableBdViewHeight();  this.checkTableBdScrollState();  this.trigger('adjustLayout' + this.namespace);},

从代码可看出,它主要做的有以下几件事情:

adjustPaddingTop: 由于表头固定,采用绝对定位,所以表格组件整体得设置padding-top,这个值在DOM变化的时候就要更新,防止表头盖住表体;

adjustTableHdViewPos: 由于表头固定,当表体横向滚动时,靠它来更新表头的位置,以便表头的每一列都能跟表体的每一列对齐;

adjustTableBdViewHeight: 跟第一个同理,表头高度变化后,在表格高度固定时,表体高度也会变化,所以要重新设置表体的高度,以便浏览器更新overflow的状态;

checkTableBdScrollState: 检查表体是否出现横向滚动,如果是,则给表头添加宽度等于滚动条宽度的padding-right,否则就去掉。

以上就是表格组件的核心要点了。单个点相关的代码逻辑都不是特别复杂,所以大部分都没有特意给出相应源码说明。

再来说说默认插件之一:tableOrder的定义。

它只有一个option:

var DEFAULTS = {  orderTextClass: 'table_view_order'};

作用完全类似于checkbox那两个option,插件利用它找到合适的位置显示序号。

这个类很简单:

define(function (require, exports, module) {  var $ = require('jquery'),    Class = require('mod/class');var DEFAULTS = {  orderTextClass: 'table_view_order'};  function class2Selector(classStr) {    return ('.' + $.trim(classStr)).replace(/\s+/g, '.');  }  //给tableView添加序号列的功能  var TableOrder = Class({    instanceMembers: {      init: function (tableView, options) {        var opts= $.extend({}, DEFAULTS, options),          $tableBd = tableView.$tableBd,          pageView = tableView.pageView;        if(!pageView) return;        this.tableView = tableView;        this.onSuccess = function(){          var start = pageView.data.start;          $tableBd.find('>tbody>tr>td ' + class2Selector(opts.orderTextClass)).each(function(i,e){            $(this).text(start + i);          });        };        tableView.$element.on('success.' + tableView.namespace, this.onSuccess);      },      destroy: function(){        this.tableView.$element.off('success.' + this.tableView.namespace, this.onSuccess);        this.onSuccess = undefined;      }    }  });  return TableOrder;});

只要根据pageView实例,拿到它的data属性就能使用其中的start,end来生成序号,start,end分别表示当前请求的记录范围的起止索引。它提供了destroy方法,以防有需要销毁的场景。然后它的构造函数也是含之前介绍表格组件的addPlugin方法时的说明来的,第一个参数表格组件的实例,第二个参数options。

最后再来说默认插件之一:tableDrag的定义。

这个相对逻辑多一点。我这里也只介绍我的思路。

1)生成拖拽的“把手”。我这里是用一个空的元素,通过绝对定位的方式,显示在每个单元格的右边框上来处理的。当鼠标移上去变成可拖拽的模式时,点击鼠标拖动,就能调整列宽。

createDraggers: function () {  var $tableHd = this.tableView.$tableHd;  var opts = this.options;  $tableHd.find('>thead>tr>th,>thead>tr>td').each(function () {    var $td = $(this);    //配置了data-drag="false"的列不能进行排序操作    if ($td.data('drag') !== false) {      $td.append('<span ></span>');    }  });},

2)列在拖拽过程中,宽度的变化,我都是colgroup中对应的col元素来实现的。而不是直接通过控制td的宽度。这种方式也更符合标准。

3)这个组件里面有一处比较关键的代码:

var that = this;this.onAdjustLayout = function () {  var tdWidthMap = {}, total = 0, $tableHeadTds = tableView.$tableHd.find('>thead>tr>th,>thead>tr>td');  $tableHeadTds.each(function (i, td) {    var curWidth = $(td).outerWidth();    if (i == ($tableHeadTds.length - 1)) {      curWidth = tableView.$tableHd.outerWidth() - total;    } else {      total += curWidth;    }    tdWidthMap[i] = curWidth;  });  that.$tableHdColgroup.children('col').each(function (i, col) {    $(col).attr('width', tdWidthMap[i]);  });  that.$tableBdColgroup.children('col').each(function (i, col) {    $(col).attr('width', tdWidthMap[i]);  });};//在tableView触发adjustLayout事件的时候,必须重新计算所有col的宽度,保证拖拽的效果tableView.on('adjustLayout' + tableView.namespace, this.onAdjustLayout);

它的作用是监听表格组件的adjustLayout事件,在事件回调内更新所有col的宽度。之所以这么干,是因为表格的列宽是会自动调整的,尤其在表格布局改变之后,列宽的实际宽度不一定等于col上定义的宽度,所以要在表格布局改变的时候重新计算各个col的宽度,下次拖拽的结果才能正确。

具体拖拽的实现逻辑就跟平常做的那些拖拽没区别了:在鼠标点下的时候记好位置,拖动过程中,用最新的鼠标位置与最初的位置,就能得到拖拽实时的偏移距离。然后再计算到col的宽度上即可。

到此为止的话,表格组件的一些要点也介绍完毕,关于列表组件的这一大堆文件的分享,基本上也就到此结束了,将来我自己肯定还会不断地完善,但那更多是在项目中的实际工作了,不一定还会再写出来,毕竟每个项目都有个性化的需求。我写这些东西的初衷,是认为列表功能,分页功能,排序功能之间都有相似性,为了减少重复代码,可以做一些抽象,来让代码更加简洁,更好管理。希望关于列表组件的内容能给大家带来一些有价值的东西。谢谢这几天的关注:)