項目二:品優購 第三天


 

 

 

 

 

品優購電商系統開發

3章

規格及模板管理

 

 

 

 

 

 

傳智播客.黑馬程序員

 

 

 

 

 

1.前端分層開發

1.1 需求分析

我們在上次課學習了angularJS並完成的品牌管理的增刪改查功能。但是我們看代碼,JShtml都放在一起,並不利於我們后期的維護。我們可以在前端代碼中也運用MVC的設計模式,將代碼進行分離,提高程序的可維護性。

1.2 自定義服務

AngularJS 中,服務是一個函數或對象,可在你的 AngularJS 應用中使用。我們在上次課中使用了內置服務$http .其實我們也可以自己來定義服務,而服務會封裝一些操作。我們在不同的控制器中可以調用同一個服務,這樣服務的代碼將會被重用。

我們現在就修改一下我們的品牌管理代碼,使用自定義服務。

1.3代碼分離

我們剛才已經將與后端交互的部分放入自定義服務,目的是不同的控制層都可以重復調用服務層方法。所以我們還需要將代碼分離出來,以便調用。

修改頁面

去掉brand.html原來的JS代碼,引入JS

<script type="text/javascript" src="../plugins/angularjs/angular.min.js">  </script>

<!-- 分頁組件開始 -->

<script src="../plugins/angularjs/pagination.js"></script>

<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

<!-- 分頁組件結束 -->

<script type="text/javascript" src="../js/base_pagination.js">  </script>

<script type="text/javascript" src="../js/controller/baseController.js">  </script>

<script type="text/javascript" src="../js/controller/brandController.js">  </script>

2.控制器繼承

2.1需求分析

有些功能是每個頁面都有可能用到的,比如分頁,復選等等,如果我們再開發另一個功能,還需要重復編寫。怎么能讓這些通用的功能只寫一次呢?我們通過繼承的方式來實現。

2.2前端代碼

2.2.1 父控制器

managerjs/controller目錄下的baseController.js

 //基本控制層

app.controller('baseController' ,function($scope){

        //重新加載列表 數據

        $scope.reloadList=function(){

        //切換頁碼  

        $scope.search( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);    

    }

//分頁控件配置

$scope.paginationConf = {

         currentPage: 1,

         totalItems: 0,

         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);//刪除

}

}

});

2.2.2 品牌控制器層

brandController.js

 //品牌控制層

app.controller('brandController' ,function($scope,$controller,brandService){

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

    //讀取列表數據綁定到表單中  

$scope.findAll=function(){

brandService.findAll().success(

function(response){

$scope.list=response;

}

);

}    

//其它方法省略........ 

});

$controller也是angular提供的一個服務,可以實現偽繼承,實際上就是與BaseController共享$scope

2.2.2 品牌業務層

// 定義服務層:

app.service("brandService",function($http){

this.findAll = function(){

return $http.get("../brand/findAll.do");

}

 

this.findByPage = function(page,rows){

return $http.get("../brand/findByPage.do?page="+page+"&rows="+rows);

}

 

this.save = function(entity){

return $http.post("../brand/save.do",entity);

}

 

this.update=function(entity){

return $http.post("../brand/update.do",entity);

}

 

this.findById=function(id){

return $http.get("../brand/findById.do?id="+id);

}

 

this.dele = function(ids){

return $http.get("../brand/delete.do?ids="+ids);

}

 

this.search = function(page,rows,searchEntity){

return $http.post("../brand/search.do?page="+page+"&rows="+rows,searchEntity);

}

});

 

3.規格管理

3.1需求及表結構分析

3.1.1 需求

實現規格管理功能

3.1.2 表結構

tb_specification  規格表

字段

類型

長度

含義

Id

Bigint

 

主鍵

spec_name

Varchar

255

規格名稱

tb_specification_option  規格選項表

字段

類型

長度

含義

id

Bigint

 

主鍵

option_name

Varchar

200

規格選項名稱

spec_id

Bigint

30

規格ID

orders

Int

11

排序

 

3.2規格列表

 

 

3.2.1 引入JS

修改pinyougou-web-manager工程的specification.html

<script type="text/javascript" src="../plugins/angularjs/angular.min.js">  </script>   

