加强 ColumnBuilder

设计思路

上次我们说到，由于 Layui 表格列的 templet 属性可以是一段 HTML，所以可以在这上面大做文章，今天就来加强我们的 ColumnBuilder，希望它能灵活的配置单元格呈现。

这样设想：

可以为 templet 赋予一段 HTML，但是直接给 HTML 不太好操作，所以引入 jQuery，允许通过配置 jQuery 对象的方式来赋予 templet HTML
对常见的一些处理进行封装，比如添加 css class，直接设置样式，format 值等

因为我们的 Builder 里需要：

setElementCreator，用于创建 jQuery 对象
定义一组设置 jQuery 对象的函数，用于对 jQuery 对象（$el）进行加工（设置样式等）
- 如果有 setElementCreator 用它来产生这个 $el
- 如果没有 setElementCreator，默认产生一个 $span（即）
- 定义一个 function list 用来保存设置的处理函数，有点像事件处理（观察者模式）

代码 HTML 中引入 jQuery


加强 ColumnBuilder
配置处理函数
export class ColumnBuilder {
    constructor(field, title) {
 this.options = { field, title };

 // 处理函数列表，默认为空数组
 // 之所以不默认为 undefined 或 null，是为了避免使用时需要先判断
 this.fns = [];
    }

    
    createSpanElement(row) {
 const { options } = this;
 const $span = $("");
 const v = row[options.field];
 $span.text(v);
 return $span;
    }

    
    setElementCreator(elCreator) {
 this.createElement = elCreator;
 return this;
    }

    
    addFn(fn) {
 this.fns.push(fn);
 return this;
    }

    
    setFormat(format) {
 return this.addFn((row, $tr) => $tr.text(format(row)));
    }


    
    setClass(cls) {
 return this.addFn((row, $tr) => $tr.addClass(cls(row)));
    }

    
    setStyles(styles) {
 return this.addFn((row, $tr) => $tr.css(styles(row)));
    }
    
    ... 其他原来的配置方法
}

改进 build() 方法
export class ColumnBuilder {
    ...
    
    build() {
 const options = {
     ...this.options
 };
 const { fns } = this;

 if (fns.length || this.createElement) {
     const createElement = this.createElement
  || (row => this.createSpanElement(row));
     console.log(createElement)
     options.templet = row => {
  const $el = createElement(row);
  fns.forEach(fn => fn(row, $el));
  
  // 昨天说过可以通过包一层元素再取 innerHTML 的方法来获取 HTML
  return $("").append($el).html();
     }
 }

 return options;
    }
    
    ...
}

使用改进后的 ColumnBuilder
给标题添加链接
直接用设置一个创建  的 element creator 就好
column("title", "标题")
    .set("minWidth", "200")
    .setElementCreator(row => {
 return $("").text(row.title || "");
    })
    .build(),


根据难度显示不同的颜色
column("grade", "难度")
    .set("align", "center")
    .setStyles(row => {
 // 用查表的办法避免 switch 或者 if-else
 // 如果查找表能封装在外面就更好，可以避免每次重建
 return {
     "入门": { color: "#00aa00" },
     "高级": { color: "#ff6666" },
 }[row.grade] || {};
    })
    .build(),

实效

加强 ColumnBuilder

JavaScript相关栏目本月热门文章