官网地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/
翻译过的中文API:http://blog.youkuaiyun.com/rickiyeat/article/details/56483577
Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 如下:
http://www.cnblogs.com/landeanfen/p/5157595.html 一年前某大神写的
http://www.cnblogs.com/landeanfen/p/7095414.html 一年后某大神写的
刷新表格 : $('#tableOrderCash').bootstrapTable('refresh');
表格初始化: loadMarAdvertListPage(); //重新调用表格方法
一、引入css和 js(中文包的j bootstrap-table-zh-CN.js不记得要不要引入了)
二、初始化实例
function loadMarAdvertListPage() {
$('#tableMarAdvertList').bootstrapTable('destroy');
$('#tableMarAdvertList').bootstrapTable({
url: yy_context+"/screen/list.do", //请求后台的URL(*)
method: 'post', //请求方式(*)
// toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParamsType: "limit",
queryParams: function (params) { //传递参数(*)
//这里的id值是查询的input框id
var startTime = $("#startAdvertListDate").val();
var endTime = $("#endAdvertListDate").val();
var limit = params.limit;
var offset = params.offset;
var name = $("#listName").val();
var status = $("#status").val();
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: limit, //页面大小
offset: offset, //页码
name: name,
startTime: startTime,
endTime: endTime,
status: status
}
return temp;
},
sidePagination: 'server', //client客户端分页,server服务端分页(*)
pageNumber:1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 1, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
// height: 556, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
fixedColumns:true,
fixedNumber:0,
uniqueId: "id", //每一行的唯一标识,一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns:
[{field: 'name', title: '名称',width:120},
{field: 'beingTime', title: '展示开始时间', width:160, //此处为展示时间
formatter:function (value, row, index) {
if(value == undefined || value == "" || value == null){
return "";
}
var date = new Date(value);
return date.Format("yyyy-MM-dd hh:mm");
}
},
{field: 'endTime', title: '展示结束时间', width:160,//此处为展示时间
formatter:function (value, row, index) {
if(value == undefined || value == "" || value == null){
return "";
}
var date = new Date(value);
return date.Format("yyyy-MM-dd hh:mm"); //返回日期插件的日期格式
}
},
{field: 'link', title: '操作', width:180,
formatter:function (value, row, index) {
var htmlstr = "";
if(row.id != 1){
htmlstr += '<span id="detailMarActivitySpanId" onclick="detailMarAdvertSpanOnclick('+ row.id + ',' + row.pId + ')">'+'查看'+'</span>'
+ '<span id="editlMarActivitySpanId" onclick="editMarAdvertSpanOnclick('+ row.id +')">'+'编辑'+'</span>'
+ '<span id="deleteMarActivitySpanId" onclick="deleteMarAdvertSpanOnclick('+ row.id +')">'+'删除'+'</span>';
}
return htmlstr;
}
}]
});
}