bootstrap表格封装 以及ajax请求封装
//初始化 Tree Table 的封装
(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;
}());
使用方法
var defaultColunms = Hospital.initColumn(); //初始化表格列
var table = new BSTreeTable(id, url, defaultColunms);
参数详解:id 为table的id ,url 为请求数据接口地址,defaultColunms为初始化列;
Hospital.table = table.init();
更多table的使用方法详情请参考coding(有一个增删查改的小项目):
git clone https://git.coding.net/wxbisgood/bootstrapTable.git
ajax封装
(function () {
var $ax = function (url, success, error) {
this.url = url;
this.type = "post";
this.data = {};
this.dataType = "json";
this.async = false;
this.success = success;
this.error = error;
};
$ax.prototype = {
start : function () {
var me = this;
if (this.url.indexOf("?") == -1) {
this.url = this.url + "?jstime=" + new Date().getTime();
} else {
this.url = this.url + "&jstime=" + new Date().getTime();
}
$.ajax({
type: this.type,
url: this.url,
dataType: this.dataType,
async: this.async,
data: this.data,
beforeSend: function(data) {
},
success: function(data) {
me.success(data);
},
error: function(data) {
me.error(data);
}
});
},
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;
},
setData : function(data){
this.data = data;
return this;
},
clear : function () {
this.data = {};
return this;
}
};
window.$ax = $ax;
} ());
