1. 程式人生 > >jQuery-easyUI的使用:tree的使用

jQuery-easyUI的使用:tree的使用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP '014_tree.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css" />
    <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
                
            var flag ; //判斷執行儲存還是修改的方法
            $(function(){
                $('#t1').tree({
                        //傳送非同步ajax請求, 還會攜帶一個id的引數

                        url:'ResourceServlet?method=loadTree' ,

//第一次不帶引數,以後非同步載入的時候傳送id,以此獲取孩子

                        dnd:true ,//拖拽

                        onDrop:function(target , source , point){

//target表哪個、source表誰被拖了、point表 方式(append、top、bottom)

                                var tar = $('#t1').tree('getNode' , target);
                                //console.info(tar);
                                //console.info(source);
                                //console.info(point);
                                $.ajax({
                                    type:'post',
                                    url:'ResourceServlet?method=changeLevel' ,
                                    data:{
                                        targetId:tar.id ,
                                        sourceId:source.id ,
                                        point:point

                                    } ,
                                    dataType:'json' ,
                                    cache:false ,
                                    success:function(result){
                                        $.messager.show({
                                            title:'提示資訊' ,
                                            msg:'操作成功!'
                                        });
                                    }
                                });
                        } ,
                        onContextMenu: function(e,node){
                                //禁止瀏覽器的選單開啟
                                e.preventDefault();

                                $(this).tree('select',node.target);
                                $('#mm').menu('show', {
                                    left: e.pageX,
                                    top: e.pageY
                                });
                        }
                });
                
                
                //儲存和修改按鈕
                $('#savebtn').click(function(){
                            if(flag == 'add'){
                                        //1 做前臺更新   
                                        //    (1)獲取所選中的節點,也就是父節點
                                        var node = $('#t1').tree('getSelected');
                                        //  (2)呼叫追加節點的方法
                                        $('#t1').tree('append' , {
                                            parent:node.target ,
                                            data:[{
                                                text: $('#myform').find('input[name=name]').val() ,
                                                attributes:{
                                                    url:$('#myform').find('input[name=url]').val()
                                                }
                                            }]
                                        });
                                        
                                        //2 後臺同步更新
                                        $.ajax({
                                            type:'post' ,
                                            url:'ResourceServlet?method=save' ,
                                            cache:false ,
                                            data:{
                                                parentId:node.id ,
                                                name:$('#myform').find('input[name=name]').val() ,
                                                url:$('#myform').find('input[name=url]').val()
                                            } ,
                                            dataType:'json' ,
                                            success:function(result){
                                                //重新整理節點
                                                var parent = $('#t1').tree('getParent' , node.target);
                                                $('#t1').tree('reload',parent.target);
                                                
                                                $.messager.show({
                                                    title:'提示資訊',
                                                    msg:'操作成功!'
                                                });
                                            }
                                        });
                                        //3 關閉dialog
                                        $('#mydiv').dialog('close');
                            } else {
                                        $.ajax({
                                            type:'post' ,
                                            url:'ResourceServlet?method=update' ,
                                            cache:false ,
                                            data:{
                                                id:$('#myform').find('input[name=id]').val() ,
                                                name:$('#myform').find('input[name=name]').val() ,
                                                url:$('#myform').find('input[name=url]').val()
                                            } ,
                                            dataType:'json' ,
                                            success:function(result){
                                                //重新整理節點 (一定是選中節點的父級節點)
                                                var node = $('#t1').tree('getSelected');
                                                var parent = $('#t1').tree('getParent' ,node.target);
                                                $('#t1').tree('reload',parent.target);
                                                
                                                //給出提示資訊
                                                $.messager.show({
                                                    title:'提示資訊',
                                                    msg:'操作成功!'
                                                });
                                            }
                                        });
                                        //3 關閉dialog
                                        $('#mydiv').dialog('close');
                                        
                            }

                            

                });
                
                
                //取消按鈕
                $('#cancelbtn').click(function(){
                        $('#mydiv').dialog('close');
                });
                
                
                
            });
            
            
            function append(){
                    flag = 'add';
                    $('#mydiv').dialog('open');
            }
            
            function editor(){
                    flag = 'edit';
                    //清空表單資料 ,重新填充選中的節點裡的id ,name , url屬性
                    $('#myform').form('clear');
                    var node = $('#t1').tree('getSelected');
                    $('#myform').form('load',{
                        id:node.id ,
                        name:node.text ,
                        url:node.attributes.url//額外的都放在attributes裡面
                    });
                    //開啟dialog
                    $('#mydiv').dialog('open');
            }
            
            function remove(){
                    //前臺刪除
                    var node = $('#t1').tree('getSelected');
                    $('#t1').tree('remove' , node.target);
                    
                    //後臺刪除
                    $.post('ResourceServlet?method=delete' , {id:node.id} , function(reuslt){
                                //給出提示資訊
                                $.messager.show({
                                    title:'提示資訊',
                                    msg:'操作成功!'
                                });
                    });
            }

    </script>
    
  </head>
 
  <body>
          <ul id="t1"></ul>
          <div id="mydiv" title="設定許可權" class="easyui-dialog" style="width:300px;" closed=true >
                  <form id="myform" method="post">
                              <input type="hidden" name="id" value="" />
                              <table>
                                  <tr>
                                      <td>許可權名稱:</td>
                                      <td><input type="text" name="name" value=""/></td>
                                  </tr>
                                  <tr>
                                      <td>url:</td>
                                      <td><input type="text" name="url" value=""/></td>
                                  </tr>
                                  <tr align="center"  >
                                      <td colspan="2"  >
                                          <a id="savebtn" class="easyui-linkbutton">確定</a>
                                          <a id="cancelbtn"  class="easyui-linkbutton">取消</a>
                                      </td>
                                  </tr>                                                                    
                              </table>
                  </form>    
          </div>
          
          
        <div id="mm" class="easyui-menu" style="width:150px;">
            <div onclick="append()">Append</div>
            <div onclick="editor()">editor</div>
            <div onclick="remove()">Remove</div>
        </div>          
  </body>

