bootstrapTable封装
(function () {
var BSTreeTable = function (bstableId, url, columns) {
this.btInstance = null; //jquery和bootstrapTreeTable绑定的对象
this.bstableId = bstableId;
this.url =url;
this.method = "post";
this.columns = columns;
this.data = {};// ajax的参数
this.expandColumn = null;// 展开显示的列
this.id = 'id';// 选取记录返回的值
this.code = 'code';// 用于设置父子关系
this.parentCode = 'pcode';// 用于设置父子关系
this.expandAll = false;// 是否默认全部展开
this.toolbarId = bstableId + "Toolbar";
this.height = 665; //默认表格高度665
};
BSTreeTable.prototype = {
/**
* 初始化bootstrap table
*/
init: function () {
var tableId = this.bstableId;
this.btInstance =
$('#'+tableId).bootstrapTable({
id: this.id,// 选取记录返回的值
code: this.code,// 用于设置父子关系
parentCode: this.parentCode,// 用于设置父子关系
rootCodeValue: this.rootCodeValue,//设置根节点code值----可指定根节点，默认为null,"",0,"0"
type: this.method, //请求数据的ajax类型
url: this.url, //请求数据的ajax的url
ajaxParams: this.data, //请求数据的ajax的data属性
expandColumn: this.expandColumn,//在哪一列上面显示展开按钮,从0开始
striped: true, //是否各行渐变色
expandAll: this.expandAll, //是否全部展开
columns: this.columns, //列数组
toolbar: "#" + this.toolbarId,//顶部工具条
height: this.height,
showRefresh: true, //是否显示刷新
pagination: true, //是否启用分页
// sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
// pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100],
showColumns: true,
showToggle: true,
});
return this;
},
/**
* 设置在哪一列上面显示展开按钮,从0开始
*/
setExpandColumn: function (expandColumn) {
this.expandColumn = expandColumn;
},
/**
* 设置记录返回的id值
*/
setIdField: function (id) {
this.id = id;
},
/**
* 设置记录分级的字段
*/
setCodeField: function (code) {
this.code = code;
},
/**
* 设置记录分级的父级字段
*/
setParentCodeField: function (parentCode) {
this.parentCode = parentCode;
},
/**
* 设置根节点code值----可指定根节点，默认为null,"",0,"0"
*/
setRootCodeValue: function (rootCodeValue) {
this.rootCodeValue = rootCodeValue;
},
/**
* 设置是否默认全部展开
*/
setExpandAll: function (expandAll) {
this.expandAll = expandAll;
},
/**
* 设置表格高度
*/
setHeight: function (height) {
this.height = height;
},
/**
* 设置ajax post请求时候附带的参数
*/
set: function (key, value) {
if (typeof key == "object") {
for (var i in key) {
if (typeof i == "function")
continue;
this.data[i] = key[i];
}
} else {
this.data[key] = (typeof value == "undefined") ? $("#" + key).val() : value;
}
return this;
},
/**
* 设置ajax post请求时候附带的参数
*/
setData: function (data) {
this.data = data;
return this;
},
/**
* 清空ajax post请求参数
*/
clear: function () {
this.data = {};
return this;
},
/**
* 刷新表格
*/
refresh: function (parms) {
if (typeof parms != "undefined") {
this.btInstance.bootstrapTable('refresh', parms.query);// 为了兼容bootstrap-table的写法
} else {
this.btInstance.bootstrapTable('refresh');
}
}
};
window.BSTreeTable = BSTreeTable;
}());使用方法类似bootstrapTable,只是封装挂在在window下面使用而已
(注意事项:需配合layer)
/**
* 初始化管理
*/
var Hospital = {
id: "HospitalTable", //表格id
seItem: null, //选中的条目
table: null,
layerIndex: -1
};
/**
* 初始化表格的列
*/
Hospital.initColumn = function () {
return [
{field: 'selectItem', radio: true},
{title: 'id', field: 'id', visible: true, align: 'center', valign: 'middle'},
{title: '用户id', field: 'userId', visible: true, align: 'center', valign: 'middle'},
{title: '标题', field: 'title', visible: true, align: 'center', valign: 'middle'},
{title: '内容', field: 'body', visible: true, align: 'center', valign: 'middle'},
];
};
/**
* 检查是否选中
*/
Hospital.check = function () {
var selected = $('#' + this.id).bootstrapTable('getSelections');
if(selected.length == 0){
layer.msg("至少选择一条");
return false;
}else{
Hospital.seItem = selected[0];
return true;
}
};
// /**
// * 点击添加
// */
Hospital.openAdd = function () {
var index = layer.open({
type: 2,
title: '添加管理',
area: ['800px', '420px'], //宽高
fix: false, //不固定
maxmin: true,
content: 'add.html'
})
this.layerIndex = index;
};
// /**
// * 修改管理
// */
Hospital.openEditor = function () {
if (this.check()) {
var index = layer.open({
type: 2,
title: '修改详情',
area: ['800px', '420px'], //宽高
fix: false, //不固定
maxmin: true,
content:'update.html?id='+ Hospital.seItem.id
})
this.layerIndex = index;
}
};
// /**
// * 删除
// */
Hospital.openDelete = function () {
if (this.check()) {
console.log(Hospital.seItem.id)
layer.confirm('是否要删除该条信息？', {
btn: ['是','否'], //按钮,
btn1:function(){
var ajax = new $ax('./php/delete.php', function (data) {
layer.msg('删除成功', {icon: 1})
Hospital.table.refresh();
}, function (data) {
// console.log(data)
});
ajax.set('id',Hospital.seItem.id);
ajax.start();
},
btn2:function(){
layer.close();
}
})
}
};
// /**
// * 查询
// */
Hospital.search = function () {
var queryData = {};
queryData['id'] = $("#search").val();
console.log(queryData)
Hospital.table.refresh({query: queryData});
};
//初始化表格
$(function () {
var defaultColunms = Hospital.initColumn();
var table = new BSTreeTable(Hospital.id, "./php/list.php", defaultColunms);
Hospital.table = table.init();
})