ua ui-grid 的使用方法，动态翻页-CSDN博客

本文链接：https://blog.csdn.net/lybwwp/article/details/112600748

HTML

<!--条码管理-->
<div id="itemlist" class="content-area content-area-relative" style="margin: 10px;">
    <sit-property-grid sit-id="add_form" sit-layout="Horizontal" sit-type="Fluid" sit-mode="edit" sit-columns="54">
        <sit-property sit-widget="sit-text" sit-value="vm.searchParams.ReceiptNO" sit-read-only="false">收货单号:</sit-property>
        <sit-property sit-widget="sit-text" sit-value="vm.searchParams.InvLotCode" sit-read-only="false">条码:</sit-property>
        <sit-property sit-widget="sit-radio" sit-layout="horizontal" sit-value="vm.searchParams.isInvLotCode" sit-options="[{label: '已打印', value: 1}, {label: '未打印', value: 0}]"
            sit-read-only="false">
            打印状态:
        </sit-property>
        <sit-command-bar sit-type="action">
            <sit-command sit-icon="fa-search" sit-type="main" sit-name="com.siemens.customcommand.search" style="margin-top:10" sit-tooltip="搜索"
                ng-click="vm.searchButtonHandler" sit-label="搜索">
            </sit-command>
        </sit-command-bar>
    </sit-property-grid>
    <!-- 存放按钮 --> 
    <div ui-grid="vm.gridOptions" ui-grid-pinning ui-grid-auto-resize ui-grid-resize-columns ui-grid-selection ui-grid-pagination
        class="grid"></div> 
    <sit-command-bar sit-vertical-autofixed="true" sit-type="Tool" sit-label-align="right" sit-layout="vertical"> 
        <sit-command sit-icon="fa fa-barcode" sit-type="main" sit-name="com.siemens.customcommand.add" sit-tooltip="条码打印" ng-click="vm.addButtonHandler"
            sit-label="条码打印"></sit-command>
    </sit-command-bar>
</div>

JS

