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
相关资源：数据结构—成绩单生成器
