bootstrap-table

2017-06-16 15:36:25 by victo

bootstrap : http://v3.bootcss.com/components/#nav

案例及API：

bootsrop-table  : http://bootstrap-table.wenzhixin.net.cn/zh-cn/examples/    
　　　　　　　　  http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

　　　　　　　　  http://www.cnblogs.com/landeanfen/p/4976838.html

首先 1.得引入bootstrap git: http://v3.bootcss.com/
　　 2.引入bootstrap-table git:https://github.com/wenzhixin/bootstrap-table

页面头部：引入

<link rel="stylesheet" type="text/css" href="../libs/bootstrap-3.3.5/css/bootstrap.css">
<script type="text/javascript" src="../libs/bootstrap-3.3.5/js/bootstrap.js"></script>

<link rel="stylesheet" type="text/css" href="../libs/bootstrap-table/bootstrap-table.min.css">
<script type="text/javascript" src="../libs/bootstrap-table/bootstrap-table.min.js"></script>

/*引入中文包*/

<script type="text/javascript" src="../libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

html:只需写  <table id="zpgl_interview"></table>

js中:

<script>

　　$(function(){
　　　　var oTable = new TableInit();
　　　　oTable.Init();
　　　　$("#zpgl_interview_searchBtn").click(function(){
　　　　　　$("#zpgl_interview").bootstrapTable(('refresh'));
　　　　})
　　})

　　var TableInit = function(){
　　var oTableInit = new Object();
　oTableInit.Init = function () {
　　$("#zpgl_interview").bootstrapTable({
　　　　type:'POST',
　　　　url:rootPath+'careerBussiness/getUnInterviewMember',
　　　　queryParams:oTableInit.queryParams,//传递参数（*）
　　　　sidePagination: 'server',//设置为服务器端分页
　　　　cache: false, //是否使用缓存
　　　　search: false, //是否显示表格搜索
　　　　pagination: true, //是否显示分页（*）
　　　　contentType:'',//此项必不可少，，原因不明
　　　　pageList: [10, 25, 50], //可供选择的每页的行数（*）
　　　　queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
　　　　　　　　　　　　　　// 设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber
　　　　showFooter:true,//是否显示底部 合计。

　　　　// toolbar: '#entryTopBar',
　　　　responseHandler: function(res) {//此函数可对接口返回的值操作
　　　　　　return {
　　　　　　　　"total": res.total,//总页数
　　　　　　　　"rows": res.data //数据
　　　　　　};
　　　　},
　　　　columns: [{

　　　　 checkbox: true//次句为table添加chekbox

　　　　},{
　　　　　　field: 'true_name', //file字段必须与后台给出的字段相同
　　　　　　title: '姓名'
　　　　}, {
　　　　　　field: 'offer_post',
　　　　　　title: '面试职位',
　　　　　　sortable:true,

　　　　　　formatter:function(value, row, index){//此处用formatter函数初始化row中传入的值

　　　　　　　　return row.bussiness.createTime;

　　　　　　}

　　　　}, {
　　　　　　field: 'effective_date',
　　　　　　title: '面试日期'
　　　　}, {
　　　　　　field: 'mobile',
　　　　　　title: '联系电话'
　　　　}, {
　　　　　　field: 'status',
　　　　　　title: '状态'
　　　　}, {
　　　　　　field: 'insurance',
　　　　　　title: '保险',

　　　　　　footerFormatter:'总计：'
　　　　}, {
　　　　　　field: 'salary',
　　　　　　title: '薪资',

　　　　　　formatter:function(value,row,index){

　　　　　　　　return row.salary;

　　　　　　},

　　　　　　footerFormatter:function(value){//合计
　　　　　　　　var count = 0;
　　　　　　　　for(var i in value){
　　　　　　　　　　if(value[i].netPay!='undefined'){
　　　　　　　　　　　　count+=Number(value[i].netPay)
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　return String(count);
　　　　　　}

　　　　},{
　　　　　　field: 'action',
　　　　　　title: '操作',
　　　　　　formatter:function(value, row, index){
　　　　　　　　return [
　　　　　　　　　　'<a class="look green anctionButton" href="javascript:void(0)" title="Like">',
　　　　　　　　　　'查看',
　　　　　　　　　　'</a>',
　　　　　　　　　　'<a class="interviewNow anctionButton" href="javascript:void(0)" title="interview">',
　　　　　　　　　　'面试',
　　　　　　　　　　'</a>',
　　　　　　　　　　'<a style="color:#e4393c;" class="remove yellow anctionButton" href="javascript:void(0)" title="Remove">',
　　　　　　　　　　'删除',
　　　　　　　　　　'</a>'
　　　　　　].join('');
　　　　},
　　　　events:actionEvents
　　　　}],
　　　})
　　}
　　oTableInit.queryParams = function (params) {
　　var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
　　　　　　access_token:getToken(),
　　　　　　pageNum:params.pageNumber,
　　　　　　pageSize:parseInt($(".page-size").html()),
　　　　　　trueName:$('.search-box').val()//搜索的传参
　　};
　　return temp;
　　};
　　return oTableInit;
}
window.actionEvents = {
　　'click .look':function(e,value,row,index){
　　　　　// console.log(row)
　　　　window.location.href = 'interviewInfo.jsp?userId=' + row.id;
　　},
　　'click .interviewNow':function(e,value,row,index){

　　　　window.location.href = 'interviewInfo.jsp?userId=' + row.id+'&type='+row.status;
　　},
　　'click .remove': function (e, value, row, index) {
　　　　//调用删除接口
　　　　delectUserInfo(row.id);
　　}

}

//点击按钮 获取checkBox选中项

var hasSelected = $("#zpgl_interview").bootstrapTable('getSelections');

//此处为bootstrapDialog的效果 不为文章重点

function delectUserInfo(userId){
　　console.log(userId)
　　BootstrapDialog.show({
　　　　title: '删除员工',
　　　　message:"确定要删除该员工吗？",
　　　　size: BootstrapDialog.SIZE_WIDE,
　　　　buttons: [{
　　　　　　label: '确定',
　　　　　　action: function(dialog) {
　　　　　　$.ajax({
　　　　　　　　type : 'post',
　　　　　　　　cache : false,
　　　　　　　　dataType : 'json',
　　　　　　　　url : rootPath+'/userLib/deleteUserLib',
　　　　　　　　data : { 
　　　　　　　　　　access_token:getToken(),
　　　　　　　　　　id:userId
　　　　　　　　},
　　　　　　　　success : function(data) {
　　　　　　　　　　showSuccessDialog(data.msg);

　　　　　　　　　　//刷新页面
　　　　　　　　　　$("#zpgl_interview").bootstrapTable(('refresh'));
　　　　　　}
　　　　});
　　　　dialog.close()
　　　　}
　　}, {
　　　　label: '取消',
　　　　action: function(dialog) {
　　　　dialog.close()
　　　　　　}
　　　　}]
　　});
}

</script>