JS表格组件神器bootstrap table详解（基础版）

//1.初始化Table
var oTable = new TableInit();
oTable.Init();

//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();

});

var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: '/Home/GetDepartment',//请求后台的URL（）
method: 'get',//请求方式（）
toolbar: '#toolbar',//工具按钮用哪个容器
striped: true,//是否显示行间隔色
cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（）
pagination: true,//是否显示分页（）
sortable: false,//是否启用排序
sortOrder: "asc",//排序方式
queryParams: oTableInit.queryParams,//传递参数（）
sidePagination: "server",//分页方式：client客户端分页，server服务端分页（）
pageNumber:1,//初始化加载第一页，默认第一页
pageSize: 10,//每页的记录行数（）
pageList: [10,25,50,100],//可供选择的每页的行数（）
search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,showColumns: true,//是否显示所有的列
showRefresh: true,//是否显示刷新按钮
minimumCountColumns: 2,//最少允许的列数
clickToSelect: true,//是否启用点击选中行
height: 500,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID",//每一行的唯一标识，一般为主键列
showToggle:true,//是否显示详细视图和列表视图的切换按钮
cardView: false,//是否显示详细视图
detailView: false,//是否显示父子表
columns: [{
checkbox: true
},{
field: 'Name',title: '部门名称'
},{
field: 'ParentName',title: '上级部门'
},{
field: 'Level',title: '部门级别'
},{
field: 'Desc',title: '描述'
},]
});
};

//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit,//页面大小
offset: params.offset,//页码
departmentname: $("#txt_search_departmentname").val(),statu: $("#txt_search_statu").val()
};
return temp;
};
return oTableInit;
};

var ButtonInit = function () {
var oInit = new Object();
var postdata = {};

oInit.Init = function () {
//初始化页面上面的按钮事件
};

return oInit;
};

(); for (var i = 0; i < 50; i++) { var oModel = new Department(); oModel.ID = Guid.NewGuid().ToString(); oModel.Name = "销售部" + i ; oModel.Level = i.ToString(); oModel.Desc = "暂无描述信息"; lstRes.Add(oModel); }

var total = lstRes.Count;
var rows = lstRes.Skip(offset).Take(limit).ToList();
return Json(new { total = total,rows = rows },JsonRequestBehavior.AllowGet);
}

// trim search input
if (this.options.trimOnSearch && $(event.currentTarget).val() !== text) {
$(event.currentTarget).val(text);
}

if (text === this.searchText) {
return;
}
this.searchText = text;

this.options.pageNumber = 1;
this.initSearch();
this.updatePagination();
this.trigger('search',text);
};

BootstrapTable.prototype.initSearch = function () {
var that = this;

if (this.options.sidePagination !== 'server') {
var s = this.searchText && this.searchText.toLowerCase();
var f = $.isEmptyObject(this.filterColumns) ? null : this.filterColumns;

// Check filter
this.data = f ? $.grep(this.options.data,function (item,i) {
for (var key in f) {
if (item[key] !== f[key]) {
return false;
}
}
return true;
}) : this.options.data;

this.data = s ? $.grep(this.data,i) {
for (var key in item) {
key = $.isNumeric(key) ? parseInt(key,10) : key;
var value = item[key],column = that.columns[getFieldIndex(that.columns,key)],j = $.inArray(key,that.header.fields);

// Fix #142: search use formated data
if (column && column.searchFormatter) {
value = calculateObjectValue(column,that.header.formatters[j],[value,item,i],value);
}

var index = $.inArray(key,that.header.fields);
if (index !== -1 && that.header.searchables[index] && (typeof value === 'string' || typeof value === 'number')) {
if (that.options.strictSearch) {
if ((value + '').toLowerCase() === s) {
return true;
}
} else {
if ((value + '').toLowerCase().indexOf(s) !== -1) {
return true;
}
}
}
}
return false;
}) : this.data;
}
};