HandsonTable是一个很牛逼的仿Excel的jQuery表格插件。
在做现在这个项目的时候,用原生的HandsonTable可以实现80%左右的需求。然而,第三方的插件毕竟不是为自己的项目定制的,所以在实现某些功能或者效果的时候,感觉比较费劲;而插件所提供的一系列强大的功能又没有派上用场。
当下的考虑是抽空把HandsonTable梳理一下,然后包装一层给我们的项目使用。这样一方面可以踩在巨人的肩膀上,起点较高地往上爬;另一方面,又能因地制宜地把重心集中于我们自己的业务需求上。
当前项目主要业务需求的分析:
1.层级结构展示,以及展开折叠;
2.Dropdown形式的下拉选择编辑;
2.联动编辑(包括纵向联动,横向联动);
3.“展开到”功能实现;
4.在存在折叠的情况下的联动编辑;
5.去除为展现而增加的html元素后向服务器做请求;
6.拖选控制(精准到列,以及跳过有关联控制的行);
层级结构展示,展开折叠:
现有实现:
- 在向HandsonTable添加数据的时候,直接将html元素内嵌到表格值中去;
- 向嵌入的html元素添加level之类的class属性(level,level1,level2……,lastLevel等),通过css进行样式控制(主要是margin属性的左边距);
- 为附加的html元素添加事件,用来做展开折叠;
- 在折叠的时候是通过将折叠数据临时存放到一个以rowNo做索引的二位数组中来实现的,这样可以保证在HandsonTable做滚动加载的时候不会出现留白的现象;
var sectionLevel = 'level' + section.level;
if ((section.sectionNo == undefined) || (section.sectionNo == '')) {
sectionObj.code = '<a class="level ' + sectionLevel + '">' + '<i class="iconfont icon-reduce"></i></a>' + section.sequenceNo;
} else {
sectionObj.code = '<a class="level ' + sectionLevel + '">' + '<i class="iconfont icon-reduce"></i></a>' + section.sectionNo;
}
考虑封装:
- 将用来做展开折叠的列封装起来,不在每个包含HandsonTable的页面写这些嵌入html元素的代码,而是由封装的Table控件统一处理;
- 在进行编辑时,移除html元素的处理封装到组件中,并考虑是否能够在显示的时候不闪现html代码;
- 展开折叠使用的hideData全局变量考虑重构,现有实现对于同一页面包含多个Table的情况下有问题;
- 将展开折叠的实现封装到Table控件中,hideData作为Table属性存在;
Dropdown形式的下拉选择编辑:
现有实现:
- 使用HandsonTable的钩子回调事件afterBeginEditing,也就是在一个表格进入编辑状态的时候,在HandsonTable的InputHolder中嵌入一个下拉列表html串,然后将其呈现出来;
- html串自行组装,因此可以按照自己的业务要求来做控制;
- 在下拉列表点击完成之后,将InputHolder自带的Editor销毁,然后移除下拉列表内容;
relationTable.addHook('afterBeginEditing', function (row, col) {
var colProp = this.colToProp(col);
var cellVal = this.getDataAtCell(row, col);
var colIndex =