一个自己写的table插件,用到了一些ES6的语法

class Base {
    constructor() {
        
    }
    isFunc(func) {
        if (func && typeof func === "function") {
            return true;
        } else {
            console.error("参数错误,传递的不是函数")
            return false;
        }
    }
    isStr(str) {
        if (str && typeof str === "string") {
            return true;
        } else {
            console.error("参数错误,传递的不是字符串")
            return false;
        }
    }
    isArr(arr) {
        if (arr && (arr instanceof Array)) {
            return true;
        } else {
            console.error("参数错误,传递的不是数组")
            return false;
        }
    }
    isObj(obj) {
        if (obj && typeof obj == "object" && (obj.toString() == "[object Object]")) {
            return true;
        } else {
            console.error("参数错误,传递的不是对象")
            return false;
        }
    }
}

class Table extends Base{
    constructor(obj) {
        super()
        if(!(this.isObj(obj) && obj.data && this.isArr(obj.data) && obj.select && this.isStr(obj.select) &&
            obj.actions && this.isArr(obj.actions) &&  obj.disabled && this.isArr(obj.disabled) &&  obj.resetTitle &&
            this.isObj(obj.resetTitle)
            )) {
            return;
        }

        this.obj = obj;
        this.html = ``;
        this.pageClickCallback = function(n) {console.log("初始化函数", n)};
    }

    //生成table
    init() {
        this.setActionsHtml()
        this.setTable();
        this.setpagination();
        this.makeHtml();
    }

    //给数据添加actions按钮组
    setActionsHtml() {
        this.obj.data.forEach( (v, i) => {
            this.isObj(v)
            v.Actions = this.obj.actions;
        })
    }

    //拼接table的html字符串
    setTable() {
        let titles = Object.keys(this.obj.data[0]);
        this.html += this.htmlFun(titles, this.obj.data)
    }

    //生成table的html字符串
    htmlFun(titles, datas) {
        var self = this;
        return `
         <table class="table table-striped">
            <thead>
               <tr>
                  ${titles.map(title => {
                        if(self.isDisplay(title)) {
                            return;
                        }
            return `
                        <td>${self.resetTitle(title)}</td>
                     `
        }).join('')}
               </tr>
            </thead>
            <tbody>
               ${
            datas.map(data => {
                return `
                        <tr>
                           ${
                    $.map(data, (v, i) => {
                        if(self.isDisplay(i)) {
                            console.log("v", i)
                            return"";
                        }
                        if (i === "Actions") {
                            return self.setActionHtml(v, data)
                        }
                        return `
                                    <td>${v}</td>
                                 `
                    }).join("")
                    }
                        </tr>
                     `
            }).join("")

            }
            </tbody>
         </table>
         `
    }

    //生成分页的html字符串
    setpagination() {
        let n = this.obj.page;
        let pageArr = []
        for(let i = 1 ; i <= n; i++) {
            pageArr.push(i)
        }
        var  self = this;
        let _a = `
         <div class="pagination pagination-right">
           <ul>
             <li ><a href="#" ><<</a></li>
             ${
            pageArr.map(v => {
                return `
                     <li ><a href="#">${v}</a></li>
                   `
            }).join("")
            }
             <li><a href="#">>></a></li>
           </ul>
         </div>
      `
        this.html += _a
    }

    //注册分页的回调函数
    setPageClickCallback (callback) {
        if (! this.isFunc(callback)) {
            return;
        }
        this.pageClickCallback = callback;
    }

    //生成操作按钮的html字符串
    setActionHtml(arr, data) {
        console.log("data", data)
        let html = `<td><div class="dropdown" >
            <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                actions
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dLabel">
                ${
                arr.map( v => {
                    return ` <li><button type="button" class="btn" data-action="${v}" data-actionId="${data.id}" data-toggle="modal" data-target="" data-whatever="@mdo">${v}</button></li>`
                }).join("")
            }

            </ul>
        </div></td>`

        return html;
    }

    //注册操作按钮的回调函数;
    setActionCallback(dataFunc) {
        if (!this.isObj(dataFunc)) {
            return;
        }
        let actionsArr = Object.keys(dataFunc);
        var buttonArr = $(this.obj.select).find("button[data-action]")
        $(buttonArr).each(function(i , v) {
            let id = v.dataset["actionid"]
            let action = v.dataset["action"]
            $(v).click(function() {
                dataFunc[action](id);
            })
        })
    }

    //用html字符串生成dom节点,加到dom树中
    makeHtml() {
        let self = this;
        $(this.obj.select)[0].innerHTML = this.html;
        let pageList = $(this.obj.select).find(".pagination li")
        $.each(pageList, function(i, v) {
            if (i > 0 && i < pageList.length) {
                $(v).bind("click", function(e) {
                    self.pageClickCallback(i)
                })
            }
        })
    }

    //更新数据和页码,重新生成;
    reload(obj) {
        this.html = ""
        this.obj.data = obj.data;
        this.obj.page = obj.page;
        this.init()
    }

    //判断字段是否在obj.disabled数组中,如果在则不显示出来;
    isDisplay(str) {
        return this.obj.disabled.indexOf(str) > -1 ? true : false
    }

    //更改title的内容
    resetTitle(title) {
        let _t = this.obj.resetTitle[title]
        return _t ? _t : title;
    }
}


/*


例子:


*/

 

 使用说明:
 1. obj配置项
 1. data: 数组,表格的数据,数据里面的每一个属性都会占一列
 2. page: 总页码
 3. select: 选择器,放在这个元素下面
 4. actions: 操作按钮组
 5. disabled: 数组,数据中的那些属性不显示
 6. resetTitle: 对象字典,把字母属性换成汉字
 2. table.reload(obj)
 方法,用来重置表格里面的内容,仅仅支持重置data,page两个属性;
 3. table.setPageClickCallback(function(n){})
 方法,用来设置点击页码的回调,参数是函数,参数函数的参数n为点击页码,如果是<< 则当前页码-1, 是>>则当前页码+1.
 4. setActionCallback({})
 方法, 用来设置操作的回调函数,属性名是actions里面的元素.属性值是对应的回调函数,参数是data里面的id属性.

例子:

$(function() {

    //获取到数据
    var data = [
        {name: "lifei1", age: 15, school: "北街1", day: 13, id: "1", ismaray: true},
        {name: "lifei2", age: 14, school: "北街2", day: 11, id: "2", ismaray: false},
        {name: "lifei3", age: 13, school: "北街3", day: 12, id: "3", ismaray: true},
        {name: "lifei4", age: 12, school: "北街4", day: 13, id: "4", ismaray: false},
        {name: "lifei5", age: 11, school: "北街5", day: 14, id: "5", ismaray: true},
    ]
    
    //设置配置项
    let obj = {
        data: data,
        page: 6,
        select: "#table",
        actions: ["删除", "编辑"],
        disabled: ["id", "ismaray"],
        resetTitle: {name: "名称", age: "年龄"},
    }
    
    //生成
    var a = new Table(obj)
    a.init()

    //设置页码回调
    a.setPageClickCallback( function(n) {
        console.log(n)
    })

    //设置操作回调
    a.setActionCallback({
        "删除": function(id){console.log("删除" + id)},
        "编辑": function(id){console.log("编辑" + id)}
    })

})

 

转载于:https://www.cnblogs.com/bridge7839/p/8082684.html