easyui Tree

最新推荐文章于 2022-07-10 22:35:56 发布

w_t_y_y

最新推荐文章于 2022-07-10 22:35:56 发布

阅读量354

点赞数

分类专栏：前端常用插件

本文链接：https://blog.csdn.net/w_t_y_y/article/details/78703062

版权

前端常用插件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果如下，树以复选框的形式呈现。

1、前台：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>    
<head>    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
    <meta name="keywords" content="jquery,ui,easy,easyui,web">    
    <meta name="description" content="easyui help you build your web page easily!">    
    <title>jQuery EasyUI CRUD Demo</title>    
    <link rel="stylesheet" type="text/css" href="assets/themes/default/easyui.css">    
    <link rel="stylesheet" type="text/css" href="assets/themes/icon.css">    
    <style type="text/css">    
        #fm{    
            margin:0;    
            padding:10px 30px;    
        }    
        .ftitle{    
            font-size:14px;    
            font-weight:bold;    
            color:#666;    
            padding:5px 0;    
            margin-bottom:10px;    
            border-bottom:1px solid #ccc;    
        }    
        .fitem{    
            margin-bottom:5px;    
        }    
        .fitem label{    
            display:inline-block;    
            width:80px;    
        }    
    </style>    
    <script type="text/javascript" src="assets/jquery.min.js"></script>    
    <script type="text/javascript" src="assets/jquery.easyui.min.js"></script>    
    <script type="text/javascript">    
        var url;    
        $(function(){
        	$("#tt").tree({     //选中子节点，父节点一定选中
                checkbox: true,
                cascadeCheck: false,
                onCheck: function (node, checked) {
                  if (checked) {
                    var parentNode = $("#tt").tree('getParent', node.target);
                    if (parentNode != null) {
                      $("#tt").tree('check', parentNode.target);
                    }
                  } else {
                    var childNode = $("#tt").tree('getChildren', node.target);
                    if (childNode.length > 0) {
                      for (var i = 0; i < childNode.length; i++) {
                        $("#tt").tree('uncheck', childNode[i].target);
                      }
                    }
                  }
                }
              });
        })
       
        
      //编辑
        function editUser(){    
            var row = $('#dg').datagrid('getSelected');    
            if (row){    
                 $('#dlg1').dialog('open').dialog('setTitle','编辑角色');    
                $('#fm1').form('load',row);    
                $(".uprolename").val(row.name);  
                $(".berolename").val(row.name);
                url = 'updaterole?id='+row.id;    
            }    
        }   
        function getChecked(){     //获取所有选中节点的id
			var nodes = $('#tt').tree('getChecked');
			var s = '';
			for(var i=0; i<nodes.length; i++){
				if (s != '') s += ',';
				s += nodes[i].id;
			}
			alert(s);
			return s;
		}
        function saveUpdate(){  
        	var chmenu=getChecked();
        	$(".upmenu").val(chmenu);
            $('#fm1').form('submit',{    
                url: url,    
                onSubmit: function(){    
                    return $(this).form('validate');    
                },    
                success: function(result){    
                    alert(result);    
                  // var result = eval('('+result+')');    
                    if (result.endsWith("成功")){    
                        $('#dlg1').dialog('close');      // close the dialog    
                        $('#dg').datagrid('reload');    // reload the user data    
                    } else {    
                        $.messager.show({    
                            title: 'Error',    
                            msg: result.msg    
                        });    
                    }    
                }    
            });    
        }    
        
       
    </script>    
</head>    
<body>    
      
        
    <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"    
            url="role"    
            toolbar="#toolbar" pagination="true"    
            rownumbers="true" fitColumns="true" singleSelect="true">    
        <thead>    
            <tr>    
               <th data-options="field:'name'">角色名称</th> 
            </tr>    
        </thead>    
    </table>    
    <div id="toolbar">    
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">新增角色</a>    
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">编辑角色</a>    
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="removeUser()">删除角色</a>    
      </div>  
     
    
    <!-- 编辑角色 -->
    <div id="dlg1" class="easyui-dialog" style="width:600px;height:560px;padding:10px 20px"    
            closed="true" buttons="#dlg-buttons">    
        <div class="ftitle">编辑角色信息</div>    
        <form id="fm1" method="post" novalidate>    
            <div class="fitem">    
                <label>角色名称</label>    
                <input name="uprolename" id="uprolename" class="easyui-validatebox uprolename" required="true">  
                <input name="berolename" id="berolename" class="easyui-validatebox berolename" type="hidden">    
                <input name="upmenu" id="upmenu" class="easyui-validatebox upmenu" type="hidden">      
            </div>    
            <div>分配权限</div>
            <!-- 权限菜单树 -->
            <div style="margin:10px 0">
		<!-- <input type="checkbox" checked οnchange="$('#tt').tree({cascadeCheck:$(this).is(':checked')})" type="hidden">CascadeCheck  -->
		
	</div>
	<div class="easyui-panel" style="padding:5px">
		<ul id="tt" class="easyui-tree" data-options="url:'getrolemenu',method:'get',animate:true,checkbox:true"></ul>
	</div>
            <!-- 权限菜单树结束 -->
        </form>    
    </div>    
    <div id="dlg-buttons">    
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveUpdate()">保存编辑</a>    
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')">Cancel</a>    
    </div>    
    <!-- 编辑角色结束 -->
