腳本之家服務器常用軟件

快捷導航

SpringMVC+bootstrap table實例詳解

更新時間：2017年06月02日 09:14:17 作者：小爺胡漢三

本文通過實例給大家介紹了SpringMVC+bootstrap-table,需要的朋友可以參考下

bootstrap-table下載地址：https://github.com/wenzhixin/bootstrap-table/

先來看一張效果圖：

下載下來后，需要導入的css：由于需要bootstrap的支持，所以需要導入bootstrap的css

<!-- Bootstrap --> 
<link href="${contextPath }/static/bootstrap/css/bootstrap.min.css" rel="external nofollow"  
  rel="stylesheet"> 
<link href="${contextPath }/static/bootstrap/table/bootstrap-table.css" rel="external nofollow"  
  rel="stylesheet">

需要導入的js：除了bootstrap的js跟table的js外第一個要導入的就是jQuery的js，他們都是基于jQuery開發(fā)的

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
  <script src="${contextPath }/static/jquery/jquery.min.js"></script> 
  <!-- Include all compiled plugins (below), or include individual files as needed --> 
  <script src="${contextPath }/static/bootstrap/js/bootstrap.min.js"></script> 
  <script src="${contextPath }/static/bootstrap/table/bootstrap-table.js"></script> 
  <script src="${contextPath }/static/bootstrap/table/locale/bootstrap-table-zh-CN.js"></script>

bootstrap-table-zh-CN.js這個js是用來漢化table的提示文字的，在下載下來的bootstrap-table文件夾下的locale文件夾中有很多的語言包支持

完啦，我們只需要在html頁面中聲明一個table跟菜單div(如果不需要，可以不聲明)就好：

<div class="container-fluid"> 
    <div id="toolbar" class="btn-group"> 
      <button id="btn_add" type="button" class="btn btn-default"> 
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 
      </button> 
      <button id="btn_edit" type="button" class="btn btn-default"> 
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 
      </button> 
      <button id="btn_delete" type="button" class="btn btn-default"> 
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除 
      </button> 
      <button id="btn_info" type="button" class="btn btn-default"> 
        <span class="fa fa-info" aria-hidden="true"></span>詳情 
      </button> 
    </div> 
    <table id="table_sysUser"></table> 
  </div>

table_sysUser就是我們要顯示的table列表啦。

我們來看看js怎么來請求后臺的數(shù)據(jù)，并進行分頁跟查詢：