<script src="../plugins/angularjs/pagination.js"></script>

<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

<script type="text/javascript" src="../js/base_pagination.js">  </script>

<script type="text/javascript" src="../js/service/specificationService.js">  </script>

<script type="text/javascript" src="../js/controller/baseController.js"></script>

<script type="text/javascript" src="../js/controller/specificationController.js">  </script>

3.2.2 放置分頁組件

 <!-- 分頁 -->

<tm-pagination conf="paginationConf"></tm-pagination> 

3.2.3 指令與表達式

body元素指定模塊名和控制器名

<body class="hold-transition skin-red sidebar-mini" 

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

 

循環表格行

 <tr ng-repeat="entity in list">

 <td><input  type="checkbox" ></td>                               

 <td>{{entity.id}}</td>

 <td>{{entity.specName}}</td>

      <td class="text-center">                                           

      <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改</button>                                           

      </td>

 </tr>

3.2.4 sellerGoodsSpecificationServiceImpl 中添加

// 返回分頁對象 查詢條件

public PageResult search(Integer pageNum, Integer pageSize, Specification specification) {

SpecificationQuery specificationQuery = new SpecificationQuery();

// 判斷查詢條件

if (null != specification.getSpecName()) {

specificationQuery.createCriteria().andSpecNameLike("%" + specification.getSpecName() + "%");

}

// 使用的是angularjs的分頁對象 當前頁肯定有值 每頁數 顯示也有值 不可能是Null

PageHelper.startPage(pageNum, pageSize);

Page<Specification> page = (Page<Specification>) specificationDao.selectByExample(specificationQuery);

return new PageResult(page.getTotal(), page.getResult());

}

3.2.4 managerSpecificationController 中添加

//查詢規格列表  分頁 + 查詢條件

@RequestMapping(value = "/specification/search.do")

public PageResult search(Integer page,Integer rows,@RequestBody Specification specification){

return specificationService.search(page, rows, specification);

}

3.3新增規格

 

 

3.3.1 新增行的實現

修改specificationController.js 新增以下代碼

//新增選項行

$scope.addTableRow=function(){

$scope.entity.specificationOptionList.push({});

}

 specification.html “新建選項”按鈕

<button type="button" class="btn btn-default" title="新建"  ng-click="addTableRow()"><i class="fa fa-file-o"></i> 新建</button>

循環列表行,綁定表格內的編輯框

<tr ng-repeat="pojo in entity.specificationOptionList">

<td>

<input ng-model="pojo.optionName" class="form-control" placeholder="規格選項"/>

</td> 

<td>

<input ng-model="pojo.orders" class="form-control" placeholder="排序"/> 

</td>

<td>

<button type="button" class="btn btn-default" title="刪除"  ng-click="deleTableRow($index)"><i class="fa fa-file-o"></i> 刪除</button>

</td>

</tr>

 

注意:要修改specification.html “新建”按鈕,彈出窗口時對entity進行初始化,否則向集合添加數據時會報錯!

<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={'specificationOptionList':[]}"><i class="fa fa-file-o"></i> 新建</button>

 

 

3.3.2 刪除行的實現

實現思路:在每一行將索引值傳遞給集合,在集合中刪除。

修改specificationController.js 新增以下代碼

//批量選項刪除

$scope.deleTableRow=function(index){

$scope.entity.specificationOptionList.splice(index,1);//刪除

}

修改每行的刪除按鈕

<button type="button" class="btn btn-default" title="刪除"  ng-click="deleTableRow($index)"><i class="fa fa-file-o"></i> 刪除</button>

$index 用於獲取ng-repeat指令循環中的索引。

3.3.3 提交保存

實現思路:我們將規格和規格選項數據合並成一個對象來傳遞,這時我們需要用一個對象將這兩個對象組合起來。在業務邏輯中,得到組合對象中的規格和規格選項列表,插入規格返回規格ID,然后循環插入規格選項。

(1)我們要增加規格選項,必須要知道新增規格的ID,  所以我們在修改pinyougou-dao TbSpecificationMapper.xml ,在insert節點后添加如下配置

  <insert id="insert" parameterType="com.pinyougou.pojo.TbSpecification" >