</body>    
</html>

绿色代码段为和树相关的代码，看下后台：

2、

（1、）实体类：

用easyui加载树，需要树的属性有id，text（即显示的文本信息），children（子节点）。

package com.ifytek.domain;

import java.util.ArrayList;
//角色菜单
public class Menu1 {
	private int id;
	private int pid;
	private String text;
	private ArrayList<Menu1> children = new ArrayList<>();
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public int getPid() {
		return pid;
	}
	public void setPid(int pid) {
		this.pid = pid;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public ArrayList<Menu1> getChildren() {
		return children;
	}
	public void setChildren(ArrayList<Menu1> children) {
		this.children = children;
	}
}

（2、）servlet：

package com.ifytek.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.ifytek.domain.Message;
import com.ifytek.service.RoleService;

import sun.print.resources.serviceui;

@WebServlet("/updaterole")
public class UpdateRoleServlet extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	req.setCharacterEncoding("utf-8");  
    resp.setContentType("text/html;charset=utf-8");
    int id=Integer.parseInt(req.getParameter("id"));
    //改后的名字：
    String uprolename=req.getParameter("uprolename");
    //改之前的名字：
    String berolename=req.getParameter("berolename");
    //分配的权限的id
    String ids=req.getParameter("upmenu");
    RoleService service=new RoleService();
    Message message=service.assignRole(id,uprolename,berolename,ids);
    resp.getWriter().write(message.getMsg());
}
}

（3、）service:

public Message assignRole(int id, String uprolename, String berolename, String ids) {
		Message message=new Message();
		RoleDao dao=new RoleDao();
		Role role=null;
		int a=-1;
		if(!berolename.equals(uprolename)){
			//名字改了
			role=checkRoleByName(uprolename);
			if(role!=null && role.getId()>=0){
				//
				message.setCode(300);
				message.setMsg("改角色名称已存在");
				message.setRes(false);
				return message;
			}else{
				a=dao.updateRoleNameByName(berolename,uprolename);
			}
		}
		
		int maxid=getRolemenuMaxId();
		a=dao.assignRole(id,ids,maxid);
		if(a>=0){
			message.setCode(200);
			message.setMsg("分配角色成功");
			message.setRes(true);
		}else{
			message.setCode(300);
			message.setMsg("清除角色成功");
			message.setRes(false);
		}
		return message;
	}

（4、）dao:

public int assignRole(int id, String ids,int maxid) {
		Session session=HibernateUtil.getSessionFactory().openSession();
		Transaction transaction=session.getTransaction();
		transaction.begin();
		int a=-1;
		try{
			//先删除已经分配的角色
			String hql="delete from RoleMenu r where r.rid=?";
			Query query=session.createQuery(hql);
			query.setInteger(0, id);
			query.executeUpdate();
			//再添加权限
			String[] mids=ids.trim().split(",");
			if(mids.length>0){
				for(String ms:mids){
					maxid+=1;
					try{
						int mid=Integer.parseInt(ms);
						RoleMenu roleMenu=new RoleMenu();
						roleMenu.setId(maxid);
						roleMenu.setMid(mid);
						roleMenu.setRid(id);
						session.save(roleMenu);
						a=1;
						
					}catch (Exception e) {
						a=-1;
						break;
					}
				}
				
			}else{
				a=1;
			}
			
			transaction.commit();
		}catch (Exception e) {
			a=-1;
			transaction.rollback();
		}
		session.close();
		return a;
	}

总体思想就是先遵循easyui tree的实体规范，属性包含id、text、childen，在前台异步加载树，然后把选中节点的id以字符串拼接的方式传给后台处理。

w_t_y_y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
easyui Tree

效果如下，树以复选框的形式呈现。1、前台：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> jQuery EasyUI CRUD Demo
复制链接

扫一扫