zoukankan      html  css  js  c++  java
  • select2的简单使用

    静态下拉列表

    修改 type_template.html  引入JS

    <!-- slect2插件-->
       <link rel="stylesheet" href="../plugins/select2/select2.css" />
       <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
       <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
    
    <script src="../plugins/angularjs/angular.min.js"></script>
    <script src="../js/base_pagination.js"></script>
    <!-- 导入select2-angula-->
    <script src="../js/angular-select2.js"></script>
    <script src="../plugins/angularjs/pagination.js"></script>
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
    
    <script src="../js/service/typeTemplateService.js"></script>
    <script src="../js/controller/baseController.js"></script>
    <script src="../js/service/brandService.js"></script>
    <script src="../js/controller/typeTemplateController.js"></script>

    注意:base_pagination.js一定要在angular-select2.js之前导入,不然报app not define!

    修改typeTemplateController.js  ,定义品牌列表数据

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

    (3)在type_template.html 用select2组件实现多选下拉框

    <input select2  select2-model="entity.brandIds" config="brandList" multiple placeholder="选择品牌(可多选)" type="text"/>  

    multiple 表示可多选

    Config用于配置数据来源

    select2-model用于指定用户选择后提交的变量

    最终实现效果如下:

     

    动态下拉列表

    1:从后端获取数据支撑

    我们现在让这个下拉列表的数据从数据库中提取,修改后端代码获得数据(此处只展示Controller)

    @RequestMapping("/selectOptionList")
    public List<Map> selectOptionList(){
        return brandService.selectOptionList();
    }

    2:修改youlexuan-manager-web的brandService.js

    //下拉列表数据
    this.selectOptionList=function(){
        return $http.get('../brand/selectOptionList.do');
    }

    3:修改youlexuan-manager-web的typeTemplateController.js

    因为我们在模板控制层中需要使用品牌服务层的方法,所以需要添加依赖注入

    //控制层
    app.controller('typeTemplateController' ,function($scope,$controller   ,typeTemplateService ,brandService){

    使用品牌服务方法实现查询,结果赋给变量

    $scope.brandList={data:[]};//品牌列表
      //读取品牌列表
      $scope.findBrandList=function(){
        brandService.selectOptionList().success(
          function(response){
            $scope.brandList={data:response};
          }
        );
      }
    // 定义方法:获取JSON字符串中的某个key对应值的集合
        $scope.jsonToString = function(jsonStr,key){
            // 将字符串转成JSOn:
            var jsonObj = JSON.parse(jsonStr);
            var value = "";
            for(var i=0;i<jsonObj.length;i++){
                if(i>0){
                    value += ",";
                }
                value += jsonObj[i][key];
            }
            return value;
        }

    4:修改type_template.html ,添加JS引入

    <script type="text/javascript" src="../js/base_pagination.js">  </script>
    <script type="text/javascript" src="../js/service/typeTemplateService.js">  </script>
    <script type="text/javascript" src="../js/service/brandService.js">  </script>
    <script type="text/javascript" src="../js/controller/baseController.js">  </script>
    <script type="text/javascript" src="../js/controller/typeTemplateController.js">  </script>

    特别注意一下,JS引入的位置,要在typeTemplateController.js之前,因为该控制器要使用到它

    5:修改type_template.html ,添加初始化

    <body class="hold-transition skin-red sidebar-mini" ng-app="youlexuan" ng-controller="typeTemplateController" ng-init="findBrandList()">

     

  • 相关阅读:
    3星|《葡萄酒经济学》:行业概况与资料汇编
    抖音、YouTube、Facebook等新媒体营销与运营相关14本书
    3星|《游戏学》:中美两国游戏产业概况
    3星|《新引爆点》:企业玩抖音入门
    4星|《未来的处方》:美国医疗组织应对奥巴马医改的成功经验12条
    2.5星|《知识付费》:行业相关资料的综述与堆砌
    《都挺好》原著小说大结局(严重剧透)
    OKR相关4本书,好书3本
    2.5星|《区块链超入门》:偏技术的介绍,没介绍过去两年间币圈的各种或狗血或精彩的故事与事故
    《经济学人》电子书15本,大部分水平较高
  • 原文地址:https://www.cnblogs.com/wangju/p/11858369.html
Copyright © 2011-2022 走看看