layui 数据表格本地保存记住拖拽列的宽度

Layui列表可以拖拽宽度,但刷新页面会重置,通过修改table.js可实现本地保存列宽 layUI版本:2.4.5
实现思路:

• 当用户拖拽表格列调整宽度时,记录拖拽后的宽度,存放到localstorage里
  格式为:
  key:当前页面URL+列名
  value:拖拽后的宽度
• 在初始化列表时,先读取localstorage中是否存在对应的key,如果有则直接 赋值,没有就读取JS中默认配置宽度

代码如下:

初始化表格修改默认宽度

在table.js第54行后面加入对应代码,

.....
}, F.prototype.render = function () {
        var e = this, a = e.config;
        //插入点
        /*这里的this是表格的配置信息,a = e.config
         *这里直接对a进行操作,a.cols保存的是列的基本信息,我们取当前URL+取出列名去localStorage寻找,如果存在就说明用户对该列进行过拖拽,把localStorage的值直接赋值给a
         */
        for (let j = 0; j < a.cols[0].length; j++) {
            let str = window.location.href + "#####" + a.cols[0][j].title;
            let item = localStorage.getItem(str);
            if(item != null){
                a.cols[0][j].width = item;
            }
        }
        //插入结束
        if (a.elem = t(a.elem), a.where = a.where || {}, a.id = a.id || a.elem.attr("id") || e.index, a.request = t.extend({
                pageName: "page",
                limitName: "limit"
            }, a.request), a.response = t.extend({
.....

第二处修改

在table.js第433行后面加入对应代码,

        }).on("mouseup", function (t) {
        	//插入点
        	/*这里的mouseup是鼠标拖拽调整大小后鼠标抬起后的回调
			 *s是对即将变更size对象的封装
			 *sText:layUI对列进行的封装,有每个列都有唯一ID
			 *cText:获取到拖拽后的大小如"123px"
			 *iText:获取列对应的列名,也就是我们自己定义的列名如:用户ID,订单编号...
			 *sText.indexOf("laytable-cell")是因为这里监听的不止是列表,LayUI很多组件都会进行回调,我们判断是否拖拽的是表格,如果是则将当前URL(t.target.baseURI),这里也可以用window.location.href代替,和列名(iText)作为key,调整后的宽度(cText)作为value保存到localstorage
			 */
            let sText = s.rule.selectorText + "";
            let cText = s.rule.style.width.replaceAll("px","");
            let iText = $("th " + sText + " span").text();
            if(sText.indexOf("laytable-cell") != -1){
                localStorage.setItem(t.target.baseURI + "#####" +  iText,cText)
            }
            //插入结束
            s.resizeStart && (s = {}, c.css("cursor", ""), a.scrollPatch()), 2 === e && (e = null)

我这里的localstorage格式是
key:http://www.xxx.com/user/index####用户ID
value:200
格式根据自己需求来,但在监听拖拽的格式一定要和初始化获取的时候格式一致,另外这里加了URL是因为项目中一般都不值一个列表,加URL是为了区分不同页面的列表有相同列名的问题,如订单页有ID列,用户页也有ID列。

最重要的,涉及的列表一般都有查询,如果你的查询是GET请求,在存localstorage的URL就要处理一下,GET请求可能会导致URL不一致,导致找不到localstorage的配置