(function () {
    'use strict';
    angular.module('Siemens.SimaticIT.MaterialApp.BarcodeManagement').config(ListScreenRouteConfig);

    ListScreenController.$inject = ['Siemens.SimaticIT.MaterialApp.BarcodeManagement.BarcodeManagement.service',
        '$state', '$stateParams', '$rootScope', '$scope', 'common.base', 'common.services.logger.service', 'CCS.CommonApp.common.service'];
    function ListScreenController(dataService, $state, $stateParams, $rootScope, $scope, base, loggerService, commonService) {

        var self = this;
        var logger, rootstate, messageservice, backendService;
        activate();
        // Initialization function
        function activate() {
            logger = loggerService.getModuleLogger('Siemens.SimaticIT.MaterialApp.BarcodeManagement.BarcodeManagement');
            init();
            initGridOptions();
            initGridData();
        }

        function init() {
            logger.logDebug('Initializing controller.......');

            rootstate = 'home.Siemens_SimaticIT_MaterialApp_BarcodeManagement_BarcodeManagement';
            messageservice = base.widgets.messageOverlay.service;
            backendService = base.services.runtime.backendService;

            //Initialize Model Data
            self.selectedItem = null;
            self.isButtonVisible = false;
            self.viewerOptions = {};
            self.viewerData = [];

            //Expose Model Methods
            self.addButtonHandler = addButtonHandler;
            self.searchButtonHandler = searchButtonHandler;
            self.selectButtonHandler = selectButtonHandler; 
        }

        function initGridOptions() { 
            self.gridOptions = {
                fastWatch: true,
                rowHeight: 35,
                minimumColumnSize: 100,
                enableMultiSelection: false,
                enableFiltering: true,
                //基础属性
                enableSorting: true,//是否支持排序(列)
                useExternalSorting: false,//是否支持自定义的排序规则      
                enableGridMenu: false,//是否显示表格 菜单
                showGridFooter: false,//时候显示表格的footer
                enableHorizontalScrollbar: 1,//表格的水平滚动条
                enableVerticalScrollbar: 1,//表格的垂直滚动条 (两个都是 1-显示,0-不显示)
                selectionRowHeaderWidth: 30,
                enableCellEditOnFocus: false,//default为false,true的时候单击即可打开编辑(cellEdit为true的时候,需要引入'ui.grid.cellNav')
                //分页属性
                enablePagination: true, //是否分页,default为true
                enablePaginationControls: true, //使用默认的底部分页
                paginationPageSizes: [20,25,30,50,75,100], //每页显示个数选项
                paginationPageSize: 25, //每页显示个数
                paginationCurrentPage: 1, //当前的页码  
                totalItems: 0, // 总数量
                useExternalPagination: true,//是否使用分页按钮          
                //选中
                rowTemplate: "<div ng-dblclick=\"grid.appScope.onDblClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell></div>",//双击行事件
                enableFooterTotalSelected: true, // 是否显示选中的总数,default为true,如果显示,showGridFooter 必须为true
                enableFullRowSelection: true, //是否点击行任意位置后选中,default为false,当为true时,checkbox可以显示但是不可选中
                enableRowHeaderSelection: true, //是否显示选中checkbox框 ,default为true
                enableRowSelection: true, // 行选择是否可用,default为true;
                enableSelectAll: false, // 选择所有checkbox是否可用，default为true; 
                enableSelectionBatchEvent: true, //default为true
                modifierKeysToMultiSelect: false,//default为false,为true时只能按ctrl或shift键进行多选,这个时候multiSelect必须为true;
                multiSelect: false,// 是否可以选择多个,默认为true;
                noUnselect: false,//default为false,选中后是否可以取消选中         
                appScopeProvider: self,
                columnDefs: [
                    { name: "Id", displayName: '序Id', visible: false },
                    {
                        name: 'Index', displayName: '序号', enableFiltering: false, width: 75,
                        cellTemplate: '<div calss="ui-grid-cell-contents" style="padding:5px">{{rowRenderIndex+1}}</div>'
                    }, {
                        field: 'ReceiptNO',
                        displayName: '单号',
visible: false,
                        width: 200
                    }
                    , {
                        field: 'InvLotCode',
                        displayName: '条码',
visible: false,
                        width: 200
                    }, {
                        field: 'Name',
                        displayName: '料品名称',
                        width: 200
                    }, {
                        field: 'Code',
                        displayName: '料品编码',
                        width: 200
                    }, {
                        field: 'SPECS',
                        displayName: '规格',
                        width: 200
                    }, {
                        field: 'ReciveRuleName',
                        displayName: '收货原则名称',
                        width: 200
                    }, {
                        field: 'Depository_Name',
                        displayName: '仓库名称',
                        width: 200
                    },
                    , {
                        field: 'BusinessDate',
                        displayName: '制单日期',
                        width: 200
                        , type: 'date',
                        cellFilter: 'date:"yyyy-MM-dd"'
                    }, {
                        field: 'CodePrintTime',
                        displayName: '打码日期',
                        width: 200,
                        type: 'date',
                        cellFilter: 'date:"yyyy-MM-dd HH:mm:ss"'
                    }
                ],
                //---------------api---------------------
                onRegisterApi: function (gridApi) {
                    $scope.gridApi = gridApi;
                    //分页按钮事件
                    gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) { 
                        //调用查询方法
                        initGridData(); 
                    });
                    //行选中事件
                    $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row, event) {
                        if (row) {
                            if (row.isSelected) {
                                self.selectedItemDetail = row.entity;
                                //self.isButtonVisible = true;
                                console.log(self.selectedItemDetail);
                                //initGridOperationOptions();
                            } else {
                                self.selectedItemDetail = null;
                            }
                        }
                    });
                },
                data: []
            }
        }     
        //查询方法,数据绑定
        function initGridData() {
            var Pagination = {
                rows: self.gridOptions.paginationPageSize,
                page: self.gridOptions.paginationCurrentPage,
                sidx: 'ReceiptNO',
                sord: 'asc'
            };
            var queryParmeters = {
                pagination: Pagination,
                queryJson: self.searchParams
            };
            //格式化日期
            if (queryParmeters.queryJson) {
                if (queryParmeters.queryJson.BusinessDate) {
                    queryParmeters.queryJson.BusinessDate=moment(queryParmeters.queryJson.BusinessDate).format("YYYY-MM-DD");
                }
                if (queryParmeters.queryJson.BusinessDate2) {
                    queryParmeters.queryJson.BusinessDate2=moment(queryParmeters.queryJson.BusinessDate2).format("YYYY-MM-DD");
                }
            }
            var url = commonService.getMesApiAddress("material") + 'MaterialManage/Get_PageData_ALL_RawReceiptDetails';
            // var url = 'http://localhost:49856/MaterialManage/Get_PageData_ALL_RawReceiptDetails';
            console.log("url----------------" + url);
            console.log("uqueryParmetersrl----------------" + JSON.stringify(queryParmeters));
            commonService.callWebApiPost(url, queryParmeters).then(function (res) {
                console.log("-self.GetPage_Equipment----------------------------" + JSON.stringify(res));
                if ((res) && (res.data.success)) { 
                    //总条数
                    self.gridOptions.totalItems = res.data.resultData.records;    
                    //数据            
                    self.gridOptions.data = res.data.resultData.rows;
                } else {
                    self.gridOptions.data = [];
                }
            }, function (error) {

                backendService.genericError('获取数据出错', "获取数据出错");
            });
        } 
        //查询
        function searchButtonHandler() { 
            initGridData();
        }
        function addButtonHandler(clickedCommand) {
            $state.go(rootstate + '.add');
        }

        function editButtonHandler(clickedCommand) {
            // TODO: Put here the properties of the entity managed by the service
            $state.go(rootstate + '.edit', { id: self.selectedItem.Id, selectedItem: self.selectedItem });
        }

        function selectButtonHandler(clickedCommand) {
            // TODO: Put here the properties of the entity managed by the service
            $state.go(rootstate + '.select', { id: self.selectedItem.Id, selectedItem: self.selectedItem });
        }

        function deleteButtonHandler(clickedCommand) {
            var title = "Delete";
            // TODO: Put here the properties of the entity managed by the service
            var text = "Do you want to delete '" + self.selectedItem.Id + "'?";

            backendService.confirm(text, function () {
                dataService.delete(self.selectedItem).then(function () {
                    $state.go(rootstate, {}, { reload: true });
                }, backendService.backendError);
            }, title);
        }

        function onGridItemSelectionChanged(items, item) {
            if (item && item.selected == true) {
                self.selectedItem = item;
                setButtonsVisibility(true);
            } else {
                self.selectedItem = null;
                setButtonsVisibility(false);
            }
        }

        // Internal function to make item-specific buttons visible
        function setButtonsVisibility(visible) {
            self.isButtonVisible = visible;
        }
    }

    ListScreenRouteConfig.$inject = ['$stateProvider'];
    function ListScreenRouteConfig($stateProvider) {
        var moduleStateName = 'home.Siemens_SimaticIT_MaterialApp_BarcodeManagement';
        var moduleStateUrl = 'Siemens.SimaticIT_MaterialApp_BarcodeManagement';
        var moduleFolder = 'Siemens.SimaticIT.MaterialApp/modules/BarcodeManagement';

        var state = {
            name: moduleStateName + '_BarcodeManagement',
            url: '/' + moduleStateUrl + '_BarcodeManagement',
            views: {
                'Canvas@': {
                    templateUrl: moduleFolder + '/BarcodeManagement-list.html',
                    controller: ListScreenController,
                    controllerAs: 'vm'
                }
            },
            data: {
                title: '原料条码管理'
            }
        };
        $stateProvider.state(state);
    }
}());