easyui 之 tree的用法

最新推荐文章于 2024-04-28 12:02:40 发布

天水一欢

最新推荐文章于 2024-04-28 12:02:40 发布

阅读量654

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_40263927/article/details/90141318

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

很多时候我们组织结构需要用树的形式来展示，这个时候可以利用easyui 的tree控件。效果如下：

产品的需求总是不断的变化，需要对树进行增、删、改

代码如下：

1.前端代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="../js/easyui-1.5.1/jquery.min.js"></script>
       <script src="../js/easyui-1.5.1/jquery.easyui.min.js"></script>
       <script src="../js/easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
       <link href="../js/easyui-1.5.1/themes/default/easyui.css" rel="stylesheet" />
       <link href="../js/easyui-1.5.1/themes/icon.css" rel="stylesheet" />
       <style>
           #top_layout{
               height: 200px;
               line-height: 200px;
               background: url(image/top1.jpg) top center no-repeat ;
               background-size:100% 100%;
           }

           #top_layout > div{
               width: 300px;
               height: 60px;
               font-size: 30px;
               color: white;
               font-weight: 700px;
               text-align: center;
               margin: 0 auto;
           }

           #center_layout div {
               height: 100%;
               width: 100%;
           }
       </style>
   </head>
   <body class="easyui-layout">
<div id="top_layout" data-options="region:'north'">
   <div>千里之行，始于足下</div>
</div>
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west'" style="width:180px">
   <ul id="tt"></ul>
</div>
<div id="center_layout" data-options="region:'center'">
   <div id="tab_layout" class="easyui-tabs">
               <div title="职位申请" >
               tab1
               </div>
               </div>

</div>
</div>
</div>
<div id="mm" class="easyui-menu" style="width:120px;">
       <div id="add" οnclick="treeManager.add()" data-options="iconCls:'icon-add'" >新增</div>
       <div οnclick="treeManager.remove()" data-options="iconCls:'icon-remove'">删除</div>
       <div οnclick="treeManager.edit()" data-options="iconCls:'icon-edit'">修改</div>
   </div>

       });
   /**
   * 管理类
   */
   function treeManager(){
       /**新增*/
       this.add=function(){
           $.messager.prompt('新增节点', '请输入节点名称：', function(r){
                   if (r){
                       if(currentNode){
                           var param = {};
                           param.name=r;
                           param.id=currentNode.id;
                           param.pId = currentNode.parentId;
                           param.type=currentNode.attributes.type;
                           var url="http://localhost:8082/springmvc2/hello/addTree.do";
                           subimtJsonData(param,url,function(data){
                               console.log(data);
                               $('#tt').tree('reload');
                               if(data.success){
                                   //TODO
                               }else{
                                   $.messager.alert('温馨提示',data.message);
                               }
                           });
                       }

                   }
               });
       },
       /**修改*/
       this.edit=function(){
           $('#tt').tree('beginEdit', currentNode.target);
       },
       /**修改*/
       this.remove=function(){
           $.messager.confirm('确认','您确认想要删除记录吗？',function(r){
               if (r){
                   $('#tt').tree('remove', currentNode.target);
               var param = {};
                       param.id=currentNode.id;
                       param.type=currentNode.attributes.type;
                       var url="http://localhost:8082/springmvc2/hello/delTree.do";
                       subimtJsonData(param,url,function(data){
                           $('#tt').tree('reload');
                           if(data.success){
                               //TODO
                           }else{
                               $.messager.alert('温馨提示',data.message);
                           }
                       });
               }
               });

       }

   }
   var treeManager=new treeManager();

   /**
       * 提交添加节点数据
       * @param {Object} json
       */
       function subimtJsonData(json,url,callback){
           $.ajax({

type: "POST",

url:url,

dataType: "json",

data: {name:json.name,id:json.id,pId:json.pId,type:json.type},

success: function (data) {
   if(callback) callback(data);

}
});
       }
</script>
</body>
</html>

2.后端代码

/**
   * 递归得到部门职位树
   * @param id
   * @return
   */
   public List<EasyTree> getTreeNodes(int id) {
       List<EasyTree> childs=new ArrayList<EasyTree>();
       List<Map<String,Object>> depTrees=treeDao.getDepTreeNodes(id);
       if(depTrees==null || depTrees.size()==0){
           List<Map<String,Object>> jobTrees=treeDao.getJobTreeNodes(id);
           if(jobTrees!=null && jobTrees.size()>0){
               for(Map map:jobTrees){
                   EasyTree easyTree=new EasyTree();
                   easyTree.setId(String.valueOf(map.get("id")));
               easyTree.setParentId(String.valueOf(map.get("depId")));
               easyTree.setText(StrUtil.nullToStr(map.get("jobName")));
               easyTree.setIconCls("icon-man");
               TreeAttributes atrributes=new TreeAttributes();
               atrributes.setType(0);
               easyTree.setAttributes(atrributes);
               childs.add(easyTree);
               }
           }

       }else{
           for(Map map:depTrees){
               EasyTree easyTree=new EasyTree();
               easyTree.setId(String.valueOf(map.get("id")));
           easyTree.setParentId(String.valueOf(map.get("pid")));
           easyTree.setText(StrUtil.nullToStr(map.get("department")));
           easyTree.setIconCls("icon-print");
           TreeAttributes atrributes=new TreeAttributes();
           atrributes.setType(1);
           easyTree.setAttributes(atrributes);
           easyTree.setChildren(getTreeNodes((Integer)map.get("id")));
           childs.add(easyTree);
           }
       }

       return childs;
   }

天水一欢

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
easyui 之 tree的用法

很多时候我们组织结构需要用树的形式来展示，这个时候可以利用easyui 的tree控件。效果如下：产品的需求总是不断的变化，需要对树进行增、删、改代码如下：1.前端代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8">...
复制链接

扫一扫

专栏目录