bootstrapTable 应用小例(收索)-LMLPHP

        <script src="/plugins/My97DatePicker/WdatePicker.js"></script>
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
<small>财务管理>导入编辑</small>
<a class="pull-right" href="/finance/virtualAccounts/detail" style="cursor:pointer;">返回主表</a>
</h1>
</section>
<!-- Main content -->
<section class="content">
<!-- Your Page Content Here -->
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="form-inline "  >
<div class="box-header">
<input type="text" hidden value="${(virtual_id)!}" name="virtual_id"/>
<input type="text" hidden value="${(account)!}" name="account"/>
<#if permissions?seq_contains('mergeEditor')> <div class="form-group ">
<button class="btn btn-primary mergeEditor ">
<i class="fa "></i> 合并编辑
</button>
</div> </#if> <#if permissions?seq_contains('delVirtual_accountExcel')> <div class="form-group ">
<button class="btn btn-primary btn-del ">
<i class="fa "></i> 删除
</button>
</div> </#if>
<!--搜索-->
<div id="toolbar" class="my-container">
<div> <input id="s_trade_type" type="text" class="form-control" placeholder="输入账务类型">
<input id="s_opposing_account" type="text" class="form-control" placeholder="输入对方账户">
<input id="s_opposing_name" type="text" class="form-control" placeholder="输入对方名称">
<input id="s_product_name" type="text" class="form-control" placeholder="输入商品名称"> <button id="btnSearch" type="button" class="btn btn-primary">搜索</button>
</div> </div> <!--搜索--> <#if permissions?seq_contains('find_virtual_accountExcel')>
<div class="form-group pull-right">
<div class="form-group ">
<input type="text" name="trade_type_alias" class="form-control" placeholder="输入账务类型....">
<input type="text" name="opposing_account_alias" class="form-control" placeholder="输入对方账户....">
<input type="text" name="opposing_name_alias" class="form-control" placeholder="输入对方名称....">
</div> <div class="form-group">
<a class="btn btn-primary btn-sm btn-search">
<i class="fa fa-search"></i> 查询
</a>
</div>
</div>
</#if> <table id="virtualExceldatatable"></table>
</div>
</div>
</div>
</div>
</div>
</section>
<div id="Excel_insertorupdate_dialog" hidden >
<form class="form">
<div class="form-horizontal"><!-- style="max-height: 500px;overflow-y: scroll;"--> <input type="hidden" id="virtual_import_id" name="virtual_import_id"/> <div class="form-group ">
<label class="col-sm-3 control-label text-right">票据号:</label> <div class="col-sm-7">
<input type="text" class="form-control" placeholder="票据号" name="bill_code">
</div>
</div> <div class="form-group">
<label class="col-sm-3 control-label text-right">分类:</label>
<div class="col-sm-3">
<select name="type1_id" class="form-control" onchange="getSubClassify(this)">
<option value="">分类1</option>
<!--<#list accountClassify as class>-->
<!--<option value="${(class.id)!}" >${(class.classify_name)!}</option>-->
<!--</#list>-->
</select>
</div>
<div class="col-sm-4">
<select name="type2_id" class="form-control">
<option value="">分类2</option>
</select>
</div>
</div> <div class="form-group">
<label class="col-sm-3 control-label text-right">摘要:</label> <div class="col-sm-7">
<input type="text" class="form-control" placeholder="摘要" name="abstract">
</div>
</div> <div class="form-group">
<label class="col-sm-3 control-label text-right">日期:</label> <div class="col-sm-7">
<input type="text" name="trade_date" class="form-control" placeholder="日期"
onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" data-rule="日期:required;">
</div>
</div> <div class="form-group">
<label class="col-sm-3 control-label text-right">类型:</label> <div class="col-sm-7">
<input type="radio" value="0" name="trade_type">收入
<input type="radio" value="1" name="trade_type">支出
<input type="radio" value="2" name="trade_type">转账
</div>
</div> <div class="form-group" >
<label class="col-sm-3 control-label text-right">发生账户:</label> <div class="col-sm-7">
<input type="text" disabled class="form-control" value="${(account)!}" name="account_id">
</div>
</div> <div class="form-group" >
<label class="col-sm-3 control-label text-right">对方名称:</label> <div class="col-sm-7">
<input type="text" disabled class="form-control" placeholder="对方名称" name="opposing_name">
</div>
</div> <div class="form-group" >
<label class="col-sm-3 control-label text-right">对方账户:</label> <div class="col-sm-7">
<input type="text" disabled class="form-control" placeholder="对方账户" name="opposing_account">
</div>
</div> <div class="form-group" >
<label class="col-sm-3 control-label text-right">金额(元):</label> <div class="col-sm-7">
<input type="text" class="form-control" placeholder="金额" name="trade_amount">
</div>
</div> </div>
</form>
</div> <script type="text/javascript"> $('.mergeEditor').click(function () { var rows = $("#virtualExceldatatable").bootstrapTable('getSelections');
if (rows.length<2) {
bootbox.alert('请选择要合并的数据');
return;
}
var recode = '';
var recodeThan='';
var flag=true;
let money=0;
let out_amount_sum=0;
let in_amount_sum=0;
let ids='';
let trade_type='';
for(let i=0;i<rows.length;i++){
if(i==0)
recode= rows[i].trade_type+rows[i].opposing_account+rows[i].opposing_name;
if(i>0){
recodeThan=rows[i].trade_type+rows[i].opposing_account+rows[i].opposing_name;
if(recode!=recodeThan){
flag=false;
break;
}
}
if (i > 0) {
ids += ',';
}
ids += rows[i].id;
//注意:**********
in_amount_sum+=rows[i].in_amount==undefined||rows[i].in_amount==''?0:rows[i].in_amount;
out_amount_sum+=rows[i].out_amount==undefined||rows[i].out_amount==''?0:rows[i].out_amount;
}
console.log("rows[0].in_amount:"+rows[0].in_amount);
console.log("in_amount_sum:"+in_amount_sum);
console.log("rows[0].out_amount:"+rows[0].out_amount);
console.log("out_amount_sum:"+out_amount_sum);
console.log("ids:"+ids);
if(rows[0].in_amount!=undefined||rows[0].in_amount!=null){
money=in_amount_sum;
trade_type='0';
}
if(rows[0].out_amount!=undefined||rows[0].out_amount!=null){
money=out_amount_sum;
trade_type='1';
} if(!flag){
bootbox.alert("你所选择的数据不一致不可做合并操作")
flag=true;
return;
} editVirtualData();
privateGetBaseArgs(1);
$('select[name="type2_id"]').empty().append('<option value="">分类2</option>').val('');
var $dialog=$('#Excel_insertorupdate_dialog');
console.log('rows[0].in_date:'+rows[0].in_date)
$('input[name="trade_date"]').val(rows[0].in_date);
$('input[name="trade_type"][value="' + trade_type + '"]').attr('checked', true);
$('input[name="opposing_name"]').val(rows[0].opposing_name);
$('input[name="opposing_account"]').val(rows[0].opposing_account);
$('input[name="trade_amount"]').val(money);
$('input[name="virtual_import_id"]').val(ids);
console.log($dialog.html())
}); function privateGetBaseArgs(type,type1, outAccountVal) {
send({}, "/finance/CashAccount/getBaseArgs", function (res) {
if (res.code == 1) {
let accountClassify = res.accountClassify;
let $type1 = $('select[name="type1_id"]');
$type1.empty().append(' <option value="">分类1</option>');
for (let i = 0; i < accountClassify.length; i++) {
if(type1!=undefined&&type1==accountClassify[i].id){
let selected = 'selected="selected"';
$type1.append('<option '+selected+' value="' + accountClassify[i].id + '" >' + accountClassify[i].classify_name + '</option> ');
}else
$type1.append('<option value="' + accountClassify[i].id + '" >' + accountClassify[i].classify_name + '</option> ');
}
if (type == 1) {
$('select[name="type1_id"]').val(''); } subClassify = res.accountSubClassify; }
if (res.code == 0) {
bootbox.alert(res.msg);
}
}) }
function editVirtualData(){
insertorupdate_bootbox = bootbox.dialog({
message: $('#Excel_insertorupdate_dialog').html(),
title: '编辑',
buttons: {
cancel : {
label : '取消',
className : 'btn btn-default'
},
OK : {
label : '确定',
className : 'btn btn-primary',
callback : function() { if($.trim(insertorupdate_bootbox.find('input[name="bill_code"]').val())==''||insertorupdate_bootbox.find('input[name="bill_code"]').val()==undefined){
bootbox.alert('票据号不能为空');
return false;
}
if ($.trim(insertorupdate_bootbox.find('select[name="type1_id"]').val())==''){
bootbox.alert('分类1不能为空');
return false;
} if ($.trim(insertorupdate_bootbox.find('select[name="type2_id"]').val())==''){
bootbox.alert('分类2不能为空');
return false;
} if($.trim(insertorupdate_bootbox.find('input[name="abstract"]').val())==''||$.trim(insertorupdate_bootbox.find('input[name="abstract"]').val())==undefined){
bootbox.alert('摘要不能为空');
return false;
} if($.trim(insertorupdate_bootbox.find('input[name="trade_date"]').val())==''||$.trim(insertorupdate_bootbox.find('input[name="trade_date"]').val())==undefined){
bootbox.alert('日期不能为空');
return false;
} let trade_amount=$.trim(insertorupdate_bootbox.find('input[name="trade_amount"]').val());
if(trade_amount==''||trade_amount==undefined){
bootbox.alert('金额不能为空');
return false;
}
let trade_amountRegx = /^[0-9]+(.[0-9]{1,2})?$/; if (!trade_amountRegx.test(trade_amount)) {
bootbox.alert('转款金额必须是数字(或包含两位小数)')
return false;
} let obj={};
obj.ids=insertorupdate_bootbox.find('input[name="virtual_import_id"]').val();
obj.virtual_id=$('input[name="virtual_id"]').val();
obj.bill_code=insertorupdate_bootbox.find('input[name="bill_code"]').val();
obj.type1_id=insertorupdate_bootbox.find('select[name="type1_id"]').val();
obj.type2_id=insertorupdate_bootbox.find('select[name="type2_id"]').val();
obj.abstract=insertorupdate_bootbox.find('input[name="abstract"]').val();
obj.trade_date=insertorupdate_bootbox.find('input[name="trade_date"]').val();
obj.trade_type=insertorupdate_bootbox.find('input[name="trade_type"]:checked').val();
obj.account_id=insertorupdate_bootbox.find('input[name="account_id"]').val();
obj.opposing_account=insertorupdate_bootbox.find('input[name="opposing_account"]').val();
obj.opposing_name=insertorupdate_bootbox.find('input[name="opposing_name"]').val();
obj.trade_amount=insertorupdate_bootbox.find('input[name="trade_amount"]').val();
console.log(JSON.stringify(obj));
send(obj,"/finance/virtualAccounts/insertVirtualAccountDetail",function (res) {
if(res.code==1){ bootbox.alert(res.msg,function () {
$("#virtualExceldatatable").bootstrapTable('refresh');
//$('#Excel_insertorupdate_dialog').resetForm(); });
}
if(res.code==2){
bootbox.alert(res.msg);
} })
}
} }
}); } function getSubClassify(obj){
var valClass=$(obj).val();
if(valClass==''){
return
}
console.log("分类1的id:"+valClass);
send({virtual_id:valClass},"/finance/virtualAccounts/getSubClassify",function (res) {
if(res.code==1){
$('select[name="type2_id"]').empty().append('<option value="">分类2</option>');
var subClassify=res.result;
var subClass=null;
for(let j=0;j<subClassify.length;j++){
subClass=subClassify[j];
$('select[name="type2_id"]').append('<option value="'+subClass.id+'">'+subClass.classify_name+'</option>') }
}
if(res.code==0){
bootbox.alert(res.msg);
}
}) } $('.btn-del').click(function(){ bootbox.confirm('确定要删除数据吗?', function(flag){
if (flag) {
var rows = $("#virtualExceldatatable").bootstrapTable('getSelections');
let ids = '';
$(rows).each(function(i){
if (i > 0) {
ids += ',';
}
ids += this.id;
});
if (ids == '') {
bootbox.alert('请选择要删除的数据');
return;
}
send({"ids":ids},'/finance/virtualAccounts/delExcelData',function (res) {
if(res.code==1){
searchs();
}
bootbox.alert(res.msg);
})
}
});
}) $('.btn-search').click(function () {
$("#virtualExceldatatable").bootstrapTable('destroy');
searchs();
})
searchs(); $('#btnSearch').click(function () {
searchs();
})
function searchs() {
console.log("virtual_id:" + $('input[name="virtual_id"]').val())
$("#virtualExceldatatable")
.bootstrapTable('destroy')
.bootstrapTable({
url: '/finance/virtualAccounts/findExcelDetail',
method: "post",
contentType: "application/x-www-form-urlencoded",
toolbar: '#toolbar',
//search : true,
sortable: true,
/* showColumns : true, */
showRefresh: false,
showExport: false,
showColumns: false,
showToggle: false,
buttonsAlign: "right",
toolbarAlign: "left",
striped: true,
pagination: true,
uniqueId: "id",
pageNumber: 1,
pageSize: 10,
pageList: [10, 15, 20],
sidePagination: "server",
queryParams: function (param) {
var params = {
curpage: param.offset / param.limit + 1,
pageSize: param.limit,
// sort : param.sort,
// order : param.order,
virtual_id: $('input[name="virtual_id"]').val(),
trade_type:$.trim($('input[name="trade_type_alias"]').val()),
opposing_account:$.trim($('input[name="opposing_account_alias"]').val()),
opposing_name:$.trim($('input[name="opposing_name_alias"]').val()),
s_trade_type:$('#s_trade_type').val(),
s_opposing_account:$('#s_opposing_account').val(),
s_opposing_name:$('#s_opposing_name').val(),
s_product_name:$('#s_product_name').val(), };
return params;
},//参数
queryParamsType: 'limit',
//clickToSelect : true,
columns: [{
checkbox: true
}, {
title: '序号',
align: 'center',
formatter: function (value, row, index) {
return index + 1;
}
}, {
field: 'in_date',
title: '入账时间',
align: 'center',
sortable: false
}, {
field: 'alipay_trade_no',
title: '支付宝交易号',
align: 'center',
sortable: false
}, {
field: 'trade_type',
title: '账务类型',
align: 'center',
sortable: false
}, {
field: 'in_amount',
title: '收入(+元)',
align: 'center',
sortable: false
}, {
field: 'out_amount',
title: '支出(-元)',
align: 'center',
sortable: false
}, {
field: 'balance',
title: '账户余额(元)',
align: 'center',
sortable: false
}, {
field: 'opposing_account',
title: '对方账户',
align: 'center',
sortable: false
}, {
field: 'opposing_name',
title: '对方名称',
align: 'center',
sortable: false
}, {
field: 'product_name',
title: '商品名称',
align: 'center',
sortable: false
}, {
field: 'remarks',
title: '备注',
align: 'center',
sortable: false
}, {
field: '',
title: '操作',
align: 'center',
formatter: function (value, row, index) {
var edit = "";
<#if permissions ? seq_contains('editVirtualAccountExcel') >
edit = '<button class="btn btn-primary btn-sm btn-edit">'
+ '<i class="fa fa-edit"></i> 编辑'
+ '</button>\r'
</#if>
return edit; },
events: {
'click .btn-edit': function (e, value, row, index) {
// window.location.herf = '/finance/virtualAccounts/importExcelDetail?virtual_id=' + row.id;
editVirtualData();
privateGetBaseArgs(1);
$('select[name="type2_id"]').empty().append('<option value="">分类2</option>').val('');
let trade_type='';
let money=0;
if(row.in_amount!=undefined||row.in_amount!=null){
money=row.in_amount;
trade_type='0';
}
if(row.out_amount!=undefined||row.out_amount!=null){
money=row.out_amount;
trade_type='1';
} $('input[name="trade_date"]').val(row.in_date);
$('input[name="trade_type"][value="' + trade_type + '"]').attr('checked', true);
$('input[name="opposing_name"]').val(row.opposing_name);
$('input[name="opposing_account"]').val(row.opposing_account);
$('input[name="trade_amount"]').val(money);
$('input[name="virtual_import_id"]').val(row.id);
} }
}],
responseHandler: function (res) {
if (res == '302') {
location.herf ="/login";
return
}
res.rows = res.result.records;
res.total = res.result.total;
return res;
}
});
}
</script>
  @RequestMapping("/findExcelDetail")
public Map<String, Object> queryimportExcel(HttpServletRequest request, String s_trade_type, String s_opposing_account, String s_opposing_name, String s_product_name) {
Map<String, Object> result = new HashMap<>();
try {
Map<String, String> reqmap = ConvertVal.mapv2str(request.getParameterMap());
int curpage = MapUtils.getIntValue(reqmap, "curpage", 1);
int pageSize = MapUtils.getIntValue(reqmap, "pageSize", 10);
reqmap.put("trade_type",s_trade_type);
reqmap.put("opposing_account",s_opposing_account);
reqmap.put("opposing_name",s_opposing_name);
reqmap.put("product_name",s_product_name);
logger.info("search virtualAccountExcel params:" + reqmap);
Page<Map<String, Object>> page = getPage(curpage, pageSize); Page<Map<String, Object>> pageData = virtualAccountsService.queryimportExcel(page, reqmap);
logger.info("search virtualAccountExcel rusult:" + pageData.getRecords());
result.put("result", pageData);
result.put("msg", "");
} catch (Exception e) {
e.printStackTrace();
logger.error("search virtualAccountExcel exception:" + e.getMessage());
result.put("msg", "查询失败");
} finally {
return result;
}
  <select id="findByVirtualId" parameterType="map" resultType="map">
SELECT
id,virtual_id, date_format(in_date,'%Y-%m-%d %H:%m:%s')
in_date,alipay_trade_no,trade_type,in_amount,out_amount,balance,opposing_account,
opposing_name,product_name,remarks,creator,create_time,modifier,modify_time,del_flag
FROM
virtual_import_detail
<where>
del_flag='0'
<if test="virtual_id !='' and virtual_id !=null">
AND virtual_id=#{virtual_id} </if>
<if test="trade_type !='' and trade_type !=null">
AND trade_type LIKE concat('%',#{trade_type},'%')
</if>
<if test="opposing_account !='' and opposing_account !=null">
AND opposing_account LIKE concat('%',#{opposing_account},'%')
</if>
<if test="opposing_name !='' and opposing_name !=null">
AND opposing_name LIKE concat('%',#{opposing_name},'%')
</if>
<if test="product_name !='' and product_name !=null">
AND product_name LIKE concat('%',#{product_name},'%')
</if>
</where>
ORDER BY create_time DESC </select>
05-28 11:34