<table id="screenTable" data-toggle="table"> <thead> ... </thead> </table> $(function () { $('#screenTable').bootstrapTable({ url: "/screen/list", dataField: "rows", cache: false, //是否使用缓存,默认为true striped: true, //是否显示行间隔色 pagination: true, //是否显示分页 pageSize: 10, //每页的记录行数 pageNumber: 1, //初始化加载第一页,默认第一页 pageList: [10, 20, 50], //可供选择的每页的行数 search: true, //是否显示表格搜索 showRefresh: true, //是否显示刷新按钮 clickToSelect: true, //是否启用点击选中行 toolbar: "#toolbar_screen", //工具按钮用哪个容器 sidePagination: "server", //分页方式:client客户端分页,server服务端分页 queryParamsType: "limit", //查询参数组织方式 columns: [{ field: "id", title: "ID", align: "center", valign: "middle" }, { field: "name", title: "定制名称", align: "center", valign: "middle", formatter: 'infoFormatter' }, { field: "time", title: "定制时间", align: "center", valign: "middle" },
{
title: '操作',
field: 'operation',
align: 'middle',
formatter:function(value,row){
alluserLisr.push(row);
return '<div class="ui-pg-div">'+
'<a href="javascript:void(0)" title="编辑" class="ui-icon icon-pencil grey" onclick="popedit('+row.id+');">编辑</a> '+
'<a href="javascript:void(0)" title="删除" class="ui-icon icon-remove grey" onclick="popalert('+row.id+');">删除</a> '+
'</div>';
}
}
], formatNoMatches: function () { return '无符合条件的记录'; } }); $(window).resize(function () { $('#screenTable').bootstrapTable('resetView');//当页面缩放时 将表格缩放 响应式 }); }); function infoFormatter(value, row, index) { return '<a href=/screen/' + row.id + ' target="_blank">' + row.name + '</a>'; }
2.事件
$(function(){ /*初始化表格*/ $("#screenTable").bootstrapTable({ data: data }); /*加载事件*/ $("#screenTable") .on('click-row.bs.table', function (e, row, ele,field) { $("#eventInfo").text('点击行事件 当前商品名:'+ row.goodsName + ',价格:' + row.price + ',效期:' + row.date + '当前点击单元格field值为:' + field); }) .on('dbl-click-row.bs.table', function (e, row, ele,field) { $("#eventInfo").text('双击行事件'); }) .on('check.bs.table', function (e, row,ele) { $("#eventInfo").text('checkbox选中事件'); }) .on('uncheck.bs.table', function (e, row,ele) { $("#eventInfo").text('checkbox取消选中事件'); }) .on('sort.bs.table', function (e, field, order) { var o; switch(order){ case "desc": o = "降序"; break; case "asc": o = "升序"; break; } $("#eventInfo").text('排序事件 当前' + name + '列,以' + o + "排列"); }) .on('check-all.bs.table', function (e,dataArr) { $("#eventInfo").text('全选事件'); }) .on('uncheck-all.bs.table', function (e,dataArr) { $("#eventInfo").text('取消全选事件'); }) .on('load-success.bs.table', function (e, data) { $("#eventInfo").text('加载成功事件'); }) .on('load-error.bs.table', function (e, status) { $("#eventInfo").text('加载错误事件'); }) .on('column-switch.bs.table', function (e, field, checked) { var colName; switch(field){ case "goodsName": colName = "商品名称"; break; case "price": colName = "价格"; break; case "date": colName = "日期"; break; } if(checked){ $("#eventInfo").text('筛选列事件 ' + colName + '列显示'); }else{ $("#eventInfo").text('筛选列事件 ' + colName + '列隐藏'); } }) .on('page-change.bs.table', function (e, number, size) { $("#eventInfo").text('切换页事件 当前页数:第' + number + "页,每页显示数量" + size + "条"); }) .on('search.bs.table', function (e, text) { $("#eventInfo").text('搜索事件'); }); });
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
复选框事件
$('#').bootstrapTable('destroy').bootstrapTable({
method: 'get',
url:',
cache: false,
dataType: "json",
pagination: true,
"queryParamsType": "limit",
//singleSelect: true,
singleSelect: false,
contentType: "application/x-www-form-urlencoded",
pageSize: current_page_checkline,
pageNumber:1,
pageList: [10,20,50,100,1000],
sidePagination: "server",
height: 280,
formatLoadingMessage: function () {
return "请稍等,正在加载中...";
},
queryParams: function (params) {
return {
rows: params.limit, //页大小
page: params.offset==0 ? 1 : params.offset/params.limit+1,
barTypes:'guanxian,taoguan',
namelike:encodeURI( )
}
},
columns: [
{checkbox : true,align: 'center',valign: 'middle',formatter:function(value,row) {}
},
{ title: '管点类型', field: 'barType',align: 'center',valign: 'middle',formatter:function(value,row){
if(value=="guanxian")
{
return "管线";
}
else if(value=="otherguanxian")
{
return "其他管线";
}
else if(value=="taoguan")
{
return "套管";
}
}},
{ title: '名称',field: 'name',align: 'center',valign: 'middle'},
],
onCheck:function (row, elm, field) { //选中某一个
},
onCheckAll:function (row, elm, field) { //全部选中
}/*,
onUncheck:function (row, elm, field) {
},
onUncheckAll:function (row, elm, field) {
}*/
});
3.复选框默认选中
if (row.isSelect == 1){
return {
checked : true//设置选中
};
}else{
return {
checked : false//设置不选中
};
}
4. 获取数据
var selectObjs=$('#deviceManageTable').bootstrapTable('getData');