最近在使用bootStrap Table 的表格功能有一些自己的理解写下来分享一下
主要用的是一个bootStrapTable 和 jquery 的混合开发 具体怎样引入bootStrap Table 我就不一一详解了直接上代码
htm代码
<table id="table0">
</table>
js代码
var $table = $('#table0');//jq获取指定table
$table.bootstrapTable({//这是对指定table的初始话bootStrap 表格设置
url: ApiUrls.SupplierGetPagedList + "?ApproveState=Approved", //这个里面的ApiUrls是url链接的集合，bootStrap默认的是get的一个提交方式"?ApproveState=Approved"是get方法的查询参数
contentType: "application/x-www-form-urlencoded",//提交的信息类型
search: true, //搜索框
pageSize: "10",
pageNumber: "1",
singleSelect:true,//是否单选
sidePagination: "server",//设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置服务器数据地址（url）或者重写ajax方法。
pagination: true,//设置为 true 会在表格底部显示分页条。
silentSort: false, //设置为 false 将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效.
showRefresh: true, //是否显示刷新按钮
showColumns: false, //内容列下拉框
showHeader: true, //是否显示列头
toolbar: ".button_tow_one",//插入到表头的方法
sortable: true,//设置为false 将禁止所有列的排序。
sortOrder: "asc",//定义排序方式，'asc' 或者 'desc'。//正序 倒序
striped: true,//设置为 true 会有隔行变色效果。
pageList: [10, 20, 50, 100],
clickToSelect: true,//设置 true 将在点击行时，自动选择 rediobox 和 checkbox。
onSearch: function (text) {//bootStrap Table 上方会有一个快速搜索的输入框这个方法就是对应的快速框的搜索方法
$table.bootstrapTable('refresh', { url: ApiUrls.SupplierGetPagedList + "?ApproveState=Approved&Name="+text+"" });
},
maintainSelected: true,//设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
queryParams: function queryParams(params) {//其中输出的params是此表搜索的参数每次表格刷新就会执行
str.pageSize=this.pageSize
str.PageIndex=this.pageNumber
params = str
return params;
},
onCheck: function (row) {//选择某行触发
// clickRow[0] = row
obtainSupplyAgreement(row)
checkType=true
},
onUncheck: function (row) {//选择某行触发
checkType=false
$('#tab-1 table tbody').html('')
},
onClickRow: function (row) {//点击某行出发
// obtainSupplyAgreement(row)
},
columns: [{//对应的是thead 表头 表格数据加载完成后会根据下面的field一一对应数据
checkbox: true,
align: 'center'
}, {
field: 'Code',
title: '供应商编码',
}, {
field: 'Name',
title: '供应商名称',
}, {
field: 'Contacter',
title: '联系人',
}, {
field: 'Telephone',
title: '联系电话',
}, {
field: 'ApproveState',
title: '审核状态',
formatter: function formatter(value) {//自定义你的输出结果 你可以在其中自定义你的输出 如果你想表格内 该列是一个输入框 只要 return input 对应的代码就行
if (value == 'Rejected') {
return '拒绝'
} else if (value == 'Pending') {
return '待审核'
} else if (value == 'Approved') {
return '通过'
}
}
},{
field: 'Status',
title: '状态',
formatter: function formatter(value) {
if (value==1) {
return '启用'
} else if (value == '0') {
return '禁用'
}
}
}, {
field: 'Email',
title: '电子邮箱',
}, {
field: 'Fax',
title: '传真',
}
]
});
只要把这个代码复制完成可以完成基本的表格应用