dhtmlxtree示例

最新推荐文章于 2016-01-15 11:20:45 发布

Spring源码解析

最新推荐文章于 2016-01-15 11:20:45 发布

阅读量4.9k

点赞数

文章标签： button function xmlhttprequest input url stylesheet

近来因项目需要，研究了一下dhtmlxtree，发现网上例子比较少，尤其是比较完整的例子。把自己做的demo整理了一下，上传上来，大家共享一下，欢迎提出改进意见。

(1)db部分：

create table GEC_ZYTJ
(
ID VARCHAR2(36) not null,
PARENTID VARCHAR2(36),
TJMC VARCHAR2(200)
)

(2)jsp部分：

<%@ page contentType="text/html;charset=UTF-8"%>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<%@ include file="common/dhtmlxtree.jsp"%>
<TITLE></TITLE>
</HEAD>
<BODY>
<%-- 树节点维护，增加，删除，修改 --%>
    <script language="javascript" type="text/javascript">
<%-- 树节点删除 --%>
     function deletenode(){
     var nodeid=tree.getSelectedItemId();
     if(!(tree.hasChildren(nodeid)==true||tree.hasChildren(nodeid)!=0))
     {
    var url3="<%=contextPath%>/zyde/gecTest.do?act=delete";
    createXMLHttpRequest2();
   XMLHttpReq2.open("POST", url3, true);
   XMLHttpReq2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   XMLHttpReq2.onreadystatechange = answerdelete;//指定响应函数
   XMLHttpReq2.send("nodeid="+nodeid);
}
else
{
   alert('请先删除下级的节点！');
}
    }
<%-- 返回删除结果，验证是否成功删除 --%>
function answerdelete(){
   if (XMLHttpReq2.readyState == 4)
   {
    // 判断对象状态
    if (XMLHttpReq2.status == 200)
    {
     // 信息已经成功返回，开始处理信息
     var result=XMLHttpReq2.responseText;
     if(result=="1")
     {
      tree.deleteItem(tree.getSelectedItemId(),true);
     }
     else
     {
       alert('删除节点异常，删除失败！');
     }
            }
    else
    {
                alert("结果","您所请求的页面有异常。");
            }
        }
      }
     <%-- 新增子节点 --%>
     function addchild(){
        var nodeid=tree.getSelectedItemId();
        var nodetext=document.getElementById('cnodetext').value;
        var nodecode=document.getElementById('cnodecode').value;
    var url3="<%=contextPath%>/zyde/gecTest.do?act=addchild";
    createXMLHttpRequest2();
   XMLHttpReq2.open("POST", url3, true);
   XMLHttpReq2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   XMLHttpReq2.onreadystatechange = answeraddchild;//指定响应函数
   XMLHttpReq2.send("nodeid="+nodeid+"&nodetext="+nodetext+"&nodecode="+nodecode);
      }
    <%-- 返回新增结果，验证是否新增成功 --%>
function answeraddchild(){
   if (XMLHttpReq2.readyState == 4)
   {
    // 判断对象状态
    if (XMLHttpReq2.status == 200)
    {
     // 信息已经成功返回，开始处理信息
     var addednodeid=XMLHttpReq2.responseText;
     if(addednodeid!="")
     {
      tree.insertNewItem(tree.getSelectedItemId(),addednodeid,document.getElementById('cnodetext').value);
      fixImage(addednodeid);
     }
     else
     {
       alert('新增节点异常，新增失败！');
     }
            }
    else
    {
                alert("结果","您所请求的页面有异常。");
            }
        }
      }
     <%-- 节点预修改 --%>
     function preupdate(){
        var nodeid=tree.getSelectedItemId();
        if(nodeid!="FFFFFF")
        {
    var url3="<%=contextPath%>/zyde/gecTest.do?act=preupdate";
    createXMLHttpRequest2();
   XMLHttpReq2.open("POST", url3, true);
   XMLHttpReq2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   XMLHttpReq2.onreadystatechange = answerpreupdate;//指定响应函数
   XMLHttpReq2.send("nodeid="+nodeid);
   }
      }
    <%-- 返回节点详细信息 --%>
