Angular----安置物流项目前端框架经验总结

一、架构方面

（一） Angular框架有service 、controller层：

在Angular里面，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除。而controllers在不需要的时候就会被销毁了（因为service的底层机制是通过闭包实现，如果过分使用会导致内存泄露从而导致性能问题）。

（二）Angular框架技术方面

1、angular.ui.grid 数据表的技术

　　基本结构的案例代码：

HTML页面：

//没有分页的情况

    <div ui-grid="financialMainOption" ui-grid-selection ui-grid-pinning ui-grid-resize-columns

             style="height:399px;" class="grid">

    </div>

//分页的情况

   <div ui-grid="gridOptionsJobCostTemplate" ui-grid-pagination

                ui-grid-selection ui-grid-resize-columns ui-grid-exporter class="grid"

                style="height: 550px;">
   </div>

/*分页的模块标志*/

ui-grid-pagination

JS页面：

$scope.rateIncomeOptions = {

            enablePagination : true,// 是否禁用分页

            useExternalPagination : true,// 必须设为true才能赋值totalItems

            enableRowSelection : true,

            enableSelectAll : true,

            enableSorting: true,

            enableCellEditOnFocus:true,//单元格指令

            enableRowSelection:false,

            columnDefs : [

                {name : "rateNme",displayName : '费率名称' ,width : "",enableCellEdit : false,cellClass:cellRateRow,cellTemplate:'<div class="rateOption_{{row.entity.rateUuid}}">{{row.entity.rateNme}}</div>'},

                {name : "money",displayName : '实际金额' ,width : "",type:'number',enableCellEdit : true,cellClass: cellClassOrderFun},

                {name : 'unit',displayName : '单位' ,width : "",type:'number',enableCellEdit : false,cellFilter:"rateUnitFilter"},

                {name : "taxThan",displayName : '纳税比' ,width : "",type:'number',enableCellEdit : true},

                {name : 'remarks',displayName :'费用备注',width : "",enableCellEdit : true},

                {name : 'settlementStatus',displayName : '审核状态',width : "",cellFilter : 'settlementStatus',enableCellEdit : false},

                {name : 'isHaveTicket',displayName :'票',width : "",enableCellEdit : false,cellFilter:"isOneOrZeroFilter"},

                {name : 'serialNo',displayName :'序号',type:'number',width : "",enableCellEdit : true ,sort: { direction: uiGridConstants.ASC, priority:  } },

                ]};

    // 将grid的API绑定到scope作用域

    $scope.rateIncomeOptions.onRegisterApi = function(gridApi) {

        $scope.rateIncomeGridApi = gridApi;

        //点击行头触发

        gridApi.selection.on.rowSelectionChangedBatch($scope, function (row, event) {/*row选择行头时，event触发该事件的源事件*/

             $scope.selectRateIncomeDatas=gridApi.selection.getSelectedGridRows();//所有选中的行

             $scope.sumInAmount =  $scope.caluSumMoney($scope.selectRateIncomeDatas); //计算选中行的总金额

        });

         //点击行时触发

        gridApi.selection.on.rowSelectionChanged($scope, function (row, event) {/*row选择的行，event触发该事件的源事件*/

             $scope.selectRateIncomeDatas=gridApi.selection.getSelectedGridRows();//所有选中的行

             $scope.sumInAmount =  $scope.caluSumMoney( $scope.selectRateIncomeDatas); //计算选中行的总金额

        });

        //单元格进入事件

        gridApi.edit.on.beginCellEdit($scope,function(row,column){

            $scope.oldValue = row[column.name];

        });

        //编辑单元格离开的事件

        gridApi.edit.on.afterCellEdit($scope,function(row,column){

            //当值发生变化时修改

            if($scope.oldValue!=row[column.name]){

            }

        });

    };

注意点：

　　（1）Excel导出，中文不乱码的设置，添加属性：例如：

      exporterCsvFilename:"运单报表"+new Date().getTime()+".csv",

      exporterOlderExcelCompatibility:true,   //不使用UTF-8编码

（2）其中Grid中的列属性columnDefs 可以动态加载，例如：

statisticsReportService.buildWayBillReportColumns().success(

                function(columns) {

                    hideLoading();

                    $scope.wayBillReportGrid.columnDefs = columns;  //动态的赋值给列属性

                    //动态绑定行颜色

                    $.each(columns,function(i,column){

                        column.cellClass = cellClassJobFun;

                    });

                    $scope.wayBillReportStatistical();

         });

