bootstrap 后端分页 实现 按钮全选 以及表格外全选按钮

由于每次查找资料都需要耗费大量时间,于是写下此文章,方便日后查阅复用.

var zljsList = new Array();
$(function () {
    queryYjxxBegin();
    $('.form_datetime').datetimepicker({
        format: 'yyyy-mm-dd',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        showMeridian: 1,
        language: 'zh-CN'
    });
})

function queryYjxx() {
    var num = 1;
    var size = 10;
    var zxywtm = $("#xtm").val();
    var bywtm = $("#btm").val();
    var dah = $("#dah").val();
    var rkrxm = $("#rkr").val();
    var rkrqq = $("#rkrqq").val();
    var rkrqz = $("#rkrqz").val();

    //分页获取移交信息
    $("#yjxxList").bootstrapTable('destroy');
    $("#yjxxList").bootstrapTable({
        url: getSiteRootUrl() + '/ywda/ajax/service/yrkwzxxcx_queryRkxx',
        method: 'POST',// 请求方式
        striped: true,
        cache: false,
        sidePagination: "server",
        search: false,
        classes: 'table table-bordered',
        pagination: true,
        pageSize: 10,
        pageNumber: 1,
        pageList: [10, 20, 30],
        strictSearch: true,
        showColumns: false,
        showRefresh: false,
        locale: "zh-CN",
        clickToSelect: true,
        maintainSelected: true,
        // 得到查询的参数
        queryParams: function (params) {
            num = this.pageNumber;
            size = this.pageSize;
            var queryParams = {
                zxywtm: zxywtm,
                bywtm: bywtm,
                dah: dah,
                rkrxm: rkrxm,
                rkrxm: rkrxm,
                rkrqq: rkrqq,
                rkrqz: rkrqz,
                pageNum: this.pageNumber,
                pageSize: this.pageSize
            };
            return JSON.stringify(queryParams);
        },
        columns: [{
            title: '序号',
            field: 'id',
            formatter: function (value, row, index) {
                return ((num - 1) * size + index + 1);
            }
        }, {
            align: 'center',
            field: 'state',
            width: "10%",
            checkbox: true,
            formatter: function (value, row, index) {
                var uuid = row.uuid;
                if ($.inArray(uuid, zljsList) >= 0) {
                    return true;
                } else {
                    return false;
                }
            }
        },
            {
                title: '箱条码',
                field: 'zxywtm',
                align: 'center'

            }, {
                title: '包条码',
                field: 'bywtm',
                align: 'center'
            }, {
                title: '档案号',
                field: 'dah',
                align: 'center'
            }, {
                title: '入库人',
                field: 'rkrxm',
                align: 'center'
            }, {
                title: '入库时间',
                field: 'rkrq',
                align: 'center',
                formatter: function (value, row, index) {
                    if (value) {
                        return value.substring(0, 10);
                    } else {
                        return '';
                    }
                }
            }, {
                title: '入库位置',
                field: 'rkwz',
                align: 'center'
            },{
                title: 'uuid',
                field: 'uuid',
                align: 'center',
                visible:false
            }],
        onCheck: function (row) {
            zljsList.push(row.uuid);
            console.log(JSON.stringify(zljsList))

        },
        onUncheck: function (row) {
            for (var i in zljsList) {
                if (zljsList[i] == row.uuid) {
                    zljsList.splice(i, 1);
                }
            }
            console.log(JSON.stringify(zljsList))
        },
        onCheckAll: function (rows) {
            var data = queryAllYjxx();
            data = data.rows;
            for (var i in data) {
                var uuid = data[i].uuid;
                if ($.inArray(uuid, zljsList) < 0) {//和数组中的元素比对,不存在则返回-1。
                    zljsList.push(uuid);
                }
            }
            console.log(data.length + "----" + JSON.stringify(zljsList));
        },
        onUncheckAll: function (rows) {
            var data = queryAllYjxx();
            data = data.rows;
            //取消全选不能全部清空,应该把全选的元素给去除掉
            var uuids = new Array();
            for (var i in data) {
                var uuid = data[i].uuid;
                if ($.inArray(uuid, zljsList) >= 0) {
                    //要移除的元素
                    uuids.push(uuid);
                }
            }
            //存放选中的元素
            var uuidArray = new Array();
            for (var i in zljsList) {
                if ($.inArray(zljsList[i], uuids) < 0) {
                    uuidArray.push(zljsList[i]);
                }
            }
            zljsList = uuidArray;
            console.log(data.length + '====' + JSON.stringify(zljsList));
        }
    });
}