<selectKey resultType="java.lang.Long" order="AFTER" keyProperty="id">

SELECT LAST_INSERT_ID() AS id

</selectKey>

    insert into tb_specification (id, spec_name)

    values (#{id,jdbcType=BIGINT}, #{specName,jdbcType=VARCHAR})

  </insert>

 

2)在pinyougou-pojo 建立com.pinyougou.pojogroup包,包下建立Specification

/**

 * 規格組合實體類

 * @author lx

 *

 */

public class SpecificationVo implements Serializable{

 

/**

 *

 */

private static final long serialVersionUID = 1L;

//規格對象

private Specification specification;

//規格屬性對象

private List<SpecificationOption> specificationOptionList;

 

(3)修改sellergoodsSpecificationServiceImpl.java

/**

 * 增加

 */

@Override

public void add(SpecificationVo vo) {

//保存規格表 並返回規格的ID

specificationDao.insertSelective(vo.getSpecification());

//保存規格屬性表  多個

List<SpecificationOption> specificationOptionList = vo.getSpecificationOptionList();

for (SpecificationOption specificationOption : specificationOptionList) {

//設置規格表的ID  規格屬性表的外鍵

specificationOption.setSpecId(vo.getSpecification().getId());

 

specificationOptionDao.insertSelective(specificationOption);

}

 

}

 

5)修改managerSpecificationController.java

/**

 * 增加

 * @param specification

 * @return

 */

@RequestMapping("/add")

public Result add(@RequestBody SpecificationVo vo){

try {

specificationService.add(vo);

return new Result(true, "增加成功");

} catch (Exception e) {

e.printStackTrace();

return new Result(false, "增加失敗");

}

}

(6)修改頁面specification.html  

綁定規格名稱

<table class="table table-bordered table-striped"  width="800px">

<tr>

<td>規格名稱</td>

<td>

<input ng-model="entity.specification.specName"  class="form-control" placeholder="規格名稱" >  

</td>

</tr>

 </table>

 

綁定保存按鈕事件

<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button>

3.4修改規格

 

 

3.4.1 獲取規格數據

實現思路:通過規格ID,到后端查詢規格和規格選項列表,然后通過組合實體類返回結果

1)修改pinyougou-sellergoods-serviceSpecificationServiceImpl.java

////通過規格ID 查詢規格表 及規格屬性表結果集

public SpecificationVo findOne(Long id){

SpecificationVo vo = new SpecificationVo();

vo.setSpecification(specificationDao.selectByPrimaryKey(id));

SpecificationOptionQuery query = new SpecificationOptionQuery();

query.createCriteria().andSpecIdEqualTo(id);

vo.setSpecificationOptionList(specificationOptionDao.selectByExample(query));

return vo;

}

 

2)修改pinyougou-manager-webSpecificationController.java

//通過規格ID 查詢規格表 及規格屬性表結果集

@RequestMapping(value = "/findOne.do")

public SpecificationVo findOne(Long id){

return specificationService.findOne(id);

}

 

3)修改頁面specification.html  中列表的修改按鈕

 <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button>   

 

3.4.2 保存修改結果

1)修改pinyougou-sellergoods-serviceSpecificationServiceImpl.java

//修改規格表及規格屬性表

public void update(SpecificationVo vo){

//修改規格表

specificationDao.updateByPrimaryKeySelective(vo.getSpecification());

//刪除規格屬性表

SpecificationOptionQuery query = new SpecificationOptionQuery();

query.createCriteria().andSpecIdEqualTo(vo.getSpecification().getId());

specificationOptionDao.deleteByExample(query);

//再保存規格屬性表

List<SpecificationOption> specificationOptionList = vo.getSpecificationOptionList();

for (SpecificationOption specificationOption : specificationOptionList) {

//設置規格表的ID  規格屬性表的外鍵

specificationOption.setSpecId(vo.getSpecification().getId());

specificationOptionDao.insertSelective(specificationOption);

}

 

}

 

2)修改pinyougou-manager-webSpecificationController.java

//修改

@RequestMapping(value = "/update")

