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>
'
                                    </#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>