/**
 * 全选按钮,全选中当前操作人员可以进行批量操作
 */
function allSelect() {
    if ($("#allSelect").val() == '全选') {
        $("#yjxxList").bootstrapTable('checkAll');
        $("#allSelect").val("取消全选");
    } else if ($("#allSelect").val() == '取消全选') {
        $("#yjxxList").bootstrapTable('uncheckAll');
        $("#allSelect").val("全选");
    }
}

/**
 * 移交日期起校验
 */
function valicateYjrqq(val) {
    var yjrqz = $("#rkrqz").val();
    if (yjrqz == null || yjrqz == undefined || yjrqz.trim() == '') {
        return;
    }
    var zyear = yjrqz.substring(0, 4);
    var zmonth = yjrqz.substring(5, 7);
    var zday = yjrqz.substring(8, 10);
    var yjrqzint = parseInt(zyear + zmonth + zday);

    var yjrqq = $("#rkrqq").val();

    var qyear = yjrqq.substring(0, 4);
    var qmonth = yjrqq.substring(5, 7);
    var qday = yjrqq.substring(8, 10);
    var yjrqqint = parseInt(qyear + qmonth + qday);
    if (yjrqqint > yjrqzint) {
        ak_common.bootoast("入库日期起不能大于入库日期止", "danger");
        $("#rkrqq").val("");
        return;
    }
}

/**
 * 移交日期止校验
 */
function valicateYjrqz(val) {
    var yjrqq = $("#rkrqq").val();
    if (yjrqq == null || yjrqq == undefined || yjrqq.trim() == '') {
        return;
    }
    var qyear = yjrqq.substring(0, 4);
    var qmonth = yjrqq.substring(5, 7);
    var qday = yjrqq.substring(8, 10);
    var yjrqqint = parseInt(qyear + qmonth + qday);

    var yjrqz = $("#rkrqz").val();
    var zyear = yjrqz.substring(0, 4);
    var zmonth = yjrqz.substring(5, 7);
    var zday = yjrqz.substring(8, 10);
    var yjrqzint = parseInt(zyear + zmonth + zday);

    if (yjrqqint > yjrqzint) {
        ak_common.bootoast("入库日期止不能小于入库日期起", "danger");
        $("#rkrqz").val("");
        return;
    }

}

function queryAllYjxx() {
    var param = {};
    param.zxywtm = $("#xtm").val();
    param.bywtm = $("#btm").val();
    param.dah = $("#dah").val();
    param.rkrxm = $("#rkr").val();
    param.rkrqq = $("#rkrqq").val();
    param.rkrqz = $("#rkrqz").val();
    var data = jQueryAjax("yrkwzxxcx_queryAllRkxx", param);
    return data;
}

/**
 * 导出入库位置信息
 */
function exportRkxx(rows) {
    var rows = $("#yjxxList").bootstrapTable('getData');
    if(rows.length == 0 || rows == "[]" || rows == null || rows == "") {
        return ak_common.bootoast("导出列表不能为空!", "danger");
    }

    var data = {};
    var selections = $("#yjxxList").bootstrapTable('getAllSelections');

    if ($("#allSelect").val() == '取消全选') {
        var str = queryAllYjxx();
        var info  = str.rows;
        data = {
            list:JSON.stringify(info).replace(/"/g,"'")
        };

    }else if ($("#allSelect").val() == '全选') {
        if(selections.length == 0){
            return ak_common.bootoast("请至少选择一条数据!", "danger");
        }
        data = {
            list:JSON.stringify(selections).replace(/"/g,"'")
        };
    }


    ak_common.downLoadFile({
        url: getSiteRootUrl() + '/ywda/downloadExecl/exportRkxx',
        data: data
    });
}


下面是前端页面展示
bootstrap 后端分页 实现 按钮全选 以及表格外全选按钮
新手一枚,在成长的道路不断踩坑,如有不妥,欢迎指出!
生活不易,但也要长存理想!

上一篇:BLE协议分析


下一篇:分布式场景下的ID生成解决方案