public Result update(@RequestBody SpecificationVo vo){

try {

 

specificationService.update(vo);

return new Result(true,"修改成功");

} catch (Exception e) {

// TODO: handle exception

e.getStackTrace();

return new Result(false,"修改失敗");

}

}

3)修改specificationController.jssave方法

//保存

$scope.save=function(){

var serviceObject;//服務層對象  

if($scope.entity.specification.id!=null){//如果有ID

serviceObject=specificationService.update( $scope.entity ); //修改  

}else{

serviceObject=specificationService.add( $scope.entity  );//增加

}

serviceObject.success(

function(response){

if(response.success){

//重新查詢

              $scope.reloadList();//重新加載

}else{

alert(response.message);

}

}

);

}

3.5刪除規格

實現思路:我們要刪除規格的同時,還要記得將關聯的規格選項刪除掉。

 

 

3.5.1 后端代碼

修改sellergoodsSpecificationServiceImpl.java

/**

 * 批量刪除

 */

@Override

//刪除規格表  刪除規格屬性表

public void delete(Long[] ids){

for (Long id : ids) {

specificationDao.deleteByPrimaryKey(id);

//刪除規格屬性表

SpecificationOptionQuery query = new SpecificationOptionQuery();

query.createCriteria().andSpecIdEqualTo(id);

specificationOptionDao.deleteByExample(query);

}

}

3.5.2 前端代碼

修改pinyougou-manager-webspecification.html

列表的復選框

<input  type="checkbox" ng-click="updateSelection($event,entity.id)">

刪除按鈕

<button type="button" class="btn btn-default" title="刪除" ng-click="dele()" ><i class="fa fa-trash-o"></i> 刪除</button>

 

4.模板管理

4.1 需求及表結構分析

4.1.1 需求分析

首先我們需要理解模板的作用。模板主要有兩個:

1是用於關聯品牌與規格

2定義擴充屬性

4.1.2 表結構分析

tb_type_template  模板表

字段

類型

長度

含義

Id

Bigint

 

主鍵

name

Varchar

80

模板名稱

Spec_ids

Varchar

1000

關聯規格(json格式)

brand_ids

Varchar

1000

關聯品牌(json格式)

custom_attribute_items

Varchar

2000

擴展屬性

 

4.2 模板列表

4.2.1 引入JS

修改type_template.html ,引入JS

<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 type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>

<!-- 分頁組件開始 -->

<script src="../plugins/angularjs/pagination.js"></script>

<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

<!-- 分頁組件結束 -->

<script type="text/javascript" src="../js/base_pagination.js"></script>

<script type="text/javascript" src="../js/angular-select2.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/service/specificationService.js"></script>

<script type="text/javascript" src="../js/controller/baseController.js"></script>

<script type="text/javascript" src="../js/controller/typeTemplateController.js"></script>

4.2.2 放置分頁組件

  <tm-pagination conf="paginationConf"></tm-pagination>

 

4.2.3 sellerGoods TypeTemplateServiceImpl

/**

 * 模板管理

 * @author lx

 *

 */

@Service

public class TypeTemplateServiceImpl implements TypeTemplateService {

 

@Autowired

private TypeTemplateDao typeTemplateDao;

//查詢

public PageResult search(TypeTemplate typeTemplate,Integer pageNum,Integer pageSize){

PageHelper.startPage(pageNum, pageSize);

Page<TypeTemplate> page = (Page<TypeTemplate>) typeTemplateDao.selectByExample(null);

return new PageResult(page.getTotal(), page.getResult());

}

}

4.2.3 TypeTemplateController

/**

 * 模塊管理

 * @author lx

 *

 */

@RestController

public class TypeTemplateController {

 

 

@Reference

private TypeTemplateService typeTemplateService;

//根據條件查詢模板分頁對象

@RequestMapping(value = "/typeTemplate/search.do")

public PageResult search(@RequestBody TypeTemplate typeTemplate,Integer page,Integer rows){

return typeTemplateService.search(typeTemplate, page, rows);

 

}

}

 

4.3 品牌下拉列表

在彈出窗口中有個品牌下拉列表,要求品牌是可以選擇多個,這與我們之前的單選的下拉列表是不同的。我們要想實現這個功能,需要使用select2 組件來完成。

 

 

