树结构ztree的 ajax交互的简单使用

  今天做前端页面要用到树结构,用了第三方插件ztree,搞了好久不过终于弄出来了,, 一点小心得。(用的版本 V3 )

首先看下载的文件结构:

  一:将要用到的CSS 和 JS 拷贝到工程中,我这里在工程中建一个文件夹ztreeStyle专门放ztree插件所需要的文件,里面可能有些文件用不上吧,但是我也不去深究了 刚接触  以后有时间在慢慢细化吧!

 

  二:下面是action代码了,,非常之简单一目了然。

    //此方法是当第一次进页面的时候为父节点赋值,   为了测试里面写的都是些死数据,
    @RequestMapping(value="/ztree/ztreeTestget",method=RequestMethod.GET)
    public String ztreeTestget(HttpServletResponse response,HttpServletRequest request,ModelMap model) throws Exception{
        System.out.println("进来了进来了进来了进来了进来了进来了进来了进来了进来了进来了进来了");
        List<PartyCategory > li=new ArrayList<PartyCategory>();
        PartyCategory pp=new PartyCategory();
        pp.setId(1);        //id
        pp.setParentId(0);  //父ID
        pp.setName("哈哈");                

        PartyCategory ppp=new PartyCategory();
        ppp.setId(2);
        ppp.setParentId(0);
        ppp.setName("呵呵");

        PartyCategory pppp=new PartyCategory();
        pppp.setId(3);
        pppp.setParentId(0);
        pppp.setName("嘿嘿");

        li.add(pp);
        li.add(ppp);
        li.add(pppp);
        model.addAttribute("li", li);

        return "ZtreeTest";
    }

    //次方法当点根节点的时候进去然后返回子节点数据 , 为了测试ajax输出返回的是手写的死数据
    @RequestMapping(value="/ztree/ztreeTest",method=RequestMethod.POST)
    public void ztreeTest(String id,HttpServletResponse response,HttpServletRequest request) throws Exception{
        request.setCharacterEncoding("gb2312");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter pw = response.getWriter();
        pw.write("[{\"id\":4,\"pId\":0,\"name\":\"" +11111+"\"},{\"id\":5,\"pId\":0,\"name\":\"" +22222+"\"}]");
    }

  三:下面是jsp,基本上自己没写什么就是从下载的插件里有demo页面代码拷贝过来就基本OK了  就是稍微的改动一些代码,自己加了少许的代码,,

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
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 ‘addPost.jsp‘ starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="description" content="This is my page">
  </head>
  <script type="text/javascript" src="${ctx }/res/js/jquery-1.9.1.min.js"></script>
      <link rel="stylesheet" href="${ctx }/res/ztreeStyle/css/demo.css" type="text/css">
    <link rel="stylesheet" href="${ctx }/res/ztreeStyle/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="${ctx }/res/ztreeStyle/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${ctx }/res/ztreeStyle/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${ctx }/res/ztreeStyle/js/jquery.ztree.excheck-3.5.js"></script>

<SCRIPT type="text/javascript">

        var setting = {
            async: {
                enable: true,
                url:"${ctx}/ztree/ztreeTest", //没点击一次节点AJAX 都会与此路径交互一次
                autoParam:[ "id", "name" ], //ajax提交的时候,传的是id值
                otherParam:{"chk":"chk"},
                dataFilter: dataFilter
            },
            check: {
                enable: true,
                autoCheckTrigger: true
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey : "id", // id编号命名
                    pIdKey : "pId", // 父id编号命名
                    rootPId : 0
                }
            },
            callback: {
                onCheck: onCheck,
                onAsyncSuccess: onAsyncSuccess
            }
        };

        function dataFilter(treeId, parentNode, childNodes) {
            if (parentNode.checkedEx === true) {
                for(var i=0, l=childNodes.length; i<l; i++) {
                    childNodes[i].checked = parentNode.checked;
                    childNodes[i].halfCheck = false;
                    childNodes[i].checkedEx = true;
                }
            }
            return childNodes;
        }
        function onCheck(event, treeId, treeNode) {
            cancelHalf(treeNode)
            treeNode.checkedEx = true;
        }
        function onAsyncSuccess(event, treeId, treeNode, msg) {
            cancelHalf(treeNode);
        }
        function cancelHalf(treeNode) {
            if (treeNode.checkedEx) return;
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            treeNode.halfCheck = false;
            zTree.updateNode(treeNode);
        }
        var zNodes =[
                //这里我用到了jstl表达式forEach循环,循环的就是
                //后台request作用域里存放的数据,而这里就是首次加载页面是树显示的根节点
                <c:forEach items="${li}" var="abc" varStatus="vs">
                    { id:"${abc.id}", pId:"${abc.parentId}", name:"${abc.name}", isParent:true},
                 </c:forEach>
                 ];              

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

        //获取节点复选框的值
        function onCheck(e,treeId,treeNode){
            var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
            id="";
            for(var i=0;i<nodes.length;i++){
            v+=nodes[i].name + ",";
            id+=nodes[i].id + ",";
            // alert(nodes[i].id); //获取选中节点的值
           }
            alert(id);              //获取选中节点的值
            $("#myid").val(id);
         }

