本文详细介绍了一个基于bootstrap-table的佣金审核系统实现，包括数据表格配置、分页参数设置、审核流程及事件绑定等核心内容，展示了如何通过ajax请求与后端进行数据交互，以及如何处理审核通过、驳回等操作。
学习地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/
bootstrap-table：
注意表格配置：
// 载入所需模块
define([
'http',
'config',
'util',
'extension'
],
function(http, config, util, $$) {
return {
name: 'commission',
init: function() {
var _this = this;
_this.pagesInit();
_this.bindEvent();
},
pagesInit: function() {
var _this = this;
// 分页配置，分页参数
var pageOptions = {
number: 1,
size: 10,
offset: 0,
type: 'commission',
phone: '',
orderStatus: ''
}
//获取确认表格对象
var confirm = $('#confirmModal');
// 数据表格配置---待审核
var tableConfig1 = {
//数据获取，这里是ajax请求的方式，也可用url的方式
ajax: function(origin) {
http.post(config.api.commissionList, {
data: {
page: pageOptions.number,
rows: pageOptions.size,
type: pageOptions.type,
phone: pageOptions.phone,
orderStatus:"pending"
},
contentType: 'form'
}, function(rlt) {
origin.success(rlt)
})
},
//主键
idField: 'oid',
//是否分页
pagination: true,
//表格分页的位置：服务端
sidePagination: 'server',
//分页的页码数设置
pageList: [10, 20, 30, 50, 100],
//获取查询的参数
queryParams: getQueryParams1,
//对应的表格
columns: [{
width: 30,
align: 'center',
formatter: function(val, row, index) {
var res = '<input name="oids" type="checkbox" value="'+row.oid+'">';
return res;
}
}, {
//字段名称，必须和返回值里面的字段名称相同
width: 50,
field: 'phone',
align: 'center'
}, {
width: 50,
field: 'orderAmount',
align: 'center'
}, {
width: 50,
field: 'friendPhone',
align: 'center'
},{
width: 50,
field: 'friendInvest',
align: 'center'
},{
width: 50,
field: 'friendInvestTime',
align: 'center',
//时间格式转换
formatter: function(val, row, index) {
return util.table.formatter.timestampToDate(val, 'YYYY-MM-DD HH:mm:ss')
}
},{
width: 256,
align: 'center',
//添加按钮
formatter: function(val, row, index) {
if(row.status=='no'){
return '已失效';
}
var buttons = [{
text: '确认',
type: 'button',
class: 'pass',
isRender: true
}, {
text: '驳回',
type: 'button',
class: 'refused',
isRender: true
}]
return util.table.formatter.generateButton(buttons,"dataTable");
},
//给按钮添加点击事件
events: {
'click .pass': function(e, value, row) {
//通过
confirm.find('.popover-title').html('提示');
var html="确定佣金通过审核？<hr style='width:200px; height:2px;border-top:2px solid #C0C0C0;' /><font color='green'>审核成功可使用！</font>"
confirm.find('p').html(html);
$$.confirm({
container: confirm,
trigger: this,
accept: function() {
http.post(config.api.commissionOrderPass, {
data: {
oid: row.oid
},
contentType: 'form'
}, function(res) {
if(res.errorCode == 0) {
confirm.modal('hide')
$('#dataTable1').bootstrapTable('refresh')
$('#dataTable2').bootstrapTable('refresh')
$('#dataTable3').bootstrapTable('refresh')
} else {
errorHandle(res);
}
})
}
})
},
'click .refused': function(e, value, row) {
$('#commissionModal').modal({
show: true,
backdrop: 'static'
}).find(".modal-title").html("驳回");
http.post(config.api.commissionOrderDetail, {
data: {
oid: row.oid
},
contentType: 'form',
async:'false',
}, function (result) {
$$.formAutoFix($('#commissionForm'), result);
$('#oid').val(result.oid);
})
}
}
}]
};
// 数据表格配置---审核通过
var tableConfig2 = {
ajax: function(origin) {
http.post(config.api.commissionList, {
data: {
page: pageOptions.number,
rows: pageOptions.size,
type: pageOptions.type,
phone: pageOptions.phone,
orderStatus:"pass"
},
contentType: 'form'
}, function(rlt) {
origin.success(rlt)
})
},
idField: 'oid',
pagination: true,
sidePagination: 'server',
pageList: [10, 20, 30, 50, 100],
queryParams: getQueryParams2,
columns: [{
width: 30,
align: 'center',
formatter: function(val, row, index) {
return pageOptions.offset + index + 1
}
}, {
width: 50,
field: 'phone',
align: 'center'
}, {
width: 50,
field: 'orderAmount',
align: 'center'
}, {
width: 50,
field: 'friendPhone',
align: 'center'
},{
width: 50,
field: 'friendInvest',
align: 'center'
},{
width: 100,
field: 'auditor',
align: 'center'
},{
//审核/驳回时间
width: 100,
field: 'auditTime',
align: 'center',
formatter: function(val, row, index) {
return util.table.formatter.timestampToDate(val, 'YYYY-MM-DD HH:mm:ss')
}
}]
};
// 数据表格配置---审核驳回
var tableConfig3 = {
ajax: function(origin) {
http.post(config.api.commissionList, {
data: {
page: pageOptions.number,
rows: pageOptions.size,
type: pageOptions.type,
phone: pageOptions.phone,
orderStatus:"refused"
},
contentType: 'form'
}, function(rlt) {
origin.success(rlt)
})
},
idField: 'oid',
pagination: true,
sidePagination: 'server',
pageList: [10, 20, 30, 50, 100],
queryParams: getQueryParams3,
columns: [{
width: 30,
align: 'center',
formatter: function(val, row, index) {
return pageOptions.offset + index + 1
}
}, {
width: 50,
field: 'phone',
align: 'center'
}, {
width: 50,
field: 'orderAmount',
align: 'center'
}, {
width: 50,
field: 'auditTime',
align: 'center',
formatter: function(val, row, index) {
return util.table.formatter.timestampToDate(val, 'YYYY-MM-DD HH:mm:ss')
}
},{
width: 100,
field: 'auditor',
align: 'center'
},{
//驳回意见
width: 256,
field: 'rejectAdvice',
align: 'center'
}]
}
// 初始化数据表格
$('#dataTable1').bootstrapTable(tableConfig1);
$('#dataTable2').bootstrapTable(tableConfig2);
$('#dataTable3').bootstrapTable(tableConfig3);
$$.searchInit($('#searchForm'), $('#dataTable1'));
$$.searchInit($('#searchForm'), $('#dataTable2'));
$$.searchInit($('#searchForm'), $('#dataTable3'));
$('#commissionForm').validator();
function getQueryParams1(val) {
// 参数 val 是bootstrap-table默认的与服务器交互的数据，包含分页、排序数据
var form = document.searchForm
// 分页数据赋值
pageOptions.size = val.limit
pageOptions.number = parseInt(val.offset / val.limit) + 1
pageOptions.offset = val.offset
pageOptions.phone = form.phone.value.trim()
pageOptions.orderStatus="pending"
return val
};
function getQueryParams2(val) {
// 参数 val 是bootstrap-table默认的与服务器交互的数据，包含分页、排序数据
var form = document.searchForm
// 分页数据赋值
pageOptions.size = val.limit
pageOptions.number = parseInt(val.offset / val.limit) + 1
pageOptions.offset = val.offset
pageOptions.phone = form.phone.value.trim()
pageOptions.orderStatus="pass"
return val
};
function getQueryParams3(val) {
// 参数 val 是bootstrap-table默认的与服务器交互的数据，包含分页、排序数据
var form = document.searchForm
// 分页数据赋值
pageOptions.size = val.limit
pageOptions.number = parseInt(val.offset / val.limit) + 1
pageOptions.offset = val.offset
pageOptions.phone = form.phone.value.trim()
pageOptions.orderStatus="refused"
return val
}
},
bindEvent: function() {
var _this = this;
var offTable = []
var onTable = []
//显示待发放佣金
// $("#pending").on("click", function() {
// $("#d_pending").attr("style","display:block;");
// $("#d_pass").attr("style","display:none;");
// $("#d_refused").attr("style","display:none;");
// });
//显示审核成功佣金
// $("#pass").on("click", function() {
// $("#d_pending").attr("style","display:none;");
// $("#d_pass").attr("style","display:block;");
// $("#d_refused").attr("style","display:none;");
// });
//显示审核拒绝佣金
// $("#refused").on("click", function() {
// $("#d_pending").attr("style","display:none;");
// $("#d_pass").attr("style","display:none;");
// $("#d_refused").attr("style","display:block;");
// });
//驳回意见
$("#commissionSubmit").on("click", function() {
var rsr={};
rsr.oid=document.commissionForm.oid.value;
rsr.rejectAdvice = document.commissionForm.rejectAdvice.value;
http.post(config.api.commissionOrderRefused, {
data: {
"rsrJSON":JSON.stringify(rsr)
},
contentType: 'form',
}, function(result) {
if(result.errorCode==0){
$('#commissionModal').modal('hide');
$('#dataTable1').bootstrapTable('refresh');
$('#dataTable2').bootstrapTable('refresh');
$('#dataTable3').bootstrapTable('refresh');
}
})
});
//全选
$("#orderIds").on("click", function() {
var checked = $("#orderIds").prop("checked");
$("input[name='oids']").prop("checked", checked);
});
//批量审核
$("#batchPassSubmit").on("click", function(){
var checkedOids = [];
$("input[name='oids']:checkbox:checked").each(function(i, o){
checkedOids.push($(this).val());
});
if(checkedOids.length === 0){
return;
}
var confirm = $('#confirmModal');
//通过
confirm.find('.popover-title').html('提示');
var html="确定批量佣金通过审核？<hr style='width:200px; height:2px;border-top:2px solid #C0C0C0;' /><font color='green'>审核成功可使用！</font>"
confirm.find('p').html(html);
$$.confirm({
container: confirm,
trigger: this,
accept: function() {
http.post(config.api.commissionOrderBatchPass, {
data: {
'oids':checkedOids.join(',')
},
contentType: 'form',
}, function(result) {
if(result.errorCode==0){
$('#commissionModal').modal('hide');
$('#dataTable1').bootstrapTable('refresh');
$('#dataTable2').bootstrapTable('refresh');
$('#dataTable3').bootstrapTable('refresh');
}
})
}
})
});
}
}
})
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
