tablePlug 插件的小小升级

分享 未结 置顶 精帖
49 4726
岁月小偷
悬赏:80飞吻
更新于2019年4月17日 22:48:59
新增一个方便update数据的方法,tablePlug.update;
调整调优一些逻辑;
修复一些bug;
开始发布发行版本,目前是1.0.0预览版,这两天忙没什么时间好好弄弄文档,最近两天找时间好好整理,欢迎小伙伴使用最新的版本看看还有哪些问题和不足,到时候跟文档还有一些使用的方式,包括layuiAdmin中怎么使用的技巧等弄成文档一起发布成一个正式的发布版。
更新于2019年4月16日 18:28:17
tablePlug v0.2.0
新增几个方法,方便操作表格的记录的tr顺序,
tablePlug.move(tableId, fromIndex, toIndex);
tablePlug.moveUp(tableId, dataIndex);
tablePlug.moveDown(tableId, dataIndex);

如果只是上下移动可以用moveUp or moveDown
实际可以配合drag drop然后调用move更自由的去调整
optimizeSelectOption v0.1.5
修复几个问题:
1、处理top层页面没有use layer导致插件报错的问题,组件内部会给top window给use layer进来先,但是最低要求就是top必须引进layui.js和layui.css不然这个插件就没有实际的效果;
2、处理在ie和火狐浏览器下部分特殊情况比如select的部分不在可是范围内点击的时候出现页面滚动导致了刚打开的选项被关掉的情况;
3、修复如果html或者iframe如果有border宽度导致出来的选项位置不对的问题
更新于2019年4月9日 21:05:06
v0.1.9
主要修复了两个问题:
一个是固定列有复杂表头的时候在在ie浏览器下出现异常的问题(其他浏览器不会)
第二个问题是一个更加严重而且很隐蔽,之前已经处理过一次复杂的合并表头的表格的问题,其中有一个就是数据列跟表头错列(顺序不对)的问题,但是今天在测试第一个问题的修复情况的时候又给炸出来了之前没有处理到的细节,之前备注列是在最后的,给调整到前面测试一下结果又翻车:

经过一番调试之后才发现实际还是因为单列合并的问题,之前处理过但是还有逻辑漏掉了:

经过这个处理之后就没问题了应该:
更新于2019年4月8日 20:45:49
将智能重载的参数区分的实现形式从请求的白名单给换成黑名单的形式,针对layui原始table的固有的属性确定哪些需要是重载模式的,这个修改之后后面自己用到自定义的属性就很方便无需注册为白名单属性了,一般来说自定义的参数都是跟表格的整体解决关系不是特别大,也提供了一个tablePlug.queryParams.registerBlacklist的方法可以将一些需要的属性给注册到重新请求的黑名单中,但是不建议使用,一般来说不需要用到,除非自定义的属性非常特殊,会影响整个table的大结构的,如果是跟请求相关的属性或者原始的table不会用到的自定义属性就不要加到黑名单中,不然有可能会出现想要从新请求却重载的情况。
更新于2019年3月27日 18:06:00
针对临时数据区做了两个修改:
一个是在table.addTemp的时候支持设置临时数据的初始值:

效果:

另外一个修改是让有临时数据的时候也能reload和切换页面,具体的临时数据在什么时候提醒保存自己把握控制
最近时间比较忙,还有关键的一个是也没什么其他的比较好的实用的可以分享,不过tablePlug这个插件还是比较受认可的,码云上每天的访问还有下载量都还是挺多的,也有小伙伴反馈一些问题,针对不同问题做了不同的应对方法,之前也跟社区的一些小伙伴说要修改相关的内容提交一个版本,但是还是因为比较忙没有来得及修改到自己满意的程度,也就鸽了。
今天对其做了一些调整:
1、最重要的一个调整就是将一些功能从tablePlug这个插件里面分离出来,目前分离出来的有一个optimizeSelectOption(优化下拉的显示问题)
陆陆续续有几个小伙伴问过一个问题就是如果只要select在layer中显示优化相关的内容,可以怎么做到不use整个tablePlug组件,实际需要做的就是将对应的代码从组件里面剥离出来,不过说是简单,主要是代码是自己写的其中的思路还是自己比较清楚,所以小伙伴自己动起手来还是有时候不知道都有哪些相关的,如果想要了解更多跟这个问题处理思路相关的可以看看之前发的帖子: 处理下拉在表格中看不到的选项的一种解决方案
修改思路:实际上这个功能确实跟这个组件的相关性不是很大,所以说可以形成另一个独立的子模块,只不过因为一开始就是为了处理下拉在表格中的显示问题,后面顺带的把layer中显示的问题也一把抓了,从功能上来说跟插件的其他的功能是比较独立的,所以更合理的就是剥离出来一个小模块,大概的代码如下