</html>

後臺程式碼

/**
     * 載入tree的資料方法
     * @param request
     * @param response
     */
    private void loadTree(HttpServletRequest request,
            HttpServletResponse response) {
        try {
                //獲取當前展開的節點id
                String id = request.getParameter("id");
                List<TreeDTO> treelist = this.rdao.getChildrenByParentId(id);
                response.setContentType("text/html;charset=utf-8");
                response.getWriter().write(JSONArray.fromObject(treelist).toString());
            
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

/**
     * 根據父id獲取子節點們
     */
    public List<TreeDTO> getChildrenByParentId(String id) throws Exception {
        Connection conn = DBUtils.createConn();
        String sql = "";
        if("".equals(id) || id == null){
            sql = "select * from resource where parent_id = 999999";
        } else {
            sql = "select * from resource where parent_id = " + id ;
        }

        PreparedStatement ps = DBUtils.getPs(conn, sql);
        ResultSet rs = ps.executeQuery();
        
        List<Resource> rlist = new ArrayList<Resource>();
        while(rs.next()){
            Resource r = new Resource();
            r.setId(rs.getInt("id"));
            r.setIcon(rs.getString("icon"));
            r.setChecked(rs.getInt("checked"));
            r.setName(rs.getString("name"));
            r.setUrl(rs.getString("url"));
            r.setParent_id(rs.getInt("parent_id"));
            rlist.add(r);
        }
        
        List<TreeDTO> tlist = new ArrayList<TreeDTO>();
        for (Iterator iterator = rlist.iterator(); iterator.hasNext();) {
            Resource resource = (Resource) iterator.next();
            TreeDTO tree = new TreeDTO();
            tree.setId(resource.getId());
            tree.setText(resource.getName());
            tree.setChecked(resource.getChecked());
            tree.setIconCls(resource.getIcon());
            tree.setParent_id(resource.getParent_id());
            if(getChildren(resource.getId()).size() > 0){
                tree.setState("closed");
            } else {
                tree.setState("open");
            }
            Map<String, Object>  map = new HashMap<String, Object>();
            map.put("url", resource.getUrl());
            tree.setAttributes(map);
            tlist.add(tree);
        }
        
        

        
        
        return tlist;
    }


    
    
    /**
     * 根據pid 獲取孩子
     * @param pid
     * @return
     * @throws Exception
     */
    public List<Resource> getChildren(int pid) throws Exception{
        Connection conn = DBUtils.createConn();
        String sql = "select * from resource where parent_id = " + pid;
        PreparedStatement ps = DBUtils.getPs(conn, sql);
        ResultSet rs = ps.executeQuery();
        
        List<Resource> children = new ArrayList<Resource>();
        while(rs.next()){
            Resource r = new Resource();
            r.setId(rs.getInt("id"));
            r.setIcon(rs.getString("icon"));
            r.setChecked(rs.getInt("checked"));
            r.setName(rs.getString("name"));
            r.setUrl(rs.getString("url"));
            r.setParent_id(rs.getInt("parent_id"));
            children.add(r);
        }        
        
        
        return children;
    }
   

/**
     * 改變節點的層次結構方法  
     * @param request
     * @param response
     */
    private void changeLevel(HttpServletRequest request,
            HttpServletResponse response) {
        try {
            
            String targetId = request.getParameter("targetId");
            String sourceId = request.getParameter("sourceId");
            String point    = request.getParameter("point");
            //得到目標物件
            Resource  target = this.rdao.findById(Integer.parseInt(targetId));
            //得到操作的物件(源物件)
            Resource  source = this.rdao.findById(Integer.parseInt(sourceId));
            // append  top bottom
            if("append".equals(point)){
                source.setParent_id(target.getId());
            } else {
                source.setParent_id(target.getParent_id());
            }
            this.rdao.update(source);

            
        } catch (Exception e) {
                e.printStackTrace();
        }
    }

    /**
     * 遞迴刪除節點們
     * @param id
     */
    private void deletenodes(int id) throws Exception{
        //獲取當前要刪除的節點下面所有的孩子
        List<Resource> rlist = this.rdao.getChildren(id);
        for(int i = 0 ; i < rlist.size();i++){
                    int cid = rlist.get(i).getId();
                    this.rdao.delete(cid);    //刪除操作
                    deletenodes(cid);

        }
        this.rdao.delete(id);
    }