1. 程式人生 > >bootstrap table使用:前端分頁,獲取值棧中的json值,載入到table中,獲取選中的行資訊

bootstrap table使用:前端分頁,獲取值棧中的json值,載入到table中,獲取選中的行資訊

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>使用者列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx}/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctx}/css/animate.css" rel="stylesheet">
    <link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">


</head>

<body class="white-bg">
<div class="col-sm-12">
    <div class="example-wrap">
        <div class="search-form">
            <form role="form" class="form-inline">
            <div class="form-group">
                <label for="departmentName" class="sr-only">部門名稱</label>
                <input type="text" placeholder="請輸入部門名稱" id="departmentName"  name="departmentName" class="form-control">
            </div>
            <button class="btn btn-white" type="submit">查詢</button>
        </form>
        </div>
        <div class="userlistmodule">
            <div id="toolbar" class="bg-gray">
                <button id="ok" type="button" class="btn btn-primary btn-sm rightSize" onclick="window.location.href='${ctx}/sys/user!newUserJump.action?deptId=${userDeptId}'"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增</button>
                <button id="ok1" type="button" class="btn btn-default btn-sm rightSize" onclick="getRowsId()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除</button>
            </div>
            <table id="userlist"></table>
        </div>
    </div>
</div>

<!-- 全域性js -->
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="${ctx}/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx}/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx}/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script>

   $(function () {
    var datas =eval(${userListJson});
    $('#userlist').bootstrapTable({ 
        method: 'get',
        cache: false,
        height: 530,
        striped: true,
        pagination: true,
        pageSize: 20,
        pageNumber:1,
        pageList: [10, 20, 50, 100, 200, 500],  sidePagination:'client',
        toolbar:'#toolbar',
        search: true,
        showColumns: true,
        showRefresh: false,
        showExport: false,
        exportTypes: ['csv','txt','xml'],
        clickToSelect: true,
         columns: [ 
          {field:'state', checkbox: true}, 
          {field:'userId', title:'使用者編號'}, 
          {field:'userName', title:'姓名',formatter:deptNameFormatter}, 
          {field:'deptName', title:'部門'}, 
          {field:'positionName', title:'職位'}, 
          {field:'loginCode', title:'登入賬號'}, 
          {field:'password', title:'密碼'}, 
          {field:'userSort', title:'排序號'}, 
         ],
            data:datas,
        }); 
    });
   
   function deptNameFormatter(value, row, index) {                
       return '<a href="${ctx}/sys/department!updateDeptJump.action?deptId='+row.userId+'" rel="external nofollow" >'+ value + '</a>';
   }
   
 //使用getSelections即可獲得,row是json格式的資料

 function getRowsId()
 {
     var row=$.map($("#userlist").bootstrapTable('getSelections'),function(row){
         return row;
         });
     var ids="";
     if(row.length<=0){
         alert("請選擇要刪除的記錄!");
     }
     else{
            
         for(var i=0;i<row.length;i++){
             if(i==0 || i=="0"){
                 ids+=row[i].userId;
             }else{
                 ids+=","+row[i].userId;
             }
         }
         window.location.href='${ctx}/sys/department!deleteDept.action?delIds='+ids;
            
        }
 
 }

</script>

</body>

</html>