部分功能内容太长就不展开了,那么后面如果需要单独使用这个功能,就可以只下载对应的模块就好了。
然后之前使用tablePlug的小伙伴要怎么处理呢?实际上我的意图就是准备将这个小模块作为插件的一个附属功能给use进来,也可以理解他是一个子模块,tablePlug内部逻辑会自己去引进他,只要将文件放到对应的目录下就好(重新下载tablePlug整个文件覆盖),

table内部有逻辑自动去找到这个路径下的文件引入代码如下:

可能有小伙伴问为啥不放在define的第一个参数里面作为依赖模块,而是在插件的回调里面use一下呢?这个实际是有特殊的考虑的,之前说了他的功能实际跟插件本身是独立的,没有前后之分,之所以在plug这个插件里面去use,也是为了向下兼容,原先使用tablePlug的本来就有这个功能,所以只要更新一下tablePlug这个文件夹就好,不用再自己use一下新加的模块,另外一个考虑是既然没有先后之分,那么实际没必要作为一个被依赖的模块,这样子的话实际执行的时候在引入tablePlug之前会先把optimizeSelectOption给引入之后才引入tablePlug,所以直接在tablePlug里面use的方式实际是有点像开多了一个线程,让他们各走各的,各自完成自己的任务,也能提高一些效率。
2、“该功能必须依赖tablePlug请先引入”的问题处理
有一些小伙伴也遇到这个信息,但是实际的情况都不太一样,有的是提示了但是功能正常,有的是功能不正常,下拉的位置出错等。造成这个问题的原因主要是因为之前写的一些方法getPosition的逻辑有点问题,一个是他默认会找到相对top层的窗口的位移,但是实际有时候是不需要的,比如表格中的"字段过滤"功能,他的图标点击的时候不需要找到top,所以后面加了一个参数来决定是否需要;另外一个就是出现有父子窗口的时候,如果中间层或者顶层没有引入插件就会提示这个错误,并且弹出的选择可能会位置不对,所以之前的逻辑依赖每个窗口都需要引入这个插件,只要满足了这个功能也就正常了,但是这个有时候是没必要的,主要是自己平时基本也没有用太多iframe,所以有一些场景没有考虑到,见过连着嵌了好几层的,中间有一些层他不需要用到表格之类的也就没有use。
解决思路:重新调整getPosition方法的实现,将不合理的逻辑换成其他的实现方式,结果大概如下:

3、修复 table.reload 修改之后使用table.reload(tableId),这种没有修改config需要的情况报错的问题
更新于2019年3月19日 21:53:35
感谢小伙伴@linknat 反馈的问题,今天又对optimizeSelectOption进行一番改进,目前已经可以做到多层嵌套的页面任意层没有use插件,只在需要的页面use也能达到效果了,同时还修改了一下逻辑修复了以前没怎么发现几个细节的问题,一个就是点击出来的选项,在点击了部分阻止冒泡的节点不会关闭,还有一个就是弹出的layer中有下拉,点击展开的时候按下鼠标拖动layer的位置选项位置不对的情况。
更新于2019年3月20日 10:26:14
考虑到多层嵌套页面,部分中间层页面或者顶层的window可能不需要用到table,select之类的,他们可能不需要引入对应的组件,针对这些组件的修改插件就更没有必要引入了,所以对optimizeSelectOption这个插件做了一个更加彻底的修改,早上过来稍微测试一下发现里面的一个逻辑写的有问题,稍微调整了一下之后重新提交了一个版本,这回应该就没什么大的问题了,如果遇到有什么问题的小伙伴请多给issue给我额,感谢。下面对目前修改之后的逻辑进行一个简单的说明,有什么更好的意见建议的请不吝提出分享。
首先调整的是一些样式,之前是放在css里面的,因为不是所有的层特别是top层都会引入插件,那么对于弹出之后的需要的样式就不能还是放在optimizeSelectOption.css这个文件里面了,所以先删掉有关的样式

然后js中用.css去添加

然后需要调整的就是关闭的事件了,因为弹出的是一个不带遮罩层的layer,为的就是体验更好一些,不会出现打开了select的选项之后要点击其他的功能需要先点击到遮罩层关了这个layer然后在是操作实际想要操作,那么一般这种情况就需要监听document的点击来close掉这个弹出的选项了,所以如果中间层没有对应的事件的话就有可能会出现点击了其他的内容,但是选项还在的情况,那么把原先的事件处理也搬到了弹出的success回调里面去处理,并且用了一个一层一层往上遍历都给加上对应事件的方式,修改大概如下:

目前的事件处理位置:

基本上上面的修改之后会出现需要关掉选项却没有关掉的现象应该基本就大大减少到几乎没有,但是!不是绝对的,因为都是监听的document和window的一些事件,内部的一些事件如果加了阻止冒泡的,那也会有可能出现他需要关掉缺没有关掉的现象,不过添加了一个mousedown之后一般来说这种情况也会少之又少,因为一般来说都是click之类的事件阻止了冒泡,但是极少也不代表没有可能,万一出现了呢?目前optimizeSelectOption插件多加了一个方法close,所以可以在这种极少数的情况下用layui.optimizeSelectOption.close()去关闭它,
回帖