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)}
})
})