function answerpreupdate(){
   if (XMLHttpReq2.readyState == 4)
   {
    // 判断对象状态
    if (XMLHttpReq2.status == 200)
    {
     // 信息已经成功返回，开始处理信息
     var nodevalue=XMLHttpReq2.responseText;
     if(nodevalue!="")
     {
      var bn=nodevalue.split('|');
      document.getElementById('nodeid').value=bn[0];
      document.getElementById('nodetext').value=bn[1];
      document.getElementById('nodecode').value=bn[2];
     }
     else
     {
       alert('修改节点出错！');
     }
            }
    else
    {
                alert("结果","您所请求的页面有异常。");
            }
        }
      }
      <%-- 修改节点 --%>
       function update(){
       var nodeid=document.getElementById('nodeid').value;
       var nodetext=document.getElementById('nodetext').value;
       var nodecode=document.getElementById('nodecode').value;
        if(nodeid!="FFFFFF")
        {
    var url3="<%=contextPath%>/zyde/gecTest.do?act=update";
    createXMLHttpRequest2();
   XMLHttpReq2.open("POST", url3, true);
   XMLHttpReq2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   XMLHttpReq2.onreadystatechange = answerupdate;//指定响应函数
   XMLHttpReq2.send("nodeid="+nodeid+"&nodetext="+nodetext+"&nodecode="+nodecode);
   }
      }
    <%-- 返回修改节点信息，验证是否修改成功 --%>
function answerupdate(){
   if (XMLHttpReq2.readyState == 4)
   {
    // 判断对象状态
    if (XMLHttpReq2.status == 200)
    {
     // 信息已经成功返回，开始处理信息
     var nodevalue=XMLHttpReq2.responseText;
     if(nodevalue!="")
     {
       var bn=nodevalue.split('|');
       tree.setItemText(bn[1],bn[2]);

     }
     else
     {
       alert('修改节点出错！');
     }
            }
    else
    {
                alert("结果","您所请求的页面有异常。");
            }
        }
      }
      <%-- 新增同级节点 --%>
       function addbrother(){
        var nodeid=tree.getSelectedItemId();
        var nodetext=document.getElementById('bnodetext').value;
        var nodecode=document.getElementById('bnodecode').value;
    var url3="<%=contextPath%>/zyde/gecTest.do?act=addbrother";
    createXMLHttpRequest2();
   XMLHttpReq2.open("POST", url3, true);
   XMLHttpReq2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   XMLHttpReq2.onreadystatechange = answeraddbrother;//指定响应函数
   XMLHttpReq2.send("nodeid="+nodeid+"&nodetext="+nodetext+"&nodecode="+nodecode);
      }
      <%-- 返回新增同级节点信息,验证是否成功 --%>
function answeraddbrother(){
   if (XMLHttpReq2.readyState == 4)
   {
    // 判断对象状态
    if (XMLHttpReq2.status == 200)
    {
     // 信息已经成功返回，开始处理信息
     var addednodeid=XMLHttpReq2.responseText;
     if(addednodeid!="")
     {
      tree.insertNewNext(tree.getSelectedItemId(),addednodeid,document.getElementById('bnodetext').value);
      fixImage(addednodeid);
     }
     else
     {
       alert('添加同级节点出错！');
     }
            }
    else
    {
                alert("结果","您所请求的页面有异常。");
            }
        }
      }
       <%-- 新增节点,删除节点IMAGES动态变换 --%>
      function fixImage(nodeid){
      alert(tree.getLevel(nodeid));
    switch(tree.getLevel(nodeid)){
    case 1:
    tree.setItemImage2(nodeid,'folderClosed.gif','folderOpen.gif','folderClosed.gif');
     break;
    case 2:
    tree.setItemImage2(nodeid,'folderClosed.gif','folderOpen.gif','folderClosed.gif');
     break;
    case 3:
    tree.setItemImage2(nodeid,'folderClosed.gif','folderOpen.gif','folderClosed.gif');
     break;
    default:
    tree.setItemImage2(nodeid,'iconTexts.gif','iconTexts.gif','iconText.gif');
     break;
    }
   }
   <%--
   设置节点选中
        tree.setCheck(id,true);
         设置节点反选
        tree.setCheck(id,false);
         选中指定节点下的子节点
        tree.setSubChecked(id,true);
         反选指定节点下的子节点
        tree.setSubChecked(id,false);
         取得所有选中节点不含父节点
        tree.getAllChecked();
         取得所有选中的父。父的父。。。。
        tree.getAllCheckedBranches()
        //取得所有选中的，包括父，父的父
        tree.getAllPartiallyChecked()
   --%>
   function getallcheckednodeid()
   {
   alert(tree.getAllChecked());
   }
