bootstrap-table数据导出及Checkbox相关设置

相关功能:

  • 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 });

 

posted @ 2017-08-21 23:11  fengqixueluo  阅读(1411)  评论(0编辑  收藏  举报