easyui Tree

来源：互联网发布：液晶电视怎么连接网络编辑：程序博客网时间：2024/05/29 10:31

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

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(){     //获取所有选中节点的idvar 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" onclick="newUser()">新增角色</a>            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑角色</a>            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="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 onchange="$('#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" onclick="saveUpdate()">保存编辑</a>            <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="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{@Overrideprotected 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以字符串拼接的方式传给后台处理。

阅读全文

0 0