（3）清除已选中的行，操作方法，如下：

//设置选中的行为0

 $scope.rateIncomeGridApi.selection.clearSelectedRows();

（4）

　　2、angular.ui.tree 树形tree技术

　　 HTML页面代码：【控制菜单的收缩性】

<div ui-tree="treeOptions" id="tree-root">

      <ol ui-tree-nodes=""  ng-model="subjectTreeList">

            <li ng-repeat="node in subjectTreeList" ui-tree-node  ng-include="'nodes_renderer.html'" ng-show="visible(node)"></li>

      </ol>

</div>

<!--子模板部分-->

<script type="text/ng-template" id="nodes_renderer.html">

  <div ui-tree-handle class="tree-node tree-node-content">

     <a class="btn btn-success btn-xs" ng-if="node.childSubjectSize && node.childSubjectSize > 0" data-nodrag ng-click="toggle(this)">

             <span class="glyphicon"

                   ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}">

             </span>

        </a>

    <span ng-if="node.subjectAlias">{{node.subjectCode}} : {{node.subjectAlias}}</span>

    <span ng-if="!node.subjectAlias">{{node.subjectCode}} : {{node.subjectName}}</span>

    <span>

        <a ng-show="node.subjectGrade>-1" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeSubItem(this)"><span

            class="glyphicon glyphicon-remove"></span></a>

        <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span

             class="glyphicon glyphicon-plus"></span></a>

        <a ng-show="node.subjectGrade>-1"  class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="editSubItem(this)" style="margin-right: 8px;"><span

            class="glyphicon glyphicon-edit"></span></a>

    </span>

  </div>

   <ol  ui-tree-nodes="" ng-model="node.childFinanceSubjects" ng-class="{hidden: collapsed}" style="padding-left:29px;">

    <li ng-show="node.collapsed" ng-repeat="node in node.childFinanceSubjects" ui-tree-node  ng-include="'nodes_renderer.html'" ng-show="visible(node)">

    </li>

    <li ng-show="!node.collapsed" ng-repeat="node in node.childFinanceSubjects" ui-tree-node data-collapsed="true" data-expand-on-hover="true" ng-include="'nodes_renderer.html'" ng-show="visible(node)">

    </li>

  </ol>

</script>

JS代码部分：

　　数据源：

$scope.getTreeList=function(){

        loadingPage();

        financeSubjectService.findAllFinanSubject2($scope.form).success(function(data){

            $scope.allData=data.result;

            //查询树

            $scope.subjectTreeList=[];

            var subjectList=[];

            if(data.result["-1"] && data.result["-1"].length>){

                $.each(data.result["-1"],function(j,obj){

                    //$scope.initSortNode(obj);

                    subjectList.push(obj);

                });

            }

            var nodeList=$scope.sortNode(subjectList);

            //创建根节点

            var root={};

            root.subjectName="财务科目";

            root.subjectGrade=-;

            root.subjectCode='';

            root.subjectType='PAYINCOME';

            root.childSubjectSize=nodeList.length;

            root.childFinanceSubjects=nodeList;  

            $scope.subjectTreeList.push(root);

            $scope.treeOptions.data=$scope.subjectTreeList;

            hideLoading();

        });

    };

tree结构的控制：

 $scope.treeOptions = {

   //回调函数

   beforeDrop : function (e) {//拖曳节点下降时候调用的函数

   },

   accept: function(sourceNodeScope, destNodesScope, destIndex) {

       return true;

   },

   removed:function(node){

   },

   dropped:function(event){

   },

   dragStart:function(event){

   },

   dragMove:function(event){

   },

   dragStop:function(event){

   },

   beforeDrag:function(sourceNodeScope){ //拖曳之前检查节点

   },

   toggle:function(collapsed, sourceNodeScope){

       if(!collapsed && sourceNodeScope.$modelValue.financeSubjectUuid){

           loadingPage();

           if($scope.allData){

               sourceNodeScope.$modelValue.childFinanceSubjects=$scope.sortNode($scope.allData[sourceNodeScope.$modelValue.financeSubjectUuid]);

               hideLoading();

           }

       }

   }

 };

注意点：可以在toggle中控制节点的延迟加载。

巴特西

Angular----安置物流项目前端框架经验总结

最新文章

热门文章