AngularJS常用方法记录

一、AngularJS在表格中实现页面可编辑

（1）在AngularJS对应前端页面的module.js文件中增加以下代码：（代码中没有一个注释是多余的，注意看注释）

(function(){
    'use strict';
    //angular.module()方法（从备注之后的第1-8行）为需要添加的内容，Nancal.PR.ProductApp.OrderConfirm为对应的前端html页面名称
    angular.module('Nancal.PR.ProductApp.OrderConfirm', ['ui.grid',
    'ui.grid.pagination',
    'ui.grid.autoResize',
    'ui.grid.expandable',
    'ui.grid.selection',
    'ui.grid.resizeColumns',
    'ui.grid.pinning',
    'ui.grid.cellNav','ui.grid.edit']).config(StateConfig);

    StateConfig.$inject = ['$stateProvider'];
    function StateConfig($stateProvider) {
        var moduleStateName = 'home.Nancal_PR_ProductApp_OrderConfirm';
        var moduleStateUrl = 'Nancal.PR_ProductApp_OrderConfirm';
        var moduleFolder = 'Nancal.PR.ProductApp/modules/OrderConfirm';
    }
}());

（2）在对应前端页面增加以下前端控件（代码中没有一个注释是多余的，注意看注释）

 <sit-tabset style="padding: 0px;margin: 0px;">
            <sit-tab heading="工时分配" style="background-color: #204d74;padding: 0px;">
                <div id="listClass3" style="height:100%; padding: 0px; margin: 0px;">
                    <!-- div中ui-grid-edit ui-grid-cellNav等控件在div中添加-->
                    <div ui-grid="vm.gridOptionsWorkTime" ui-grid-edit ui-grid-cellNav ui-grid-pinning ui-grid-auto-resize ui-grid-resize-columns ui-grid-selection  class="uigrid"></div>
                </div>
            </sit-tab>
 </sit-tabset>

（3）在对应前端JS文件中增加input输入控制（时间字段中的cellTemplate属性为设置input可输入，同时实现字段集成查询结果）

        //初始化工时分配表grid选项
        function initGridOptionsWorkTime() {
            self.gridOptionsWorkTime = {
                fastWatch: true,
                rowHeight: 35,
                minimumColumnSize: 100,
                enableMultiSelection: false,
                enableFiltering: false,
                //基础属性
                enableSorting: true, //是否支持排序(列)
                useExternalSorting: false, //是否支持自定义的排序规则
                enableGridMenu: false, //是否显示表格 菜单
                showGridFooter: true, //时候显示表格的footer
                enableHorizontalScrollbar: 1, //表格的水平滚动条
                enableVerticalScrollbar: 1, //表格的垂直滚动条 (两个都是 1-显示,0-不显示)
                selectionRowHeaderWidth: 30,
                enableCellEditOnFocus: true, //default为false,true的时候单击即可打开编辑(cellEdit为true的时候,需要引入'ui.grid.cellNav')
                enableCellEdit: true,
                //分页属性
                enablePagination: true, //是否分页,default为true
                enablePaginationControls: true, //使用默认的底部分页
                paginationPageSizes: [20, 50, 100, 200, 500], //每页显示个数选项
                paginationPageSize: 100, //每页显示个数
                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: true, // 选择所有checkbox是否可用，default为true; 
                enableSelectionBatchEvent: true, //default为true
                modifierKeysToMultiSelect: false, //default为false,为true时只能按ctrl或shift键进行多选,这个时候multiSelect必须为true;
                multiSelect: true, // 是否可以选择多个,默认为true;
                noUnselect: false, //default为false,选中后是否可以取消选中
                appScopeProvider: self,
                columnDefs: [ 
                    {
                        field: 'Id',
                        displayName: '主键',
                        visible:true,
                        width: 1,
                        enableCellEdit: false
                    },                              
                    {
                        field: 'WorkReportUserName',
                        displayName: '人员名称',
                        width: 120,
                        enableCellEdit: false
                    },
                    {
                        field: 'AllocationHour',                        
                        displayName: '时间',
                        width: 120,
                        enableCellEdit: true, 
                        //增加以下控件，在控件中设置输入框 
                        cellTemplate: '<div class="ui-grid-cell-contents"><input  type="sit-text" onchange="if(/\D/.test(this.value)){alert("只能输入正整数");this.value="";}  ng-model="row.entity.AllocationHour"/></div>'  
                    }

                ],
                //---------------api---------------------
                onRegisterApi: function (gridApi) {

                },
                data: []
            }
        }

