angular smart-table組件如何定製化之初步研究

時間 2019-11-29

標籤 angular smart table 組件如何定製初步研究欄目 AngularJS 简体版

原文原文鏈接

table表運用在後臺管理用得頻繁，通常bootstrap的class="table"就能知足樣式需求以及分頁需求，可是每一個產品經理需求不同，好比說分頁：bootstrap分頁實現是這樣子的html

但原型要求這樣子的git

被推薦angular相關table組件smart-table算是功能至關全的，學習官網地址http://lorenzofox3.github.io/smart-table-website/#section-introgithub

看了一下，上手能夠，可是要深刻了解內容較難。調研smart-table主要是爲了進一步在工做中完善以前的table表不足之處。好比涉及功能包括排序、搜索、分頁、選中等等。web

下面做爲angular新手如何整合了smart-table和自定義的分頁，固然，提高優化空間至關大！bootstrap

實現的效果頁：promise

首先下載smart-table，我用的bower: bower install angular-smart-table --save-devapp

在index中引入相關文件，下面是個人index中引入的一些文件：dom

<!--angular文件-->
<script src="bower_components/angular/angular.js"></script>
<!--ui-route配置路由庫文件-->
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!--支持angular的動畫庫文件-->
<script src="bower_components/angular-animate/angular-animate.js"></script>
<!--smart-table庫文件-->
<script src="bower_components/angular-smart-table/dist/smart-table.js"></script>
<!--按需加載庫文件-->
<script src="bower_components/oclazyload/dist/ocLazyLoad.js"></script>
<!--支持angular的bootstrap庫文件-->
<script src="src/js/ui-bootstrap-tpls.min.js"></script>
<!--bootstrap注入主應用文件-->
<script src="bootstrap.js"></script>
<!--smart-table測試功能文件夾的路由配置-->
<script src="smartTableTest/smartTable.route..js"></script>
<!--控制輸入框數值directive-->
<script src="common/directive/my-max-number.js"></script>
<!--smart-table官網提供的示例directive，增長複選框按鈕-->
<script src="common/directive/custom-select.js"></script>

smart-table.view.html函數

<table class="table" st-pipe="callServer" st-table="displayed">
    <thead>
    <tr>
        <th></th>
        <th st-sort="id">id</th>
        <th st-sort="name">name</th>
        <th st-sort="age">age</th>
        <th st-sort="saved">saved</th>
    </tr>
    <tr>
        <th></th>
        <th><input st-search="id" /></th>
        <th><input st-search="name" /></th>
        <th><input st-search="age" /></th>
        <th><input st-select="saved" /></th>
    </tr>
    </thead>
    <tbody ng-show="!isLoading">
    <tr ng-repeat="row in displayed">
        <td cs-select="row"></td>
        <td>{{row.id}}</td>
        <td>{{row.name}}</td>
        <td>{{row.age}}</td>
        <td>{{row.saved}}</td>
    </tr>
    </tbody>
    <tbody ng-show="isLoading">
    <tr>
        <td colspan="4" class="text-center">Loading...</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4" class="text-center">
            <div st-pagination="" st-items-by-page="tableState.pagination.number" st-displayed-pages="7" st-template="common/template/pagination.html"></div>
        </td>
    </tr>
    </tfoot>
</table>

template中的pagination.html代碼：學習

<form class="pagination-define">
    <select ng-model="$parent.tableState.pagination.number" ng-options="item as item for item in $parent.itemsOptions" ng-change="$parent.getData($parent.tableState.pagination.currentPage)">
        <option value="">--請選擇--</option>
    </select>
    <uib-pagination total-items="$parent.tableState.pagination.totalItemCount" items-per-page="$parent.tableState.pagination.number" ng-model="$parent.tableState.pagination.currentPage" ng-change="$parent.getData($parent.tableState.pagination.currentPage)" max-size="$parent.tableState.pagination.totalItemCount/$parent.tableState.pagination.number" class="pagination-sm" boundary-link-numbers="true" boundary-links="true" rotate="false" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></uib-pagination>
    <input type="text" ng-model="$parent.tableState.pagination.inputCurPage" min=1 my-max-number ="{{$parent.tableState.pagination.totalItemCount/$parent.tableState.pagination.number}}" current-page="{{$parent.tableState.pagination.currentPage}}">
    <button class="btn btn-info" ng-click="$parent.getData($parent.tableState.pagination.inputCurPage)" ng-disabled="!$parent.tableState.pagination.inputCurPage||$parent.tableState.pagination.inputCurPage==''">Go</button>
</form>