</script>
<table>
   <tr>
    <td valign="top">
    <div id="treetest" style="width:350; height:500;background-color:#f5f5f5;border :1px solid Silver;"></div>
    </td>
    <td rowspan="2" style="padding-left:25" valign="top">

    <input name='button1' type='button' class='button' value='添加子节点' οnclick='addchild()'>节点名称<input type="text" value="" id="cnodetext">节点编码<input type="text" value="" id="cnodecode"><br>

    <input name='button2' type='button' class='button' value='添加同级节点' οnclick='addbrother()'>节点名称<input type="text" value="" id="bnodetext">节点编码<input type="text" value="" id="bnodecode"><br>

    <input name='button3' type='button' class='button' value='修改节点' οnclick='update()'><input type="hidden" value="" id="nodeid">节点名称<input type="text" value="" id="nodetext">节点编码<input type="text" value="" id="nodecode"><br>

    <input name='button4' type='button' class='button' value='取得所有选中节点' οnclick='getallcheckednodeid()'><br>

    <input name='button5' type='button' class='button' value='删除节点' οnclick='deletenode()'><br>

    </td>
   </tr>
</table>
<script>
    tree=new dhtmlXTreeObject(document.getElementById('treetest'),"100%","100%",0);
    tree.setOnClickHandler(preupdate);
    tree.setImagePath("<%=xtreePath%>");
    tree.enableDragAndDrop(false);
    tree.setXMLAutoLoading("gecTest.do?act=createtree");
    <%-- 加复选框 1: 表示带否则不带 --%>
    tree.enableCheckBoxes(1);
    <%-- 是否级联选择 true : 级联选择 false: 不级联选择 --%>
    tree.enableThreeStateCheckboxes(true);
    tree.loadXML("gecTest.do?act=createtree");
</script>
</body>
</html>

dhtmlxtree.jsp页面：

<%@ page contentType="text/html;charset=UTF-8"%>
<%
String contextPath=request.getContextPath();
String xtreePath=contextPath+"/zyde/component/dhtmlxtree/images/csh_yellowbooks/";
%>
<script type="text/javascript">
   var xtreePath='<%=xtreePath%>';
   var contextPath='<%=contextPath%>';
</script>
<link rel="stylesheet" type="text/css" href="<%= contextPath%>/zyde/component/dhtmlxtree/css/dhtmlxtree.css" />
<script type="text/javascript" src="<%= contextPath%>/zyde/component/dhtmlxtree/dhtmlxtree.js"></script>
<script type="text/javascript" src="<%= contextPath%>/zyde/component/dhtmlxtree/dhtmlxcommon.js"></script>
<script>
var XMLHttpReq;
var XMLHttpReq2;
    function createXMLHttpRequest()
{
   if(window.XMLHttpRequest)
   {
    XMLHttpReq = new XMLHttpRequest();
   }
   else if (window.ActiveXObject)
   {
    try
    {
     XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
     try
     {
      XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch (e)
     {
     }
    }
   }
}
function createXMLHttpRequest2()
{
   if(window.XMLHttpRequest)
   { //Mozilla 浏览器
    XMLHttpReq2 = new XMLHttpRequest();
   }
   else if (window.ActiveXObject)
   {
    // IE浏览器
    try
    {
     XMLHttpReq2 = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
     try
     {
      XMLHttpReq2 = new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch (e)
     {
     }
    }
   }
}
</script>

Spring源码解析

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
dhtmlxtree示例

近来因项目需要，研究了一下dhtmlxtree，发现网上例子比较少，尤其是比较完整的例子。把自己做的demo整理了一下，上传上来，大家共享一下，欢迎提出改进意见。(1)db部分：create table GEC_ZYTJ(ID VARCHAR2(36) not null,PARENTID VARCHAR2(36),TJMC VARCH
复制链接

扫一扫