二、定义前端双击打开页面的大小

有两种方法：

方法1：控制页面大小，将html页面（第一段代码）/**控制side-panel的宽度*/ 下内容注释，将js页面的 /**控制side-panel的宽度*/ 下内容也注释

方法2：将二者都取消注释，然后自己定义宽度

(function () {
    'use strict';
    angular.module('Nancal.PR.ProductApp.WorkOrderSerialNumberToOperation').config(EditScreenStateConfig);

    EditScreenController.$inject = ['Nancal.PR.ProductApp.WorkOrderSerialNumberToOperation.WorkOrderSerialNumberToOperation.service', '$state', '$stateParams', 'common.base', '$filter', '$scope', 'commonService', 'common.services.authentication', 'common.services.modelDriven.runtimeService', '$rootScope'
    ];
    function EditScreenController(dataService, $state, $stateParams, common, $filter, $scope, commonService, auth, mdRuntimeSvc, $rootScope) {
        var self = this;
        var sidePanelManager, backendService, propertyGridHandler;
        activate();
        function activate() {
            init();
            self.Title = "选择工位";
            //使用宽右侧弹窗
            sidePanelManager.open('e');
            /*
            sidePanelManager.open({
                 mode: 'e',
                 size: 'wide'
             }); 
             */ 
            GetUserInfo();
            //注册事件
            registerEvents();
            //初始化grid选项
            initGridOptions();
            //初始化grid数据、查询
            //initGridData();
        }

        function init() {
            sidePanelManager = common.services.sidePanel.service;
            backendService = common.services.runtime.backendService;

            //Initialize Model Data
            // TODO: Put here the properties of the entity managed by the service
            self.currentItem = angular.copy($stateParams.selectedItem);
            self.EQPSendState = angular.copy($stateParams.EQPSendState);
            self.validInputs = false;
            self.Ids = angular.copy($stateParams.id);
            self.NIds = angular.copy($stateParams.NIds);
            self.SerialNumbers = angular.copy($stateParams.SerialNumbers);
            self.OperationGroups =angular.copy($stateParams.OperationGroups);
            self.OperationGroupNames =angular.copy($stateParams.OperationGroupNames);

            self.select_WorkCenter = {
                value: {},
                options: []
            };
            Binding_Dis_WorkCenter();
            //Expose Model Methods
            self.save = save;
            self.cancel = cancel;
            self.searchButtonHandler = initGridData;
        }
        
        function Binding_Dis_WorkCenter() {
            //var url = 'http://localhost:49888/BS_PersonGroupToUnit/GetDt_OperationGroup';
            var url = commonService.getMesApiAddress("") + 'BS_PersonGroupToUnit/GetDt_OperationGroup';
            commonService.callWebApiPost(url, "").then(function (res)  {
            console.log("Binding_Dis_WorkCenter---------------", JSON.stringify(res.data.resultData));
            self.select_WorkCenter.options = res.data.resultData;

            self.select_WorkCenter.value ={
                "ItemName":self.OperationGroupNames,
                "ItemValue":self.OperationGroups
            };
            console.log("--------------------",JSON.stringify(self.select_WorkCenter.value ));
            initGridData();
        });
        }

        //获取登录用户信息
        function GetUserInfo() {
            var user = auth.getUser();
            self.UserId = user['nameid'];
            self.UserCode = user['unique_name'];
            self.UserName = user['urn:fullname'];
            if (self.UserName == null || self.UserName == '' || self.UserName == undefined) {
                self.UserName = self.UserCode;
            }
            console.log("user---------------------", JSON.stringify(user));
        }
        //初始化grid选项
        function initGridOptions() {
            self.gridOptions = {
                fastWatch: true,
                rowHeight: 35,
                minimumColumnSize: 70,
                enableFiltering: true,
                //基础属性
                enableSorting: true, //是否支持排序(列)
                useExternalSorting: false, //是否支持自定义的排序规则
                enableGridMenu: true, //是否显示表格 菜单
                showGridFooter: true, //时候显示表格的footer
                enableHorizontalScrollbar: 1, //表格的水平滚动条
                enableVerticalScrollbar: 1, //表格的垂直滚动条 (两个都是 1-显示,0-不显示)
                selectionRowHeaderWidth: 30,
                enableCellEditOnFocus: false, //default为false,true的时候单击即可打开编辑(cellEdit为true的时候,需要引入'ui.grid.cellNav')
                //分页属性
                enablePagination: false, //是否分页,default为true
                enablePaginationControls: false, //使用默认的底部分页
                paginationPageSizes: [10, 100, 200.500], //每页显示个数选项
                paginationPageSize: 9000, //每页显示个数
                paginationCurrentPage: 1, //当前的页码  
                totalItems: 0, // 总数量
                useExternalPagination: false, //是否使用分页按钮
                //选中
                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: [
                    /*{
                    field: 'WorkCenterNumber',
                    displayName: '工位组编号',
                    width: 100
                },{
                    field: 'WorkCenter',
                    displayName: '工位组名称',
                    width: 100
                },
                */
                {
                    field: 'NId',
                    displayName: '工位ID',
                    width: 100
                },
                {
                    field: 'Name',
                    displayName: '工位名称',
                    width: 150
                },
                    /*{
                    field: 'Description',
                    displayName: '工位描述',
                    width: 200
                }, */
                {
                    field: 'IsUseing',
                    displayName: '占用情况',
                    width: 100
                }, {
                    field: 'EstimatedEndTime',
                    displayName: '释放时间',
                    width: 200
                }
                ],
                //---------------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) {
                        let currentSelection = $scope.gridApi.selection.getSelectedRows();

                        if (currentSelection.length > 0) {
                            self.selectedItems = currentSelection;
                            self.isButtonVisible = true;

                            //console.log (self.selectedItem);
                        } else {
                            self.selectedItems = {};
                            self.isButtonVisible = false;
                        }
                        console.log("多选值-----------------", self.selectedItems);
                    });
                    //全选事件enableSelectAll（在grid上选中全选时触发）
                    $scope.gridApi.selection.on.rowSelectionChangedBatch($scope, function (row, event) {
                        let currentSelection = $scope.gridApi.selection.getSelectedRows();

                        if (currentSelection.length > 0) {
                            self.selectedItems = currentSelection;
                            self.isButtonVisible = true;

                            //console.log (self.selectedItem);
                        } else {
                            self.selectedItems = {};
                            self.isButtonVisible = false;
                        }
                        console.log("多选值-----------------", self.selectedItems);
                    });
                },
                data: []
            }
        }
        //查询方法,数据绑定
        function initGridData(pre,cure) {
            console.log("pre -----------",JSON.stringify(pre));
            console.log("cure-----------",JSON.stringify(cure));
            self.isButtonVisible = false;
            let Pagination = {
                rows: self.gridOptions.paginationPageSize,
                page: self.gridOptions.paginationCurrentPage,
                sidx: 'CreatedOn', //无排序字段使用主键
                sord: 'desc'
            };
            //查询条件 
            let queryParmeters = {
                pagination: Pagination,
                queryJson: {
                    WorkCenterNumber: cure.ItemValue
                }
            };
            console.log('queryParmeters-----' + JSON.stringify(queryParmeters));
            var url = commonService.getMesApiAddress("") + 'BS_PersonGroupToUnit/GetDt_EquipmentUnit';
            //var url = 'http://localhost:49888/BS_PersonGroupToUnit/GetDt_EquipmentUnit';
            commonService.callWebApiPost(url, queryParmeters).then(function (res) {
                console.log('-self.Post_ResultData----------------------' + 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 registerEvents() {
            $scope.$on('sit-property-grid.validity-changed', onPropertyGridValidityChange);
        }

        function save() {
            console.log("多选值-----------------", self.selectedItems);

            let tmpData = self.selectedItems.map(t => {
                return t.NId;
            });

            if (tmpData == null || tmpData.length == 0) {
                backendService.genericError('请选择工位', "提示");
                return;

            }
            if (self.Ids == null || self.Ids == "") {
                backendService.genericError('Ids 参数失效', "提示");
                return;
            }
            //提交数据, KeyValue 传主键 是修改, 为空 是新增
            var postData = {
                Ids: self.Ids,
                WorkStation: self.selectedItems[0].NId,
                CreatedUserCode: self.UserCode,
                CreatedUserName: self.UserName,
                EQPSendState: self.EQPSendState,
                NIds: self.NIds,
                SerialNumbers: self.SerialNumbers
            };
            console.log("postData------------------------------------" + JSON.stringify(postData));

            // 'PR_MachineInfo_FRTemplateToInspectItem/SavePR_MachineInfo_FRTemplateToInspectItem'
            var url = commonService.getMesApiAddress("ProduceManage") + 'WorkOrderOperation/GoWorke_SerialNumberOperation';
            //var url = 'http://localhost:55801/WorkOrderOperation/GoWorke_SerialNumberOperation';
            console.log("url----------------" + url);
            //加载中。。
            commonService.showLoading();
            //提交数据
            var req = commonService.callWebApiPost(url, postData).then(onSaveSuccess, onSaveError);
            console.log("SaveQC_BSInspectItem----------------------" + JSON.stringify(req));
        }
        function onSaveSuccess(data) {
            //关闭加载中
            commonService.hideLoading();
            console.log("save result----------------" + JSON.stringify(data));
            if (data.data.success) {
                //触发父窗口的事件
                $rootScope.$emit('to-parent', 'parent');
                $state.go('^', {}, {
                    reload: false
                });
                sidePanelManager.close();

            } else {
                backendService.genericError(data.data.returnMsg, "操作出错");
            }

        }
        //保存失败事件
        function onSaveError(error) {
            //关闭加载中
            commonService.hideLoading();
            backendService.genericError('[' + error.status + '] - ' + error.statusText, "操作出错");
        }

        function cancel() {
            sidePanelManager.close();
            $state.go('^');
        }

        function onPropertyGridValidityChange(event, params) {
            self.validInputs = params.validity;
        }
    }

    EditScreenStateConfig.$inject = ['$stateProvider'];
    function EditScreenStateConfig($stateProvider) {
        var screenStateName = 'home.Nancal_PR_ProductApp_WorkOrderSerialNumberToOperation_WorkOrderSerialNumberToOperation';
        var moduleFolder = 'Nancal.PR.ProductApp/modules/WorkOrderSerialNumberToOperation';

        var state = {
            name: screenStateName + '.edit',
            url: '/edit/:id',
            views: {
                'property-area-container@': {
                    templateUrl: moduleFolder + '/WorkOrderSerialNumberToOperation-edit.html',
                    controller: EditScreenController,
                    controllerAs: 'vm'
                }
            },
            data: {
                title: 'Edit'
            },
            params: {
                id: null,
                selectedItem: null,
                EQPSendState: null,
                NIds: null,
                SerialNumbers: null,                
                OperationGroups: null,
                OperationGroupNames: null,
            }
        };
        $stateProvider.state(state);
    }
}());

<style>
    .canvas .property-area-container {
        padding: 0px;
    }
    .inputDefaultWith {
        max-width: 250px;
    }
    .ui-grid-disable-selection {
        -webkit-touch-callout: default;
        -webkit-user-select: text;
        -khtml-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
        cursor: auto;
    }

    /**控制side-panel的宽度*/
    /*
    .canvas .property-are-parent .side-panel-large-layout {
        width: 600px
    }
    */
</style>
<div class="content-area content-area-relative side-panel-container sit-side-panel">
    <div class="side-panel-top">
        <div class="side-panel-header">
            <div class="side-panel-header-text">{{vm.Title}}</div>
            <div style="display:flex; align-items:center">
                <!---->
                <button type="button" class="side-panel-button-close" ng-click="vm.cancel()" title="Close">
                    <span class="fa fa-times side-panel-close-img momIcon" sit-class="svg-icon"
                        sit-mom-icon="sidepanelCtrl.closePanel" aria-hidden="true"
                        ng-class="{momIcon: sidepanelCtrl.closePanel !== null }">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            icon-name="cmdClosePanel24" viewBox="0 0 24 24" class="svg-icon">
                            <path class="aw-theme-iconOutline" fill="#464646"
                                d="M21.354 3.354l-.708-.708L12 11.293 3.354 2.646l-.708.708L11.293 12l-8.647 8.646.708.708L12 12.707l8.646 8.647.708-.708L12.707 12z">
                            </path>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </div>
    <!--查询条件与功能按钮-->
    <div class="col-md-40" style="margin-left: 10px; margin-top: 10px;">

        <sit-property-grid sit-id="add_form" sit-layout="Horizontal" sit-type="Fluid" sit-mode="edit" sit-columns="40" > 
            <sit-property sit-widget="sit-select" sit-read-only="false" sit-options="vm.select_WorkCenter.options" sit-change="vm.searchButtonHandler"
            sit-to-keep="'ItemValue'" sit-value="vm.select_WorkCenter.value" sit-to-display="'ItemName'"
            style="max-width:200px;">工位组：            
        </sit-property>                                
            <sit-command-bar sit-type="action">
                <sit-command sit-icon="fa-search" sit-type="main" sit-name="com.siemens.customcommand.search"
                             ng-show="false" sit-label="">
                </sit-command>
                <sit-command sit-icon="fa-search" sit-type="main" sit-name="com.siemens.customcommand.search"
                             sit-tooltip="查询" ng-show="false"  ng-click="vm.searchButtonHandler" sit-label="查询">
                </sit-command>
            </sit-command-bar>
        </sit-property-grid>
    </div>
    <div>
        <div class="side-panel-property-area-body"
            style="margin-left: 10px; margin-top: 10px;height: 70vh;overflow: hidden;"> 
            <div id="itemlist" style="height: calc(100% - 20px) !important;">
                <div ui-grid="vm.gridOptions" ui-grid-pinning ui-grid-auto-resize ui-grid-resize-columns
                    ui-grid-selection ui-grid-pagination class="uigrid"></div>
            </div> 
        </div>
    </div>

    <div class="command-bar-side-panel" style="padding:16px">
        <button ng-click="vm.cancel()" class="btn side-panel-button">取消</button>
        <button ng-click="vm.save()" class="btn side-panel-button  btn-primary" ng-show="vm.isButtonVisible">确认</button>
    </div>
</div>

三、点击下拉按钮后自动查询页面

1、html页面中设置查询字段并设置下拉绑定

    <!--查询条件与功能按钮-->
    <div class="col-md-40" style="margin-left: 10px; margin-top: 10px;">

        <sit-property-grid sit-id="add_form" sit-layout="Horizontal" sit-type="Fluid" sit-mode="edit" sit-columns="40" >
            <!--设置查询点击按钮，将按钮设置为不可见，在下拉字段中用sit-change方法绑定按钮--> 
            <sit-property sit-widget="sit-select" sit-read-only="false" sit-options="vm.select_WorkCenter.options" sit-change="vm.searchButtonHandler"
            sit-to-keep="'ItemValue'" sit-value="vm.select_WorkCenter.value" sit-to-display="'ItemName'"
            style="max-width:200px;">工位组：            
        </sit-property>                                
            <sit-command-bar sit-type="action">
                <sit-command sit-icon="fa-search" sit-type="main" sit-name="com.siemens.customcommand.search"
                             ng-show="false" sit-label="">
                </sit-command>
                <sit-command sit-icon="fa-search" sit-type="main" sit-name="com.siemens.customcommand.search"
                             sit-tooltip="查询" ng-show="false"  ng-click="vm.searchButtonHandler" sit-label="查询">
                </sit-command>
            </sit-command-bar>
        </sit-property-grid>
    </div>

2、JS文件中增加查询方法，pre参数为上一个下拉查询的结果，cure为当前查询结果

        //查询方法,数据绑定
        function initGridData(pre,cure) {
            console.log("pre -----------",JSON.stringify(pre));//上一个查询结果
            console.log("cure-----------",JSON.stringify(cure));//当前查询结果
            self.isButtonVisible = false;
            let Pagination = {
                rows: self.gridOptions.paginationPageSize,
                page: self.gridOptions.paginationCurrentPage,
                sidx: 'CreatedOn', //无排序字段使用主键
                sord: 'desc'
            };
            //查询条件 
            let queryParmeters = {
                pagination: Pagination,
                queryJson: {
                    WorkCenterNumber: cure.ItemValue
                }
            };
            console.log('queryParmeters-----' + JSON.stringify(queryParmeters));
            var url = commonService.getMesApiAddress("") + 'BS_PersonGroupToUnit/GetDt_EquipmentUnit';
            //var url = 'http://localhost:49888/BS_PersonGroupToUnit/GetDt_EquipmentUnit';
            commonService.callWebApiPost(url, queryParmeters).then(function (res) {
                console.log('-self.Post_ResultData----------------------' + 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('获取数据出错', "获取数据出错");
            });
        }

四、AngularJS 前端时间控件处理方式

 {
        field: 'TaskStartTime',
        displayName: '实际开始时间', enableSorting: true,
        width: 120,
        type: 'date',
        cellFilter: 'date :"yyyy-MM-dd HH:mm:ss"'// 'YYYY-MM-DD HH:mm:ss'
 }

EstimatedEndTime:moment(self.currentItem.EstimatedEndTime).format('YYYY-MM-DD HH:mm:ss')