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>