bootstrapTable 应用小例(收索)
<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>