smartTable.controller.js代碼：

angular.module("smartTableApp")
    .controller("smartTableTestCtrl", ['$scope', '$filter', 'SmartTableTestServ', function($scope, $filter, SmartTableTestServ) {
        //動態顯示條數
        $scope.itemsOptions = [5,10,20];
        //smart-table配置變量
        $scope.displayed = [];
        $scope.callServer = function callServer(tableState) {
            $scope.tableState = tableState; //tableState對象中包含sort排序信息以及search搜索信息
            $scope.getData(1);
        };
        $scope.getData = function(pageNo) {
            console.log("getData exe");
            var pagination = $scope.tableState.pagination;
            var start = pagination.start || 0;     //從第幾條數據開始查詢，默認0條
            var number = pagination.number || 10;   //每頁顯示條數
            pagination.currentPage = pagination.inputCurPage = pageNo;
            $scope.isLoading = true;    //控制數據加載狀態
            //數據獲取函數
            SmartTableTestServ.getPage(start, number, $scope.tableState).then(function(result) {
                console.log(result);
                $scope.displayed = result.data;
                pagination.totalItemCount = result.totalItems;  //設置數據總條數
                pagination.maxSize = pagination.totalItemCount/pagination.number; //一共有多少頁
                $scope.isLoading = false;
                console.log("tableState信息：",$scope.tableState);
            });
        }
    }]);

對分頁輸入框中directive控制my-max-number.js代碼

myApp
    //控制頁碼跳轉框
    .directive('myMaxNumber', ['$timeout', function ($timeout) {
        return {
            restrict: 'EA',
            require: 'ngModel',
            scope: {
                maxNumber: '@myMaxNumber',
                currentPage: '@currentPage'
            },
            link: function (scope, element, attr, ctrl) {
                ctrl.$parsers.push(function (viewValue) {
                    var maxNumber = parseInt(scope.maxNumber, 10);
                    var curNumber = scope.currentPage; //當前頁數
                    var transformedInput = viewValue.replace(/[^0-9]/g, '');
                    if (transformedInput !== viewValue||parseInt(transformedInput,10)<1||parseInt(transformedInput,10)>maxNumber) {
                        ctrl.$setViewValue(curNumber);
                        ctrl.$render();
                        return curNumber;
                    }
                    return viewValue;
                });
            }
        };
    }]);

官網提供的複選框directive

myApp
    .directive('csSelect', function () {
        return {
            require: '^stTable',
            template: '<input type="checkbox"/>',
            scope: {
                row: '=csSelect'
            },
            link: function (scope, element, attr, ctrl) {

                element.bind('change', function (evt) {
                    scope.$apply(function () {
                        ctrl.select(scope.row, 'multiple');
                    });
                });

                scope.$watch('row.isSelected', function (newValue, oldValue) {
                    if (newValue === true) {
                        element.parent().addClass('st-selected');
                    } else {
                        element.parent().removeClass('st-selected');
                    }
                });
            }
        };
    });

沿用了官網提供的service

angular.module("smartTableApp")
    .service ('SmartTableTestServ', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout) {
        //this would be the service to call your server, a standard bridge between your model an $http

        // the database (normally on your server)
        var randomsItems = [];

        function createRandomItem(id) {
            var heroes = ['Batman', 'Superman', 'Robin', 'Thor', 'Hulk', 'Niki Larson', 'Stark', 'Bob Leponge'];
            return {
                id: id,
                name: heroes[Math.floor(Math.random() * 7)],
                age: Math.floor(Math.random() * 1000),
                saved: Math.floor(Math.random() * 10000)
            };

        }

        for (var i = 0; i < 100; i++) {
            randomsItems.push(createRandomItem(i));
        }

        //fake call to the server, normally this service would serialize table state to send it to the server (with query parameters for example) and parse the response
        //in our case, it actually performs the logic which would happened in the server
        function getPage(start, number, params) {

            var deferred = $q.defer();

            var filtered = params.search.predicateObject ? $filter('filter')(randomsItems, params.search.predicateObject) : randomsItems;

            if (params.sort.predicate) {
                filtered = $filter('orderBy')(filtered, params.sort.predicate, params.sort.reverse);
            }

            var result = filtered.slice(start, start + number);

            $timeout(function () {
                //note, the server passes the information about the data set size
                deferred.resolve({
                    data: result,
                    totalItems: filtered.length,
                    numberOfPages: Math.ceil(filtered.length / number)
                });
            }, 1500);


            return deferred.promise;
        }

    return {
            getPage: getPage
        }
    }]);