淘淘商城系列（六）类目选择和富文本编辑器的使用

本文章来自我的博客：http://iclyj.cn/blog/articles/97.html

1.1 分析

商品类目使用的表：tb_item_cat

初始化类目选择：

Easyui的异步tree控件：

 

请求的url：/item/cat/list

请求的参数：id（当前节点的id）

响应的结果：json数据。

[{    

    "id": 1,    

    "text": "Node 1",    

"state": "closed"

 }

{    

    "id": 2,    

    "text": "Node 2",    

"state": "closed"

 }

]

如果当前节点为父节点，state应为“closed”、如果是叶子节点“open”

 

1.2 Dao层

查询tb_item_cat表，根据id查询商品分类列表。可以使用逆向工程。

 

1.3 Service层

1.3.1 分析

接收参数parentId，根据parentId查询分类列表。返回pojo列表。

Pojo应该包含三个属性：

id、text、state

应该放到taotao-common工程中。

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 public  class  EasyUITreeNode {          private  long  id;       private  String text;       private  String state;       public  long  getId() {            return  id;       }       public  void  setId( long  id) {            this .id = id;       }       public  String getText() {            return  text;       }       public  void  setText(String text) {            this .text = text;       }       public  String getState() {            return  state;       }       public  void  setState(String state) {            this .state = state;       }                 }

 

1.3.2 代码实现

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 @Service public  class  ItemCatServiceImpl  implements  ItemCatService {          @Autowired       private  TbItemCatMapper itemCatMapper;               @Override       public  List<EasyUITreeNode> getItemCatList( long  parentId) {            // 根据parentId查询分类列表            TbItemCatExample  example =  new  TbItemCatExample();            //设置查询条件            Criteria criteria = example.createCriteria();            criteria.andParentIdEqualTo(parentId);            //执行查询            List<TbItemCat>  list = itemCatMapper.selectByExample(example);            //转换成EasyUITreeNode列表            List<EasyUITreeNode>  resultList =  new  ArrayList<>();            for  (TbItemCat tbItemCat : list) {                 //创建一个节点对象                 EasyUITreeNode  node =  new  EasyUITreeNode();                 node.setId(tbItemCat.getId());                 node.setText(tbItemCat.getName());                 node.setState(tbItemCat.getIsParent()? "closed" : "open" );                 //添加到列表中                 resultList.add(node);            }            return  resultList;       }    }

 

1.4 Controller

接收参数，parentId。调用Service查询分类类别，返回列表（json数据），需要使用@ResponseBody。

 

请求的url：/item/cat/list

1 <br> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 @Controller @RequestMapping ( "/item/cat" ) public  class  ItemCatController {          @Autowired       private  ItemCatService itemCatService;               @RequestMapping ( "/list" )       @ResponseBody       public  List<EasyUITreeNode> getItemCatList( @RequestParam (value= "id" , defaultValue= "0" )Long parentId) {            List<EasyUITreeNode> list = itemCatService.getItemCatList(parentId);            return  list;       }         }

 

1 富文本编辑器的使用

1.1 使用方法

第一步：从KindEditor的官方网站下载源码。http://kindeditor.net/demo.php

第二步：解压缩，把js源码添加到工程中。

第三步：把kindeditor-all-min.js引入到jsp中

第四步：把kindEditor的语言包引入到jsp

第五步：创建一个textArea控件，作为富文本编辑器的数据源。

第六步：编写js代码初始化KindEditor控件。需要指定textArea控件。

第七步：在提交表单之前，先把富文本编辑器中的内容同步到textArea控件中。

Sync（）方法实现。

 

1.2 流行的编辑器

1、 KindEditor

2、 http://ueditor.baidu.com/website/

3、 Ckeditor       http://ckeditor.com/