拼吾爱程序人生

首页»  jQuery»  jQuery TreeView
cobra - 2009-3-10 13:48:00
找了一个jQuery的树形插件，自己添加了增、删、改、查，与数据库交互(SQL Server 2005)。

支持3层节点，要扩展也可以，并不完善，欢迎提出意见

截图：

附件: 2009031013402629.jpg



客户端主要代码：
  1. <div id="divMove">
  2.     <input id="btnAdd" type="button" value="添加" /><input id="btnDel" type="button" value="删除" /></div>
  3. <div id="divTree">
  4.     <ul id="red" class="treeview-red">
  5.     </ul>
  6. </div>
复制代码
以后变更的树形内容都在ul下面。

主要的js文件代码：
  1. //--Author:Vincent

  3. $(document).ready(function(){   
  4. //bulid xmlHttpRequest
  5.     var xmlHttp;
  6.     var oClick;//which mouse up
  7.     if(window.ActiveXObject)
  8.     {
  9.         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  10.     }
  11.     else if(window.XMLHttpRequest)
  12.     {
  13.         xmlHttp=new XMLHttpRequest();
  14.     }
  15.     var post="op=2";//bind data from database
  16.     var url=document.location.href;
  17.     xmlHttp.open("POST",url,true);
  18.     xmlHttp.onreadystatechange=callback;
  19.     xmlHttp.setRequestHeader("Content-Length",post.length);
  20.     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  21.     xmlHttp.send(post); 
  22.        
  23.     //add
  24.     $("#btnAdd").click(function(event){
  25. //        var oUL=document.getElementById("red");
  26. //        var oLI=document.createElement("li");
  27. //        var oInput=document.createElement("input");
  28. //       
  29. //        oInput.setAttribute("class","treenode");
  30. //        oInput.setAttribute("value","New Node");
  31. //        oInput.setAttribute("type","text");
  32. //       
  33. //        oLI.appendChild(oInput);
  34. //        oUL.appendChild(oLI);
  35.         var oNode=oClick;
  36.         var array=new Array();
  37.              
  38.         for(var i=0;i<document.childNodes.length;i++)
  39.         {
  40.             if(oNode.parentNode.parentNode.parentNode.tagName=="LI")
  41.             {
  42.                 var oo=oNode.parentNode.parentNode.parentNode.childNodes[1].value;
  43.                 array=oo;
  44.                 oNode=oNode.parentNode.parentNode;
  45.             }
  46.             else
  47.                 break;
  48.         }
  49.         if(array.length==0)
  50.         {
  51.             post="op=1&sort="+oClick.value+"|NewNode1.0|NewNode1.0.0";
  52.         }
  53.         else if(array.length==1)
  54.         {
  55.             post="op=1&sort="+array[0]+"|"+oClick.value+"|NewNode1.0.0";
  56.         }
  57.         else if(array.length==2)
  58.         {
  59.             post="op=1&sort="+array[1]+"|"+array[0]+"|NewNode1.0.0";
  60.         }
  61.        
  62.         //post="op=1&sort=NewNode1.0|NewNode1|NewNode1.0.0";//add new data
  63.         xmlHttp.open("POST",url,true);
  64.         xmlHttp.onreadystatechange=callback;
  65.         xmlHttp.setRequestHeader("Content-Length",post.length);
  66.         xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  67.         xmlHttp.send(post);
  68.     });
  69.     //delete
  70.     $("#btnDel").click(function(event){
  71.        
  72.         if(confirm('Are you sure to clear or delete?'))
  73.         { 
  74.             var oNode=oClick;
  75.             var array=new Array();
  76.              
  77.             for(var i=0;i<document.childNodes.length;i++)
  78.             {
  79.                 if(oNode.parentNode.parentNode.parentNode.tagName=="LI")
  80.                 {
  81.                     var oo=oNode.parentNode.parentNode.parentNode.childNodes[1].value;
  82.                     array=oo;
  83.                     oNode=oNode.parentNode.parentNode;
  84.                 }
  85.                 else
  86.                     break;
  87.             }
  88.             post="op=4&sort=";
  89.            
  90.             for(var i=0;i<array.length;i++)
  91.             {
  92.                 post+=array+"|";
  93.                
  94.                 if(i==array.length-1)
  95.                 {
  96.                     post=post.substring(0,post.length-1)+"|"+oClick.value;
  97.                 }
  98.             }
  99.             if(array.length==0)
  100.             {
  101.                 alert('Can not to be deleted!');
  102.                 return;
  103.             }
  104.             xmlHttp.open("POST",url,true);
  105.             xmlHttp.onreadystatechange=callback;
  106.             xmlHttp.setRequestHeader("Content-Length",post.length);
  107.             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  108.             xmlHttp.send(post);
  109.         }
  110.     });
  111.     //web visit callback
  112.     function callback()
  113.     {
  114.         if(xmlHttp.readystate==4)
  115.         {
  116.             if(xmlHttp.status==200)
  117.             {
  118.                 display();
  119.             }
  120.             else
  121.             {
  122.                 alert("Server Back Status:"+xmlHttp.statusText);
  123.             }
  124.         }
  125.         else//status is not success
  126.         {
  127.             document.getElementById("red").innerHTML="Data Loading";
  128.         }
  129.     }
  130.     function display()
  131.     {
  132.         var index=xmlHttp.responseText.indexOf("<!DOCTYPE");
  133.         var html=xmlHttp.responseText.substring(0,index);
  134.         document.getElementById("red").innerHTML=html;
  135.        
  136.         reset();
  137.     }
  138.        
  139.     function reset()
  140.     {   
  141.         $("#red").treeview({
  142.             animated: "fast",
  143.             collapsed: true,
  144.             unique: true,
  145.             persist: "cookie",
  146.             toggle: function() {
  147.                 window.console && console.log("%o was toggled", this);
  148.             }
  149.         });
  150.    
  151.         //double click textbox
  152.         $("#divTree input").dblclick(function(event){
  153.             $(this).addClass("focus");
  154.            
  155.             var oDiv=document.getElementById("divMove");
  156.             oDiv.style.display="none";
  157.         });
  158.         //textbox mouseout
  159.         $("#divTree input").mouseout(function(event){
  160.             $(this).removeClass("focus");
  161.         });
  162.        
  163.         //textbox enter
  164.         $("#divTree input").keydown(function(event){
  165.             if(event.keyCode==13)
  166.             {
  167.                 $(this).removeClass("focus");
  168.            
  169.                 var oNode=this;
  170.                 var array=new Array();
  171.                  
  172.                 for(var i=0;i<document.childNodes.length;i++)
  173.                 {
  174.                     if(oNode.parentNode.parentNode.parentNode.tagName=="LI")
  175.                     {
  176.                         var oo=oNode.parentNode.parentNode.parentNode.childNodes[1].value;
  177.                         array=oo;
  178.                         oNode=oNode.parentNode.parentNode;
  179.                     }
  180.                     else
  181.                         break;
  182.                 }
  183.                 post="op=3&sort=";
  184.            
  185.                 for(var i=0;i<array.length;i++)
  186.                 {
  187.                     post+=array+"|";
  188.                
  189.                     if(i==array.length-1)
  190.                     {
  191.                         post=post.substring(0,post.length-1)+"|"+this.value+"|"+this.defaultValue;
  192.                     }
  193.                 }
  194.                 if(array.length==0) post+=this.value+"|"+this.defaultValue;
  195.                 xmlHttp.open("POST",url,true);
  196.                 xmlHttp.onreadystatechange=callback;
  197.                 xmlHttp.setRequestHeader("Content-Length",post.length);
  198.                 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  199.                 xmlHttp.send(post);
  200.             }
  201.         });
  202.    
  203.         $(".treenode").mouseup(function(event){
  204.        
  205.             var oDiv=document.getElementById("divMove");
  206.        
  207.             oDiv.style.left=event.clientX;
  208.             oDiv.style.top=event.clientY;
  209.             oDiv.style.display="block";
  210.        
  211.             oClick=$(this).get(0);
  212.             //alert(event.clientY+" "+event.clientX);
  213.        
  214.         });
  215.         $("#divTree").mouseover(function(event){
  216.             var oDiv=document.getElementById("divMove");
  217.             oDiv.style.display="none";
  218.         });
  219.     }
  220. });