4.2.1 認識select2

我們來看例子:我們需要的就是這樣可以多選的下拉框

 

 

4.2.2 顯示品牌下拉列表(靜態)

1)修改 type_template.html  引入JS, 上面已經一次性引入過了.這里不用再次操作.

(2)修改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="選擇品牌(可多選)" class="form-control" type="text"/>

multiple 表示可多選

Config用於配置數據來源

select2-model用於指定用戶選擇后提交的變量

最終實現效果如下:

 

 

4.2.3 后端數據支撐

我們現在讓這個下拉列表的數據從數據庫中提取,修改后端代碼

1pinyougou-dao 工程 ,在BrandMapper.xml中添加SQL語句配置

  <select id="selectOptionList"  resultType="java.util.Map" >

    select id,name as text from tb_brand

  </select>

2)在pinyougou-dao BrandMapper中添加方法定義

  List<Map> selectOptionList();

3)修改pinyougou-sellergoods-interface BrandService.java,增加方法定義

/**

 * 品牌下拉框數據

 */

List<Map> selectOptionList();

4)修改sellergoodsBrandServiceImpl.java,增加方法

/**

 * 列表數據

 */

public List<Map> selectOptionList() {

return brandDao.selectOptionList();

}

5)修改managerBrandController.java

@RequestMapping("/selectOptionList")

public List<Map> selectOptionList(){

return brandService.selectOptionList();

}

(6)修改managerbrandService.js

//下拉列表數據

this.selectOptionList=function(){

return $http.get('../brand/selectOptionList.do');

}

 

(7)修改managertypeTemplateController.js

因為我們在模板控制層中需要使用品牌服務層的方法,所以需要添加依賴注入

 //控制層

app.controller('typeTemplateController' ,function($scope,$controller   ,typeTemplateService ,brandService){

使用品牌服務方法實現查詢,結果賦給變量

$scope.brandList={data:[]};//品牌列表

//讀取品牌列表

$scope.findBrandList=function(){

brandService.selectOptionList().success(

function(response){

$scope.brandList={data:response};

}

);

}

 

type_template.html加入下面代碼

<body class="hold-transition skin-red sidebar-mini" 

ng-app="pinyougou" ng-controller="typeTemplateController"  ng-init="findBrandList()">

 

4.4 規格下拉列表

 

 

我們現在讓這個下拉列表的數據從數據庫中提取,修改后端代碼

1pinyougou-dao 工程 ,在SpecificationDao.xml中添加SQL語句配置

<select id="selectOptionList"  resultType="java.util.Map" >

    select id,spec_name as text from tb_specification

</select>

2)在pinyougou-dao SpecificationDao.java中添加方法定義

List<Map> selectOptionList();

3)修改sellergoods SpecificationService.java,增加方法定義

List<Map> selectOptionList();

4)修改sellergoodsSpecificationServiceImpl.java,增加方法

public List<Map> selectOptionList() {

return specificationDao.selectOptionList();

}

5)修改pinyougou-manager-webSpecificationController.java

@RequestMapping("/selectOptionList")

public List<Map> selectOptionList() throws Exception {

return specificationService.selectOptionList();

}

(8)修改managerspecificationService.js 

//下拉列表

this.selectOptionList=function(){

return $http.get('../specification/selectOptionList.do');

}

 

(9)修改managertypeTemplateController.js

因為我們在模板控制層中需要使用規格服務層的方法,所以需要添加依賴注入

 //控制層

