BootStarp 实现勾选字段,分页记住并回显

第一页数据勾选两条

 //定义两个数组 用于存id和name name作为回显 id存入数据库
 var overAllIds = [];
 var overAllNames = [];
 
 $(function () {
		//获取上一个页面(父页面)的id值 放入数组 用于回显
        if (!$.common.isEmpty(parent.getfields())) {
            overAllIds = parent.getfields().split(',');
        }
		//获取上一个页面(父页面)的name值 放入数组 用于回显
        if (!$.common.isEmpty(parent.getfieldNames())) {
            overAllNames = parent.getfieldNames().split(',');
        }


        var options = {
            url: prefix + "/list",
            clickToSelect: true,
            //记住选项 用于分页记住功能
            rememberSelected: true,
            columns: [{
                checkbox: true,
                formatter: function (i, row) {          
                  // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
                    if ($.inArray(row.bid, Array.from(overAllIds)) !== -1) {  
                      // 因为 Set是集合,需要先转换成数组
                        return {
                            checked: true         // 存在则选中
                        }
                    }

                }
            },
                {
                    field: 'bid',
                    title: 'bid',
                },
                {
                    field: 'name',
                    title: '字段名称',
                }
             ]
        };
        $.table.init(options);

        $('#bootstrap-table').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table', function (e, rows) {
       		 // 点击时获取选中的行或取消选中的行
            var datas = $.isArray(rows) ? rows : [rows];        
            // 保存到全局 Array() 里
            examine(e.type, datas);                              
        });

    });


 function examine(type, datas) {
 		//选中值
        if (type.indexOf('uncheck') === -1) {
            $.each(datas, function (i, v) {
                // 添加时,判断一行或多行的 id 是否已经在数组里 不存则添加 
                overAllIds.indexOf(v.bid) === -1 ? overAllIds.push(v.bid) : -1;
                // 添加时,判断一行或多行的 id 是否已经在数组里 不存则添加 
                overAllNames.indexOf(v.name) === -1 ? overAllNames.push(v.name) : -1;

            });
        } 
		//取消勾选
		else {
            $.each(datas, function (i, v) {
                overAllIds.splice(overAllIds.indexOf(v.bid), 1);   		//删除取消选中行
                overAllNames.splice(overAllNames.indexOf(v.name), 1);   //删除取消选中行
            });
        }
    }

  //子页面 提交 将父页面的id和name进行赋值
  function submitHandler() {
        parent.$("#field").val(Array.from(overAllIds));
        parent.$("#fieldNames").val(Array.from(overAllNames));
        var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
    }
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Bootstrap本身并不提供连接数据库的功能,但是可以使用一些其他的工具和技术来实现连接数据库并实现分页功能。以下是一些常用的方法: 1. 使用服务器端脚本语言如PHP、Node.js等连接数据库,查询数据并生成分页HTML代码。然后将生成的HTML代码嵌入到Bootstrap页面中。例如,使用PHP和MySQL实现分页: ```php <?php // 连接MySQL数据库 $mysqli = new mysqli("localhost", "username", "password", "database"); // 查询数据 $result = $mysqli->query("SELECT COUNT(*) FROM mytable"); $row = $result->fetch_assoc(); $total = $row['COUNT(*)']; // 数据总数 $pagesize = 10; // 每页显示的记录数 $pagecount = ceil($total / $pagesize); // 总页数 if (!isset($_GET['page'])) { $page = 1; } else { $page = intval($_GET['page']); } $start = ($page - 1) * $pagesize; // 当前页的起始记录 $result = $mysqli->query("SELECT * FROM mytable LIMIT $start, $pagesize"); // 生成分页HTML代码 $html = '<ul class="pagination">'; if ($page > 1) { $html .= '<li class="page-item"><a class="page-link" href="?page='.($page-1).'">上一页</a></li>'; } else { $html .= '<li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>'; } for ($i = 1; $i <= $pagecount; $i++) { if ($i == $page) { $html .= '<li class="page-item active"><a class="page-link" href="#">'.$i.'</a></li>'; } else { $html .= '<li class="page-item"><a class="page-link" href="?page='.$i.'">'.$i.'</a></li>'; } } if ($page < $pagecount) { $html .= '<li class="page-item"><a class="page-link" href="?page='.($page+1).'">下一页</a></li>'; } else { $html .= '<li class="page-item disabled"><a class="page-link" href="#">下一页</a></li>'; } $html .= '</ul>'; // 输出表格和分页 echo '<table class="table">'; echo '<thead><tr><th>ID</th><th>Name</th></tr></thead>'; echo '<tbody>'; while ($row = $result->fetch_assoc()) { echo '<tr><td>'.$row['id'].'</td><td>'.$row['name'].'</td></tr>'; } echo '</tbody>'; echo '</table>'; echo $html; // 关闭数据库连接 $mysqli->close(); ?> ``` 2. 使用JavaScript框架如AngularJS、React等连接数据库并生成分页HTML代码。这种方法通常需要编写一些JavaScript代码、HTML模板和服务器端API接口来实现。例如,使用AngularJS和Node.js实现分页: ```html <div ng-app="myApp" ng-controller="myCtrl"> <table class="table"> <thead> <tr> <th>ID</th> <th>Name</th> </tr> </thead> <tbody> <tr ng-repeat="item in data"> <td>{{item.id}}</td> <td>{{item.name}}</td> </tr> </tbody> </table> <ul class="pagination"> <li ng-class="{disabled: page == 1}"><a href="#" ng-click="prev()">上一页</a></li> <li ng-class="{active: p == page}" ng-repeat="p in pages"><a href="#" ng-click="goto(p)">{{p}}</a></li> <li ng-class="{disabled: page == pageCount}"><a href="#" ng-click="next()">下一页</a></li> </ul> </div> <script src="https://cdn.bootcss.com/angular.js/1.7.5/angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $scope.pageSize = 10; $scope.pageCount = 0; $scope.page = 1; $scope.pages = []; $scope.loadData = function() { var start = ($scope.page - 1) * $scope.pageSize; $http.get('/api/data?start=' + start + '&pagesize=' + $scope.pageSize) .then(function(response) { $scope.data = response.data; }); }; $scope.loadPage = function(page) { if (page < 1 || page > $scope.pageCount) { return; } $scope.page = page; $scope.loadData(); }; $scope.prev = function() { $scope.loadPage($scope.page - 1); }; $scope.next = function() { $scope.loadPage($scope.page + 1); }; $scope.goto = function(page) { $scope.loadPage(page); }; $http.get('/api/count') .then(function(response) { $scope.pageCount = Math.ceil(response.data / $scope.pageSize); $scope.pages = []; for (var i = 1; i <= $scope.pageCount; i++) { $scope.pages.push(i); } $scope.loadData(); }); }); </script> ``` 在上面的示例中,`$http`服务用于连接Node.js服务器端API接口获取数据和总记录数。服务器端API接口可以使用Express框架编写。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值