复制代码
实现了异步通知后台对数据库的增、删、改、查

后台代码：
  1. public partial class Test: System.Web.UI.Page
  2.     {
  3.         protected void Page_Load(object sender, EventArgs e)
  4.         {
  5.             if (!IsPostBack)
  6.             {
  7.                 try
  8.                 {
  9.                     int op = Int32.Parse(Request.Form["op"]);

  11.                     switch (op)
  12.                     {
  13.                         case 1:
  14.                             AddSort();
  15.                             break;
  16.                         case 2:
  17.                             GetSort();
  18.                             break;
  19.                         case 3:
  20.                             UpSort();
  21.                             break;
  22.                         case 4:
  23.                             DelSort();
  24.                             break;
  25.                     }
  26.                 }
  27.                 catch (Exception excpt){ }
  28.             }
  29.         }

  31.         /// <summary>
  32.         /// 删除分类
  33.         /// </summary>
  34.         private void DelSort()
  35.         {
  36.             string line = Request.Form["sort"].ToString();
  37.             string[] sorts = line.Split('|').ToArray();

  39.             switch (sorts.Length)
  40.             {
  41.                 case 2:
  42.                     DelType(sorts);
  43.                     break;
  44.                 case 3:
  45.                     DelContent(sorts);
  46.                     break;
  47.             }
  48.             GetSort();       
  49.         }

  51.         /// <summary>
  52.         /// 删除具体内容
  53.         /// </summary>
  54.         /// <param name="sorts"></param>
  55.         private void DelContent(string[] sorts)
  56.         {
  57.             string type = sorts[0];
  58.             string sort = sorts[1];
  59.             string content = sorts[2];

  61.             MerchandiseSort ms = new MerchandiseSort();
  62.             MerchandiseSortInfo msInfo = new MerchandiseSortInfo(sort, type, content);

  64.             try
  65.             {
  66.                 ms.Delete(msInfo);
  67.             }
  68.             catch { }
  69.         }

  71.         /// <summary>
  72.         /// 删除分类类型
  73.         /// </summary>
  74.         /// <param name="sorts"></param>
  75.         private void DelType(string[] sorts)
  76.         {
  77.             string sort = sorts[0];
  78.             string type = sorts[1];
  79.             MerchandiseSort ms = new MerchandiseSort();

  81.             try
  82.             {
  83.                 ms.Delete(sort, type);
  84.             }
  85.             catch { }
  86.         }

  88.         /// <summary>
  89.         /// 更新分类
  90.         /// </summary>
  91.         private void UpSort()
  92.         {
  93.             string line = Request.Form["sort"].ToString();
  94.             string[] sorts = line.Split('|').ToArray();

  96.             switch (sorts.Length)
  97.             {
  98.                 case 0:
  99.                     return;
  100.                     break;
  101.                 case 2:
  102.                     UpCCJOY(sorts);
  103.                     break;
  104.                 case 3:
  105.                     UpType(sorts);
  106.                     break;
  107.                 case 4:
  108.                     UpContent(sorts);
  109.                     break;
  110.             }
  111.             GetSort();       
  112.         }

  114.         /// <summary>
  115.         /// 更新分类内容
  116.         /// </summary>
  117.         /// <param name="sorts"></param>
  118.         private void UpContent(string[] sorts)
  119.         {
  120.             string type = sorts[0];
  121.             string sort = sorts[1];
  122.             string content = sorts[2];
  123.             string defaultValue = sorts[3];

  125.             MerchandiseSort ms = new MerchandiseSort();
  126.             MerchandiseSortInfo msInfo = new MerchandiseSortInfo(sort, type, content);

  128.             try
  129.             {
  130.                 ms.Update(msInfo, defaultValue);
  131.             }
  132.             catch { }
  133.         }

  135.         /// <summary>
  136.         /// 更新分类类型
  137.         /// </summary>
  138.         /// <param name="sorts"></param>
  139.         private void UpType(string[] sorts)
  140.         {
  141.             string sort = sorts[0];
  142.             string type = sorts[1];
  143.             string defaultValue = sorts[2];
  144.             MerchandiseSort ms = new MerchandiseSort();

  146.             try
  147.             {
  148.                 ms.Update(sort, type, defaultValue);
  149.             }
  150.             catch { }
  151.         }

  153.         /// <summary>
  154.         /// 更新ccjoy分类
  155.         /// </summary>
  156.         /// <param name="sorts"></param>
  157.         private void UpCCJOY(string[] sorts)
  158.         {
  159.             string sort = sorts[0];
  160.             string defaultValue = sorts[1];
  161.             MerchandiseSort ms = new MerchandiseSort();

  163.             try
  164.             {
  165.                 ms.Update(sort, defaultValue);
  166.             }
  167.             catch { }
  168.         }

  170.         /// <summary>
  171.         /// 获取所有分类
  172.         /// </summary>
  173.         private void GetSort()
  174.         {
  175.             MerchandiseSort ms = new MerchandiseSort();
  176.             IList<MerchandiseSortInfo> msInfoes = new List<MerchandiseSortInfo>();

  178.             try
  179.             {
  180.                 msInfoes = ms.GetMerchandiseSort();
  181.             }
  182.             catch (Exception excpt){ }

  184.             string rep = GetXml(msInfoes);
  185.             Response.Write(rep);
  186.         }

  188.         /// <summary>
  189.         /// 拼取response
  190.         /// </summary>
  191.         /// <param name="msInfoes"></param>
  192.         /// <returns></returns>
  193.         private string GetXml(IList<MerchandiseSortInfo> msInfoes)
  194.         {
  195.             StringBuilder sb = new StringBuilder();

  197.             foreach (MerchandiseSortInfo msInfo in msInfoes)
  198.             {
  199.                 int indexSort = sb.ToString().IndexOf(msInfo.CcjoySort);

  201.                 if (indexSort > -1)
  202.                 {
  203.                     int indexType = sb.ToString().IndexOf(msInfo.Type, indexSort);
  204.                     int indexUL;
  205.                     int indexNextUL;
  206.                     string tmp = string.Empty;
  207.                     string tmpNew = string.Empty;

  209.                     if (indexType > -1)
  210.                     {
  211.                         indexUL = sb.ToString().IndexOf("</li></ul></li></ul>", indexSort);
  212.                         //indexUL = sb.ToString().IndexOf("</ul>", indexUL + 5);

  214.                         if (indexType > indexUL) indexType = -1;
  215.                     }

  217.                     if (indexType > -1)
  218.                     {
  219.                         indexUL = sb.ToString().IndexOf("<ul>", indexType);
  220.                         indexNextUL = sb.ToString().IndexOf("</ul>", indexUL);
  221.                         tmp = sb.ToString().Substring(indexSort, indexNextUL - indexSort);
  222.                         tmpNew = tmp + string.Format("<li><input class='treenode' value='{0}' type='text' /></li>", msInfo.Content);
  223.                         sb = sb.Replace(tmp, tmpNew);
  224.                     }
  225.                     else
  226.                     {
  227.                         indexUL = sb.ToString().IndexOf("<ul>", indexSort);
  228.                         indexNextUL = sb.ToString().IndexOf("</li></ul></li></ul>", indexUL);
  229.                         //indexNextUL = sb.ToString().IndexOf("</ul>", indexNextUL + 5);
  230.                         tmp = sb.ToString().Substring(indexSort, indexNextUL - indexSort + 15);
  231.                         tmpNew = tmp + string.Format("<li><input class='treenode' value='{0}' type='text' /><ul><li><input class='treenode' value='{1}' type='text' /></li></ul></li>", msInfo.Type, msInfo.Content);
  232.                         sb = sb.Replace(tmp, tmpNew);
  233.                     }
  234.                 }
  235.                 else
  236.                 {
  237.                     sb.Append(string.Format("<li><input class='treenode' value='{0}' type='text' /><ul><li><input class='treenode' value='{1}' type='text' /><ul><li><input class='treenode' value='{2}' type='text' /></li></ul></li></ul></li>", msInfo.CcjoySort, msInfo.Type, msInfo.Content));
  238.                 }
  239.             }
  240.             return sb.ToString();
  241.         }

  243.         /// <summary>
  244.         /// 添加分类
  245.         /// </summary>
  246.         private void AddSort()
  247.         {
  248.             string line = Request.Form["sort"].ToString();
  249.             string[] sorts = line.Split('|').ToArray();

  251.             if(sorts.Length<3) return;
  252.             string content=sorts[2];
  253.             string type=sorts[1];
  254.             string sort=sorts[0];

  256.             MerchandiseSortInfo msInfo = new MerchandiseSortInfo(sort, type, content);
  257.             MerchandiseSort ms = new MerchandiseSort();

  259.             try
  260.             {
  261.                 ms.Add(msInfo);
  262.             }
  263.             catch { }

  265.             GetSort();
  266.         }
  267.     }
