时间戳

首页 > 解决方案 > 如何在 Html 的服务器端分页期间保存检查列表值？

javascript - 如何在 Html 的服务器端分页期间保存检查列表值？

问题描述

我有一个 html 表

<div class="modal-footer">
    <span class="spanTotalRecord">Total no. of records: {{(itemsPerPage * currentPage) - 99}} - {{itemsPerPage * currentPage}} of {{totalItems}}</span>
    <ul uib-pagination class="pagination-sm" total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" boundary-link-numbers="true" rotate="false" max-size="maxSize" ng-change="pageChanged(currentPage)" style="margin:0;"></ul>
</div>

<div class="clearfix" id="lineItemTable">
    <table class="table sub-table table-contract-module">
        <thead>
            <tr>
                <th style="text-align: center; width: 4em;">
                    <md-checkbox class="md-warn" id="masterCheckbox" title="Select All" ng-model="vm.checkAllLineItemsChecked" ng-click="toggleLineItemSelectAll(vm.checkAllLineItemsChecked)"
                                 style="position: relative; top: 2px;" ng-disabled="vm.ContractLineItemList.length <= 0"></md-checkbox>
                </th>
                <th style="width: 4em">Serial No.</th>
                <th style="width: 4em;">Line #</th>

            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="cli in vm.ContractLineItemList track by $index " data-id="{{cli.LineNumber}}">
                <td style="text-align: center;">
                    <md-checkbox class="md-warn" id="CheckSelect" name="Check" ng-model="cli.selected" ng-change="onCheckBoxLineItemClick()"
                                 style="position: relative; top: 2px;"></md-checkbox>
                </td>
                <td>{{cli.rowNumber}}</td>
                <td>
                    <a href="" class="visited" ng-click="vm.ShowLineItemInNewTab(cli.ContractNumber, cli.LineNumber, cli.LineItemStyle, true, $event, cli.LineItemType, vm.ContractEdit.TimeUnit)">L{{cli.LineNumber}}</a>
                </td>
            </tr>
        </tfoot>
    </table>
 </div>

它的angularjs函数是：

$scope.currentPage = 1;
$scope.maxSize = 5;
$scope.itemsPerPage = 100;



function lineitems(ContractNumber,pageSize,pageNo) {
    vm.MediaLineItem.pageSize = pageSize;
    vm.MediaLineItem.pageNo = pageNo;
    vm.MediaLineItem.ContractNumber = ContractNumber;
    contractService.GetAllMediaLineItems(vm.MediaLineItem).then(function (response) {
        vm.ContractLineItemList = [];
        $scope.totalItems = response[0].totalCount;
        vm.ContractLineItemList = response;

        }
    }, function (err) {
    });
}

因为我使用了服务器端分页，它在页面被点击后加载 100 个数据。使用分页时，复选框出现问题。当我选中第一页中的某个复选框并再次移至下一页时，请返回第一页，我已选中的复选框再次未选中。有没有办法解决这个问题？

//Toggle Line Item Select All

vm.SelectedLineItems = [];

$scope.toggleLineItemSelectAll = function (checkVal) {
    var toggleStatus = !checkVal;
    angular.forEach(vm.ContractLineItemList, function (item) {
        item.selected = toggleStatus;
        if (toggleStatus) {
            vm.SelectedLineItems.push(item.LineNumber);
        } else {
            vm.SelectedLineItems = [];
        }
    });
}


$scope.onCheckBoxLineItemClick = function () {
    vm.SelectedLineItems = [];
    vm.checkAllLineItemsChecked = vm.ContractLineItemList.every(function (item) { return item.selected });
    vm.ContractLineItemList.forEach(function (item) {
        if (item.selected) {
            vm.SelectedLineItems.push(item.LineNumber);
        } else {
            var idx = vm.SelectedLineItems.indexOf(item.LineNumber);
            if (idx > -1) {
                vm.SelectedLineItems.splice(idx, 1);
            }
        }
    });
}



$scope.pageChanged = function (currPage) {
    lineitems(vm.ContractEdit.ContractNumber, 100, currPage);
}

标签： javascripthtmlangularjs

解决方案

service您可以使用 setter 和 getter保存您的清单值。您的服务将如下所示：

angular.module('app').service('checkedList', function(){
   var checkList = [];
   this.setcheckList = function(values) {
         checkList = values;
     };

     this.getcheckList = function() {
         return checkList;
     };
});

另一种方法是通过运行以下命令$localStorage注入来使用ngStorage

npm install ngstorage

这是完整的文档https://github.com/gsklee/ngStorage。您的代码将如下所示：

angular.module('app', [
    'ngStorage'
]).controller('Ctrl', function(
    $scope,
    $localStorage
){
  $localStorage.checkList = $scope.SelectedLineItems;
});

希望能帮助到你！

推荐阅读