认真敲项目(三) select2

认真敲项目(三) select2

---

关键字: 前端分层开发 控制器继承 代码生成器 规格管理 模板管理

1. 前端分层开发

• 其一:定义一个模板（模板包括包含分页的模板和不包含分页的模板）

 var app=angular.module('pinyougou', ['pagination']);//定义模块

• 其二:定义一个服务层 (服务层的作用是已发出请求)

app.service('brandService',function($http){
            //读取列表数据绑定到表单中
            this.findAll=function(){
            return $http.get('../brand/findAll.do');       
            }
}

• 其三:定义一个控制层(控制层的作用是处理后台发送回来的数据)

app.controller('brandController' ,function($scope,brandService){       
     //读取列表数据绑定到表单中  
    $scope.findAll=function(){
            brandService.findAll().success(
                function(response){
                    $scope.list=response;
                }           
            );
    }

• 其四:要使用的时候要在页面引用

2. 控制器继承

• 原理: 并不是实际意义上的继承, 实际上是将两个控制器的 scope∗∗∗相通,在实现继承的时候需要在控制器上引用∗∗∗ s c o p e ∗ ∗ ∗ 相 通 , 在 实 现 继 承 的 时 候 需 要 在 控 制 器 上 引 用 ∗ ∗ ∗ controller服务

• $controller('baseController',{$scope:$scope});//继承

base_controller.js

 //基本控制层 
app.controller('baseController' ,function($scope){ 
        //重新加载列表 数据
        $scope.reloadList=function(){
           //切换页码  
        $scope.search( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);    
    }
    //分页控件配置 
    $scope.paginationConf = {
         currentPage: 1,
         totalItems: 10,
         itemsPerPage: 10,
         perPageOptions: [10, 20, 30, 40, 50],
         onChange: function(){
                 $scope.reloadList();//重新加载
        }
    };  
    $scope.selectIds=[];//选中的ID集合 
    //更新复选
    $scope.updateSelection = function($event, id) {       
        if($event.target.checked){//如果是被选中,则增加到数组
            $scope.selectIds.push( id);            
        }else{
            var idx = $scope.selectIds.indexOf(id);
              $scope.selectIds.splice(idx, 1);//删除 
        }
    }   
}); 

3.代码生成器使用

4.规格管理

• 规格是什么?
  
  • 屏幕尺寸 电池容量 网络制式
• tb_specification 规格表
  
  • id Spec_name
• tb_specification_option 规格选项表
  
  • id Option_name Spec_id Orders

1) 显示规格列表

• 准备工作

  • 引入js 放置分页组件 在body上指定模块名和控制器名

  ng-app="pinyougou"  ng-controller="specificationController" 

• 实现

  • 使用 ng-repeat = “entity in list” 使用angularJS的双向绑定特性来实现数据的显示

2) 新增行的实现

• 场景描述:在一个新增的弹窗中添加一行规格选项的显示行

• 给 新建选项 绑定增加行的方法ng-click=*"add**TableRow()"*

• 在点击新建按钮的时候要对 entity 进行初始化

  specificationController.js

//新增选项行
    $scope.addTableRow=function(){ 
        $scope.entity.specificationOptionList.push({});        
    }

3) 删除行

• 场景: 将规格选项行删除ng-click="deleTablenRow($index)"

  specificationController.js

  //批量选项删除 
  $scope.deleTableRow=function(index){           
      $scope.entity.specificationOptionList.splice(index,1);//删除         
  } 
  

4) 提交保存

• 逻辑描述
  
  • 表单上有两张表的数据–>自己创建一个实体类来将数据绑定到后端
  • 在service层进行保存的时候要在两张表中进行保存

5) 修改规格

• 需求描述
  
  • 点击主页上规格后面的修改按钮, 绑定一个findOne的方法, 并将数据回显到 弹窗中
  • 进行修改后进行保存

6) 多行删除

• ng-click="updateSelection($event,entity.id)"

5.模板管理

品牌下拉列表–使用 select2

• 使用步骤:

  • 引入JS

  •        

  • multiple 表示可多选 Config用于配置数据来源 select2-model用于指定用户选择后提交的变量

  • 注意数据格式:

  • $scope.brandList={data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'小米'}]};

  • 为了迎合数据格式SQL语句

  • “`
    
    select id,name as text from tb_brand
    

  “`