app.controller('typeTemplateController' ,function($scope,$controller   ,typeTemplateService,brandService,specificationService){

使用規格服務方法實現查詢,結果賦給變量

$scope.specList={data:[]};//規格列表

 

//讀取規格列表

$scope.findSpecList=function(){

specificationService.selectOptionList().success(

function(response){

$scope.specList={data:response};

}

);

}

 

type_template.html頁面加入下面代碼

<body class="hold-transition skin-red sidebar-mini" 

ng-app="pinyougou" ng-controller="typeTemplateController"  ng-init="findBrandList();findSpecList()">

 

<tr>

<td>關聯規格</td>

<td>

<input select2 select2-model="entity.specIds" config="specList" multiple placeholder="支持多選哦" class="form-control" type="text"/>

</td>

</tr>

 

4.5 擴展屬性

4.5.1 增加行

typeTemplateController.js中新增代碼

//新增擴展屬性行

$scope.addTableRow=function(){

$scope.entity.customAttributeItems.push({});

}

type_template.html中的“新建”按鈕,執行實體的初始化操作

<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={customAttributeItems:[]}"><i class="fa fa-file-o"></i> 新建</button>

修改“新增擴展屬性按鈕”

  <button type="button" class="btn btn-default" title="新增擴展屬性" ng-click="addTableRow()"><i class="fa fa-file-o"></i> 新增擴展屬性</button>

循環表格

<tr ng-repeat="pojo in entity.customAttributeItems">

<td><input type="checkbox" class="icheckbox_square-blue" ></td>

<td><input class="form-control" placeholder="屬性名稱" ng-model="pojo.text"></td>

<td><button type="button" class="btn btn-default" title="刪除" ng-click="deleTableRow($index)"><i class="fa fa-trash-o"></i> 刪除</button></td>

</tr>

 

4.5.2 刪除行

實現思路:在每一行將索引值傳遞給集合,在集合中刪除。

修改typeTemplateController.js新增以下代碼

//刪除擴展屬性行

$scope.deleTableRow=function(index){

$scope.entity.customAttributeItems.splice(index,1);//刪除

}

修改每行的刪除按鈕

<button type="button" ng-click="deleTableRow($index)" class="btn btn-default" title="刪除"><i class="fa fa-trash-o"></i> 刪除</button>

$index 用於獲取ng-repeat指令循環中的索引。

4.6 新增模板

修改type_template.html  ,綁定文本框

<tr>

<td>模板類型</td>

<td><input ng-model="entity.name" class="form-control" placeholder="模板類型">  </td>

</tr>

 

保存按鈕

<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button>

 

4.7 修改模板

修改typeTemplateController.jsfindOne方法

//查詢實體

$scope.findOne=function(id){

typeTemplateService.findOne(id).success(

function(response){

$scope.entity= response;

$scope.entity.brandIds=  JSON.parse($scope.entity.brandIds);//轉換品牌列表

$scope.entity.specIds=  JSON.parse($scope.entity.specIds);//轉換規格列表

$scope.entity.customAttributeItems= JSON.parse($scope.entity.customAttributeItems);//轉換擴展屬性

}

);

}

從數據庫中查詢出來的是字符串,我們必須將其轉換為json對象才能實現信息的回顯。

4.8 刪除模板

修改type_template.html

表格中的復選框

<input  type="checkbox"  ng-click="updateSelection($event,entity.id)">

刪除按鈕

<button type="button" class="btn btn-default" title="刪除" ng-click="dele()">

<i class="fa fa-trash-o"></i> 刪除</button>

 

4.9 優化模板列表的顯示

我們現在完成的列表中都是以JSON格式顯示的,不利於用戶的查詢。

 

 

我們需要將信息以更友好的方式展現出來,如下圖形式

 

 

我們需要將一個json字符串中某個屬性的值提取出來,用逗號拼接成一個新的字符串。這樣的功能比較常用,所以我們將方法寫到baseController.js

//提取json字符串數據中某個屬性,返回拼接字符串 逗號分隔

$scope.jsonToString=function(jsonString,key){

var json=JSON.parse(jsonString);//將json字符串轉換為json對象

var value="";

for(var i=0;i<json.length;i++){

if(i>0){

value+=","

}

value+=json[i][key];

}

return value;

}

頁面上使用該函數進行轉換

 <tr ng-repeat="entity in list">

 <td><input  type="checkbox"  ng-click="updateSelection($event,entity.id)"></td>

<td>{{entity.id}}</td>

 <td>{{entity.name}}</td>

 <td>{{jsonToString(entity.brandIds,'text')}}</td>

 <td>{{jsonToString(entity.specIds,'text')}}</td>  <td>{{jsonToString(entity.customAttributeItems,'text')}}</td>                                                                   

 <td class="text-center">                                           

 <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button>                                           

 </td>

</tr>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM