富文本编辑器之easyui的tree的动态数据(一)

来源：互联网发布：大唐软件官网编辑：程序博客网时间：2024/06/05 20:04

第一步引入富文本编辑器的js文件

第二步编写form表单

</div>

第三步编写selectItemCat的js代码

   init : function(data){
       // 初始化选择类目组件
       this.initItemCat(data);
    }

// 初始化选择类目组件
    initItemCat : function(data){
       $(".selectItemCat").each(function(i,e){
           var _ele = $(e);
           if(data && data.cid){
               _ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
           }else{
               _ele.after("<span style='margin-left:10px;'></span>");
           }
           _ele.unbind('click').click(function(){
               $("<div>").css({padding:"5px"}).html("<ul>")
               .window({
                   width:'500',
                    height:"450",
                    modal:true,
                    closed:true,
                    iconCls:'icon-save',
                    title:'选择类目',
                    onOpen : function(){
                       var _win = this;
                       $("ul",_win).tree({
                           url:'/item/cat/list',
                           animate:true,
                           onClick : function(node){
                               if($(this).tree("isLeaf",node.target)){
                                   // 填写到cid中
                                   _ele.parent().find("[name=cid]").val(node.id);
                                   _ele.next().text(node.text).attr("cid",node.id);
                                   $(_win).window('close');
                                   if(data && data.fun){
                                       data.fun.call(this,node);
                                   }
                               }
                           }
                       });
                    },

------------------------------------------------前台编写完毕------------------------------------------------------------------

poji类

ItemCat

public class ItemCat implements Serializable{
    private Long id;

    private Long parentId;

    private String name;

    private Integer status;

    private Integer sortOrder;

    private Boolean isParent;

    private Date created;

    private Date updated;

}

前台传递的参数的包装vo类

public class EasyUITreeNode implements Serializable{

   private long id;   //父节点id
   private String text;       //内容
   private String state;       //子节点状态,closed :表示还有子节点,open表示没有子节点

}

数据库样式

Controller

@Controller
public class TreeController {

   @Autowired
   private TreeService treeService;

   @RequestMapping("/item/cat/list")
   @ResponseBody
   public List<EasyUITreeNode> findItemCatList(@RequestParam(value="id",defaultValue="0") Long parentId){
       List<EasyUITreeNode> results = treeService.getItemCatList(parentId);
       return results;
   }

}

service

public interface TreeService {

List<EasyUITreeNode> getItemCatList(Long parentId);

}

service实现类

@Service
@Transactional
public class TreeServiceImpl implements TreeService {

   @Autowired
   private TreeMapper treeMapper;

   @Override
   public List<EasyUITreeNode> getItemCatList(Long parentId) {
       //通过父id查询出所有Itemcat
       List<ItemCat> itemCats = treeMapper.getItemCatList(parentId);

       List<EasyUITreeNode> easyUITreeNodes = new ArrayList<>();

       for (ItemCat itemCat : itemCats) {

           EasyUITreeNode node = new EasyUITreeNode();

           node.setId(itemCat.getId());
           node.setText(itemCat.getName());
           node.setState(itemCat.getIsParent()?"closed":"open");

           easyUITreeNodes.add(node);
       }
       return easyUITreeNodes;
   }

}

mapper接口

public interface TreeMapper {

List<ItemCat> getItemCatList(Long parentId);

}

mapper的映射文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.taotao.mapper.tree.TreeMapper">
   <select id="getItemCatList" parameterType="Long" resultType="com.taotao.pojo.item.ItemCat">
       select * from itemCat
       <where>
           parentId=#{id}
       </where>

   </select>
</mapper>

-----------------------------------------------------------------------------(完)-----------------------------------------------------------------------

阅读全文

0 0