复制代码
（文/W2N）

用到的js文件、css文件、图片文件：

附件: 下载地址
jQuery栏目的最新浏览文章：
• 《锋利的jQuery》完整版PDF及源码下载
• jQuery in Action（jQuery实战）PDF及源码下载
• jQuery+Ajax实现批量上传图片
• 使用jQuery, CSS, JSON 和Asp.Net打造雅虎图片新闻轮换控件
• jQuery编写的JavaScript图像画廊插件Galleria
• 基于jQuery的窗口插件：jMessageBox
• 齐全的jQuery表单验证插件
• jQuery基础教程（Learning jQuery）中文完整PDF版及源码下载
• jQuery无缝图片横向滚动代码
• DragResize - Resize 和 Drag 类的合并优化版
• 可以替代ExtJS的jQuery UI开源库：jQuery EasyUI 1.0.5
• jQuery 1.4.2 发布：继续提升性能
• [JQuery插件] 固定表头, 左侧某些列的表格
• jQuery 1.4.1 简体中文提示（含下载）
• 用一个jQuery插件EasyDrag轻松实现JS拖动的效果
• 浮动留言板(JQuery 插件)
查看完整版本: jQuery TreeView
Powered by Discuz!NT Archiver 3.0.0
CopyRight © 2007-2010 Pin5i-Programming-Life