BootDo框架中的js之复选框多页面回显

最新推荐文章于 2024-02-02 10:25:39 发布

是金子早晚要花光

最新推荐文章于 2024-02-02 10:25:39 发布

阅读量636

点赞数

分类专栏： springboot js

本文链接：https://blog.csdn.net/shunzi1046/article/details/80682855

版权

springboot 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

Html页面

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
    #searchName{width: 80%;display: inline-block;}
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <input id="customId" name="customId" th:value="${customId}" type="hidden">
    <input id="idStr" name="idStr" th:value="${idStr}" type="hidden">
    <div class="col-sm-11">
        <div class="ibox">
            <div class="ibox-body">
                <div class="fixed-table-toolbar">
                    <table class="table " border="0px " style="white-space:nowrap; overflow:hidden;width:100%">
                        <tr>
                            <td>
                                <button type="button"
                                        class="btn  btn-primary" onclick="allocateRelation()">
                                    <i class="fa fa-plus hidden" aria-hidden="true"></i>建立关系
                                </button>
                            </td>
                            <td style="float: right;text-align: right;">
                                <input id="searchName" type="text" class="form-control"
                                       placeholder="姓名">
                                <button class="btn btn-success" style="float: right;" onclick="reLoad()" style="margin-bottom: 5px;">查询</button>
                            </td>
                        </tr>
                    </table>
                </div>
                <table id="exampleTable" data-mobile-responsive="true">
                </table>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/appjs/custom/addRelation.js">
</script>
</body>
</html>

js页面：


$().ready(function () {
    load();
});

var overAllIds = new Array();  //1.定义一个全局数组

function load() {
    var $table;

    var idsStr = $('#idStr').val();//后台传来的字符串
    var idsStrArr = idsStr.split(",");//分割成字符串数组
    idsStrArr.forEach(function (data, index, arr) {//把字符串放到全局数组里面
        this.overAllIds.push(+data);
    });

    $table = $('#exampleTable')
        .bootstrapTable(
            {
                method: 'get', // 服务器数据的请求方式 get or post
                url: "/custom/customRelation/addRelationship", // 服务器数据的加载地址
                // showRefresh : true,
                // showToggle : true,
                // showColumns : true,
                clickToSelect: true, // 单击行即可以选中
                iconSize: 'outline',
                toolbar: '#exampleToolbar',
                striped: true, // 设置为true会有隔行变色效果
                dataType: "json", // 服务器返回的数据类型
                pagination: true, // 设置为true会在底部显示分页条
                // queryParamsType : "limit",
                // //设置为limit则  会发送符合RESTFull格式的参数
                singleSelect: false, // 设置为true将禁止多选
                // contentType : "application/x-www-form-urlencoded",
                // //发送到服务器的数据编码类型
                pageSize: 10, // 如果设置了分页，每页数据条数
                pageList: [10, 20, 50],//设置页数可变
                pageNumber: 1, // 如果设置了分布，首页页码
                // search : true, // 是否显示搜索框
                showColumns: false, // 是否显示内容下拉框（选择显示的列）
                sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者"server"
                queryParams: function (params) {
                    return {
                        // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                        pageSize: params.pageSize,
                        pageNumber: params.pageNumber,
                        customName: $('#searchName').val()
                    };
                },
                // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                // queryParamsType = 'limit' ,返回参数必须包含
                queryParamsType: '',//返回参数必须包含
                // limit, offset, search, sort, order 否则, 需要包含:
                // pageSize, pageNumber, searchText, sortName,
                // sortOrder.
                // 返回false将会终止请求
                columns: [
                    {
                        field: 'checked',
                        checkbox: true,// 显示复选框
                        // formatter: stateFormatter 
                        //2.设置回显
                        formatter: function (i, row) {// 每次加载 checkbox 时判断当前页 row 的 id 是否已经存在全局 数组[]id 里
                            //初始化加载 row先显示第一页数据(10条)  当点击第二页的时候又追加(20条)
                            if ($.inArray(row.customId, overAllIds) != -1) {// 因为 判断数组里有没有这个 id  没有找到返回-1
                                return {
                                    checked: true               // 存在则选中
                                }
                            }
                        }
                    },
                    {
                        field: 'customId', // 列字段名
                        title: '序号' // 列标题
                    },
                    {
                        field: 'customName',
                        title: '姓名',
                        align: 'center'
                    },
                    {
                        field: 'customType',
                        title: '类型',
                        align: 'center',
                        formatter: function (value, row, index) {
                            if (value == '1') {
                                return '个人';
                            } else if (value == '2') {
                                return '企业';
                            }
                        }
                    }]
            });
    //3.执行将回显设置进入全局数组
    $('#exampleTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table', function (e, rows) {
        var datas = $.isArray(rows) ? rows : [rows];// 点击时获取选中的行或取消选中的行
        examine(e.type, datas);  // 保存到全局 Array() 里
    });
    function examine(type, datas) {
        if (type.indexOf('uncheck') == -1) {
            $.each(datas, function (i, v) {
                // 添加时，判断一行或多行的 id 是否已经在数组里 不存则添加　
                overAllIds.indexOf(v.customId) == -1 ? overAllIds.push(v.customId) : -1;
            });
        } else {
            $.each(datas, function (i, v) {
                overAllIds.splice(overAllIds.indexOf(v.customId), 1);//删除取消选中行
            });
        }
    }
}

是金子早晚要花光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootDo框架中的js之复选框多页面回显

Html页面&lt;!DOCTYPE html&gt;&lt;html xmlns:th="http://www.w3.org/1999/xhtml"&gt;&lt;meta charset="utf-8"&gt;&lt;head th:include="include :: header"&gt;&lt;/head&gt;&lt;style&a
复制链接

扫一扫