//項目根目錄 
var path = $("#contextPath").val(); 
$(document).ready(function() { 
  //初始化Table 
  var oTable = new TableInit(); 
  oTable.Init(); 
  //初始化頁面上面的按鈕事件 
  $("#btn_add").click(function(){ 
    //新增 
  }); 
  $("#btn_edit").click(function(){ 
    //編輯 
  }); 
  $("#btn_info").click(function(){ 
    //詳情 
  }); 
  $("#btn_delete").click(function(){ 
    //刪除 
  }); 
}); 
var TableInit = function () { 
  var oTableInit = new Object(); 
  //初始化Table 
  oTableInit.Init = function () { 
    $('#table_sysUser').bootstrapTable({ 
      url: path+'/sysuser/findUser.action',     //請求后臺的URL（*） 
      method: 'post',           //請求方式（*） 
      toolbar: '#toolbar',        //工具按鈕用哪個容器 
      striped: true,           //是否顯示行間隔色 
      cache: false,            //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） 
      pagination: true,          //是否顯示分頁（*） 
      sortable: true,           //是否啟用排序 
      sortName:"id", 
      sortOrder: "desc",          //排序方式 
      queryParams: oTableInit.queryParams,//傳遞參數(shù)（*） 
      queryParamsType: 'limit', 
      sidePagination: "server",      //分頁方式：client客戶端分頁，server服務端分頁（*） 
      pageNumber:1,            //初始化加載第一頁，默認第一頁 
      pageSize: 15,            //每頁的記錄行數(shù)（*） 
      pageList: [10, 15, 20, 50],    //可供選擇的每頁的行數(shù)（*） 
      search: true,            //是否顯示表格搜索 
      strictSearch: true, 
      showColumns: true,         //是否顯示所有的列 
      showRefresh: true,         //是否顯示刷新按鈕 
      minimumCountColumns: 2,       //最少允許的列數(shù) 
      clickToSelect: true,        //是否啟用點擊選中行 
      //height: 500,            //行高，如果沒有設置height屬性，表格自動根據(jù)記錄條數(shù)覺得表格高度 
      uniqueId: "id",           //每一行的唯一標識，一般為主鍵列 
      showToggle:true,          //是否顯示詳細視圖和列表視圖的切換按鈕 
      cardView: false,          //是否顯示詳細視圖 
      detailView: false,          //是否顯示父子表 
      contentType: "application/x-www-form-urlencoded", //解決POST提交問題 
      columns: [ 
           {checkbox: true }, 
      {title:'用戶名稱',field: 'userName',sortable:true }, 
      {title:'手機號碼',field: 'phone',sortable:true, 
         formatter:function(v,r,i){ 
          if(v){ 
            return v.substring(0,3)+"****"+v.substring(7,4); 
          } 
          return v; 
        }   
      }, 
      {title:'郵箱賬號',field: 'email',sortable:true }, 
      {title:'生日',field: 'birthday',sortable:true }, 
      {title:'部門',field: 'departmentKey',sortable:true, 
        formatter:function(v,r,i){ 
          if(r.departmentValue){ 
            return r.departmentValue; 
          } 
          return ""; 
        } 
      }, 
      {title:'最后登錄時間',field: 'lastLogintime',sortable:true }, 
      {title:'性別',field: 'sex',sortable:true, 
        formatter:function(v,r,i){ 
          switch (Number(v)) { 
          case 1: 
            return "男"; 
            break; 
          case 2: 
            return "女"; 
            break; 
          default: 
            return "未知"; 
            break; 
          } 
        } 
      }, 
      {title:'用戶狀態(tài)',field: 'status',sortable:true, 
        formatter:function(v,r,i){ 
          return r.statusCn == "false"?"啟用":"禁用"; 
        } 
      }, 
      {title:'所屬公司編號',field: 'companyId',sortable:true }, 
      {title:'注冊時間',field: 'createTime',sortable:true }, 
      {title:'用戶頭像',field: 'userhead',sortable:true }, 
      {title:'職位',field: 'positionKey',sortable:true}, 
      {title:'角色',field:'role'}] 
    }); 
  }; 
  //得到查詢的參數(shù) 
  oTableInit.queryParams = function (params) { 
    var temp = {  //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的 
      pageSize: params.limit,  //頁面大小 
  <span style="white-space:pre">    </span>pageNumber: params.pageNumber, //頁碼 
  <span style="white-space:pre">    </span>sortName: params.sort,<span style="white-space:pre"> </span>//排序列名 
  <span style="white-space:pre">    </span>sortOrder:params.order,<span style="white-space:pre">  </span>//排序方式 
  <span style="white-space:pre">    </span>searchText:params.search<span style="white-space:pre">  </span>//搜索框參數(shù) 
    }; 
    return temp; 
  }; 
  return oTableInit; 
};

很多參數(shù)在代碼注釋里面說得很明顯啦，我們來說說怎么新增查詢參數(shù)，我們只需要在queryParams方法里面在新增參數(shù)信息就行：

oTableInit.queryParams = function (params) { 
    var temp = {  //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的 
      pageSize: params.limit,  //頁面大小 
      pageNumber: params.pageNumber, //頁碼 
      sortName: params.sort, //排序列名 
      sortOrder:params.order, //排序方式 
      searchText:params.search,  //搜索框參數(shù) 
      searchText:params.search,  //搜索框參數(shù) 
    }; 
    return temp; 
  };

bootstrap-table獲取頁面上勾選的數(shù)據(jù)：

var rowData = $("#table_sysUser").bootstrapTable("getSelections");

bootstrap-table刷新表格：

$('#table_sysUser').bootstrapTable('refresh');

源碼：https://git.oschina.net/gzsjd/task

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

SpringMVC+bootstrap table實例詳解

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具