相关功能：
- bootstrapTable url请求Springmvc controller获取json数据加载到table中
- bootstrap-table-export导出表格数据
- checkbox value设置及获取
>>>导入相关js
1 <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" /> 2 <script src="/js/jquery-1.11.3.min.js" type="text/javascript"></script> 3 <script src="/js/bootstrap.min.js" type="text/javascript"></script> 4 5 <!--bootstrap table组件以及中文包的引用--> 6 <script src="/bootstrap-table/bootstrap-table.js" type="text/javascript"></script> 7 <link href="/bootstrap-table/bootstrap-table.css" rel="stylesheet" /> 8 <script src="/bootstrap-table/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script> 9 <!-- bootstrap 导出数据相关js --> 10 <script src="/bootstrap-table/bootstrap-table-export.js" type="text/javascript"></script> 11 <script src="/bootstrap-table/tableExport.js" type="text/javascript"></script>
>>>加载Table数据
1 $("#tbl_user").bootstrapTable({ 2 url:"${pageContext.request.contextPath}/getAllCategory", //设置数据来源 3 search: true, 4 toolbar: '#toolbar', 5 pagination: true, //设置分页 6 idField: "cid", //重要---可设置checkbox的值为指定字段 7 clickToSelect:true, 8 striped:true, 9 pageList:[5,10,15,20], 10 pageSize:5, 11 selectItemName:"cid", //设置checkbox name属性，可用于遍历获取选中值 12 onDblClickCell:function(field, value, row, $element){ 13 updateCategory(row.cid); 14 }, 15 onLoadSuccess:function(data){ 16 17 }, 18 exportDataType:'all', 19 showExport: true, //是否显示导出按钮 20 exportTypes:['excel'], //导出文件类型 21 buttonsAlign:"right", //按钮位置 22 Icons:'glyphicon-export', 23 exportOptions:{ 24 fileName: 'CategoryList', //设置导出文件名称 25 worksheetName: 'sheet1', //表格工作区名称 26 tableName: 'CategoryList', 27 excelstyles: ['background-color', 'color', 'font-size', 'font-weight'] 28 }, 29 columns:[{ 31 checkbox:true, //设置显示Checkbox
35 },{ 36 field:"cid", 37 title:"序号", 38 formatter: function (value, row, index) { //value 39 return index+1; 40 } 41 },{ 42 field:"cid", 43 title:"类别ID" 44 },{ 45 field:'cname', 46 title:'类别名称' 47 },{ 48 title: '操作', 49 align: 'center', 50 valign: 'middle', 51 formatter: function (value, row, index) { //每行添加修改和删除按钮 52 return [ 53 "<a href='javascript:void(0)' onclick='updateCategory(""+row.cid+"")' class='glyphicon glyphicon-pencil' data-toggle='modal'>修改</a> "+ 54 "<a href='${pageContext.request.contextPath}/deleteCategoryByCid?cid="+row.cid+"' class='glyphicon glyphicon glyphicon-trash'>删除</a>" 55 ] 56 } 57 } 58 ] 59 });