</SCRIPT>

  <body>
  <hr/>
  <input type="text" id="myid" />
     <br/>
     <form action="" method="post">
         <div class="content_wrap">
             <div  class="zTreeDemoBackground left">
                <ul id="treeDemo" name="trees" class="ztree"></ul>
            </div>
        </div>
        <input type="submit" value="form提交">
    </form>
——————————————————————————————————————————————————————————————————————————————————————————————————————
    <h1><a href="${ctx }/ztree/ztreeTestget">测试</a></h1>

  </body>
</html>

此时已经结束了,,简单的一棵ajax请求的树已经实现,,

时间: 2024-10-07 17:09:27

树结构ztree的 ajax交互的简单使用的相关文章

ajax交互数据简单拼装,数组成字符串

json2Form:function(json) { var str = ""; for(var p in json){ // 判断对象是否为数组 if(typeof json[p]=="object"){ var m=String(p) for(var i=0;i<json[p].length;i++){ for(var x in json[p][i]){ str+=m+"["+i+"]"+"["+

【Servlet】Servlet3.0与纯javascript通过Ajax交互

这是一个老生常谈的问题,对于很多人来说应该很简单.不过还是写写,方便Ajax学习的后来者.虽然js.html是一个纯静态的页面,但是以下的程序必须挂在Tomcat服务器上,才能做到Ajax交互,否则看不出效果的.Eclipse for javaee注意把做好的工程挂在Tomcat上,才运行Tomcat.本工程除了JSP必须的Servlet包以外,无须引入其它东西.其实想直接用一个JSP页面完成这个工程的,但是现在搞JSP的,基本上没有人直接在.jsp文件中写东西了吧?后台动作都扔到.java里面

springmvc与ajax交互

Jsp页面: 需要引入jquery-1.10.2.min.js.json2.js.jquery.json-2.3.js三个文件 <%@ page contentType="text/html; charset=utf-8" language="java" errorPage=""%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/co

原生ajax调用数据简单实例代码

原生ajax调用数据简单实例代码:由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下:一.兼容浏览器部分: function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=ne

ajax交互servlet返回数据和jdbc模糊查询-中文-已经设置了UTF-8和解决了乱码

1.编码是将字符按一定翻译方式转换成字节存储在内存或外存中,解码是按照一定翻译方式将存储中的字节转换成字符. 2.ASCII是单字节,最高位总为0,相当于只占用了一个字节的7位,2^7=128个字符,相当于键盘上的128个键,有大小写因为字母,有*,%¥#@!+....等这些可显示字符,也有不可以显示的控制符F1,ctr... 而ISO-8859-1是启用了ASCII码的最高位,理论上是能再多128位,实际上没用掉这么多,至于多了那些,你们自己查下表 UTF-8是可变长的,具体中文几个字节,怎么

轻松搞定Ajax(分享下自己封装ajax函数,其实Ajax使用很简单,难是难在你得到数据后来怎样去使用这些数据)

hey,guys!今天我们一起讨论下ajax吧!此文只适合有一定ajax基础,但还是模糊状态的同志,当然高手也可以略过~~~ 一.概念 Ajax(Asynchronous Javascript + XML(异步JavaScript和XML )) 二.效果 实现无刷新效果,向后台异步的取数据(不是只有AJAX才能实现这样的效果的哦,如img , script标签中的src属性也可以实现一样的效果,可以自己尝试一下哦) 三.本质 可能我们在学习过程中会觉得ajax好难,我也是这样过来的,我觉得是我们

ajax是什么?ajax交互模型?

AJAX的全称是Asynchronous JavaScript and XML(异步加载  JavaScript 和 XML). ajax不是新的编程语言,而是一种使用现有标准的新方法.ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. ajax是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换.ajax可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某

springmvc与ajax交互常见问题

这是我个人再编写博客系统的时候,因个人疏忽犯下的低级错误. 不过犯错是一件好事,有助于总结. 1.关于参数前加@RequestBody 如果是使用ajax交互时,必须要加上这个contentType: 'application/json;charset=utf-8' 否则会出现这个异常: 错误信息:org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-url

z-tree结合ajax的调用展示树结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <lin