jQuery TreeView --结合SQL2005数据库增，删，改操作

最新推荐文章于 2016-08-10 18:35:00 发布
最新推荐文章于 2016-08-10 18:35:00 发布
阅读量70 收藏
点赞数
文章标签： 数据库 javascript 人工智能 ViewUI
原文链接：http://www.cnblogs.com/caojinqin/archive/2009/03/10/1407984.html
版权

jQuery TreeView

找了一个jQuery的树形插件，自己添加了增、删、改、查，与数据库交互(SQL Server 2005)。

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

用到的js文件、css文件、图片文件：http://files.cnblogs.com/W2N/treeview.rar

截图：

2009031013402629.jpg

客户端主要代码：

 

ContractedBlock.gif ExpandedBlockStart.gif Code
<div id="divMove">
    <input id="btnAdd" type="button" value="添加" /><input id="btnDel" type="button" value="删除" /></div>
<div id="divTree">
    <ul id="red" class="treeview-red">
    </ul>
</div>

 

以后变更的树形内容都在ul下面。

主要的js文件代码：

 

ContractedBlock.gif ExpandedBlockStart.gif Code
//--Author:Vincent

$(document).ready(function(){    
//bulid xmlHttpRequest
    var xmlHttp;
    var oClick;//which mouse up
    if(window.ActiveXObject)
    {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
        xmlHttp=new XMLHttpRequest();
    }
    var post="op=2";//bind data from database
    var url=document.location.href;
    xmlHttp.open("POST",url,true);
    xmlHttp.onreadystatechange=callback;
    xmlHttp.setRequestHeader("Content-Length",post.length);
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlHttp.send(post);   
         
    //add
    $("#btnAdd").click(function(event){
//        var oUL=document.getElementById("red");
//        var oLI=document.createElement("li");
//        var oInput=document.createElement("input");
//        
//        oInput.setAttribute("class","treenode");
//        oInput.setAttribute("value","New Node");
//        oInput.setAttribute("type","text");
//        
//        oLI.appendChild(oInput);
//        oUL.appendChild(oLI);
        var oNode=oClick;
        var array=new Array();
              
        for(var i=0;i<document.childNodes.length;i++)
        {
            if(oNode.parentNode.parentNode.parentNode.tagName=="LI")
            {
                var oo=oNode.parentNode.parentNode.parentNode.childNodes[1].value;
                array[i]=oo;
                oNode=oNode.parentNode.parentNode;
            }
            else
                break;
        }
        if(array.length==0)
        {
            post="op=1&sort="+oClick.value+"|NewNode1.0|NewNode1.0.0";
        }
        else if(array.length==1)
        {
            post="op=1&sort="+array[0]+"|"+oClick.value+"|NewNode1.0.0";
        }
        else if(array.length==2)
        {
            post="op=1&sort="+array[1]+"|"+array[0]+"|NewNode1.0.0";
        }
        
        //post="op=1&sort=NewNode1.0|NewNode1|NewNode1.0.0";//add new data
        xmlHttp.open("POST",url,true);
        xmlHttp.onreadystatechange=callback;
        xmlHttp.setRequestHeader("Content-Length",post.length);
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlHttp.send(post);
    });
    //delete
    $("#btnDel").click(function(event){
        
        if(confirm('Are you sure to clear or delete?'))
        {   
            var oNode=oClick;
            var array=new Array();
              
            for(var i=0;i<document.childNodes.length;i++)
            {
                if(oNode.parentNode.parentNode.parentNode.tagName=="LI")
                {
                    var oo=oNode.parentNode.parentNode.parentNode.childNodes[1].value;
                    array[i]=oo;
                    oNode=oNode.parentNode.parentNode;
                }
                else
                    break;
            }
            post="op=4&sort=";
            
            for(var i=0;i<array.length;i++)
            {
                post+=array[i]+"|";
                
                if(i==array.length-1)
                {
                    post=post.substring(0,post.length-1)+"|"+oClick.value;
                }
            }
            if(array.length==0) 
            {
                alert('Can not to be deleted!');
                return;
            }
            xmlHttp.open("POST",url,true);
            xmlHttp.onreadystatechange=callback;
            xmlHttp.setRequestHeader("Content-Length",post.length);
            xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xmlHttp.send(post);
        }
    });
    //web visit callback
    function callback()
    {
        if(xmlHttp.readystate==4)
        {
            if(xmlHttp.status==200)
            {
                display();
            }
            else
            {
                alert("Server Back Status:"+xmlHttp.statusText);
            }
        }
        else//status is not success
        {
            document.getElementById("red").innerHTML="Data Loadingdot.gif";
        }
    }
    function display()
    {
        var index=xmlHttp.responseText.indexOf("<!DOCTYPE");
        var html=xmlHttp.responseText.substring(0,index);
        document.getElementById("red").innerHTML=html;
        
        reset();
    }
        
    function reset()
    {    
        $("#red").treeview({
            animated: "fast",
            collapsed: true,
            unique: true,
            persist: "cookie",
            toggle: function() {
                window.console && console.log("%o was toggled", this);
            }
        });
    
        //double click textbox
        $("#divTree input").dblclick(function(event){
            $(this).addClass("focus");
            
            var oDiv=document.getElementById("divMove");
            oDiv.style.display="none";
        });
        //textbox mouseout
        $("#divTree input").mouseout(function(event){
            $(this).removeClass("focus");
        });
        
        //textbox enter
        $("#divTree input").keydown(function(event){
            if(event.keyCode==13)
            {
                $(this).removeClass("focus");
            
                var oNode=this;
                var array=new Array();
                   
                for(var i=0;i<document.childNodes.length;i++)
                {
                    if(oNode.parentNode.parentNode.parentNode.tagName=="LI")
                    {
                        var oo=oNode.parentNode.parentNode.parentNode.childNodes[1].value;
                        array[i]=oo;
                        oNode=oNode.parentNode.parentNode;
                    }
                    else
                        break;
                }
                post="op=3&sort=";
            
                for(var i=0;i<array.length;i++)
                {
                    post+=array[i]+"|";
                
                    if(i==array.length-1)
                    {
                        post=post.substring(0,post.length-1)+"|"+this.value+"|"+this.defaultValue;
                    }
                }
                if(array.length==0) post+=this.value+"|"+this.defaultValue;
                xmlHttp.open("POST",url,true);
                xmlHttp.onreadystatechange=callback;
                xmlHttp.setRequestHeader("Content-Length",post.length);
                xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xmlHttp.send(post);
            }
        });
    
        $(".treenode").mouseup(function(event){
        
            var oDiv=document.getElementById("divMove");
        
            oDiv.style.left=event.clientX;
            oDiv.style.top=event.clientY;
            oDiv.style.display="block";
        
            oClick=$(this).get(0);
            //alert(event.clientY+" "+event.clientX);
        
        });
        $("#divTree").mouseover(function(event){
            var oDiv=document.getElementById("divMove");
            oDiv.style.display="none";
        });
    }
});

 

实现了异步通知后台对数据库的增、删、改、查

后台代码：

 

ContractedBlock.gif ExpandedBlockStart.gif Code
public partial class Test: System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                try
                {
                    int op = Int32.Parse(Request.Form["op"]);

                    switch (op)
                    {
                        case 1:
                            AddSort();
                            break;
                        case 2:
                            GetSort();
                            break;
                        case 3:
                            UpSort();
                            break;
                        case 4:
                            DelSort();
                            break;
                    }
                }
                catch (Exception excpt){ }
            }
        }

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

            switch (sorts.Length)
            {
                case 2:
                    DelType(sorts);
                    break;
                case 3:
                    DelContent(sorts);
                    break;
            }
            GetSort();        
        }

        /// <summary>
        /// 删除具体内容
        /// </summary>
        /// <param name="sorts"></param>
        private void DelContent(string[] sorts)
        {
            string type = sorts[0];
            string sort = sorts[1];
            string content = sorts[2];

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

            try
            {
                ms.Delete(msInfo);
            }
            catch { }
        }

        /// <summary>
        /// 删除分类类型
        /// </summary>
        /// <param name="sorts"></param>
        private void DelType(string[] sorts)
        {
            string sort = sorts[0];
            string type = sorts[1];
            MerchandiseSort ms = new MerchandiseSort();

            try
            {
                ms.Delete(sort, type);
            }
            catch { }
        }

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

            switch (sorts.Length)
            {
                case 0:
                    return;
                    break;
                case 2:
                    UpCCJOY(sorts);
                    break;
                case 3:
                    UpType(sorts);
                    break;
                case 4:
                    UpContent(sorts);
                    break;
            }
            GetSort();        
        }

        /// <summary>
        /// 更新分类内容
        /// </summary>
        /// <param name="sorts"></param>
        private void UpContent(string[] sorts)
        {
            string type = sorts[0];
            string sort = sorts[1];
            string content = sorts[2];
            string defaultValue = sorts[3];

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

            try
            {
                ms.Update(msInfo, defaultValue);
            }
            catch { }
        }

        /// <summary>
        /// 更新分类类型
        /// </summary>
        /// <param name="sorts"></param>
        private void UpType(string[] sorts)
        {
            string sort = sorts[0];
            string type = sorts[1];
            string defaultValue = sorts[2];
            MerchandiseSort ms = new MerchandiseSort();

            try
            {
                ms.Update(sort, type, defaultValue);
            }
            catch { }
        }

        /// <summary>
        /// 更新ccjoy分类
        /// </summary>
        /// <param name="sorts"></param>
        private void UpCCJOY(string[] sorts)
        {
            string sort = sorts[0];
            string defaultValue = sorts[1];
            MerchandiseSort ms = new MerchandiseSort();

            try
            {
                ms.Update(sort, defaultValue);
            }
            catch { }
        }

        /// <summary>
        /// 获取所有分类
        /// </summary>
        private void GetSort()
        {
            MerchandiseSort ms = new MerchandiseSort();
            IList<MerchandiseSortInfo> msInfoes = new List<MerchandiseSortInfo>();

            try
            {
                msInfoes = ms.GetMerchandiseSort();
            }
            catch (Exception excpt){ }

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

        /// <summary>
        /// 拼取response
        /// </summary>
        /// <param name="msInfoes"></param>
        /// <returns></returns>
        private string GetXml(IList<MerchandiseSortInfo> msInfoes)
        {
            StringBuilder sb = new StringBuilder();

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

                if (indexSort > -1)
                {
                    int indexType = sb.ToString().IndexOf(msInfo.Type, indexSort);
                    int indexUL;
                    int indexNextUL;
                    string tmp = string.Empty;
                    string tmpNew = string.Empty;

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

                        if (indexType > indexUL) indexType = -1;
                    }

                    if (indexType > -1)
                    {
                        indexUL = sb.ToString().IndexOf("<ul>", indexType);
                        indexNextUL = sb.ToString().IndexOf("</ul>", indexUL);
                        tmp = sb.ToString().Substring(indexSort, indexNextUL - indexSort);
                        tmpNew = tmp + string.Format("<li><input class='treenode' value='{0}' type='text' /></li>", msInfo.Content);
                        sb = sb.Replace(tmp, tmpNew);
                    }
                    else
                    {
                        indexUL = sb.ToString().IndexOf("<ul>", indexSort);
                        indexNextUL = sb.ToString().IndexOf("</li></ul></li></ul>", indexUL);
                        //indexNextUL = sb.ToString().IndexOf("</ul>", indexNextUL + 5);
                        tmp = sb.ToString().Substring(indexSort, indexNextUL - indexSort + 15);
                        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);
                        sb = sb.Replace(tmp, tmpNew);
                    }
                }
                else
                {
                    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));
                }
            }
            return sb.ToString();
        }

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

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

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

            try
            {
                ms.Add(msInfo);
            }
            catch { }

            GetSort();
        }
    }

 

 

转载于:https://www.cnblogs.com/caojinqin/archive/2009/03/10/1407984.html

weixin_34095889
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TreeView节点的增删改查超实用
06-09
里面包含对TreeView树形图的所有操作，折叠节点、删除节点、新增节点、等等，附带数据库，对treeView这个控件讲解的很到位，想要学习的可以尝试下载。
jquery.treeview.js php mysql_JQuery 树状结构 jQuery-treeview.js 插件
weixin_42300435的博客
02-01 142
在项目中，我们经常会需要一些树状结构的样式来显示层级结构等，比如下图的样式，之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便。但是利用Jquery的一些插件，也是可以实现这些效果的，比如说Jquery.treeview.js插件。下面就直入主题，开始从简入繁的分析怎么使用treeview插件，从已知的知识开始轻松入手，让树状结构唾手可得。显示树状结构的几个实现步骤：一、HTML做初...
TreeView----从数据库取数据构建TreeView树
weixin_30614587的博客
01-20 213
简介：医院有很多工作单位，"" --->医院 code 是2位(如 10，20等)代表是医院的子节点，code是4位(如 1012，1011)是 10的子节点，以此类推；用递归的方法用这些数据构建TreeView树。 效果图如下： 代码如下： 构建TreeView的xaml <Window x:Class="CreateTree.MainWindow" ...
将数据库数据添加到treeview控件
Sunny
06-14 1025
<br /> private void frmTelNote_Load(object sender, EventArgs e) { OleDbConnection conn = BaseClass.ConnClass.DataConn(); conn.Open(); OleDbCommand cmd = new OleDbCommand("select * from tb_tel", conn);
TreeView树形控件递归绑定数据库里的数据
weixin_30790841的博客
04-18 147
TreeView树形控件递归绑定数据库里的数据。 第一种：性能不好 第一步：数据库中查出来的表，字段名分别为UNAME(显示名称)，DID(关联数据)，UTYPE(类型) 第二步：前台代码 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tree.aspx.cs" Inherits="Matics...
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
10-28
Jquery.TreeView提供了一种优雅的方式展示层次化的数据，而结合ASP.NET可以方便地从数据库获取并呈现这些数据。 首先，我们需要了解Jquery.TreeView的基本用法。这是一个jQuery插件，用于将HTML列表转换为可交互的...
商业编程-源码-按数据库记录构建树控件.zip
06-22
4. **编程实现**：在实现这个功能时，开发者通常会使用一种编程语言（如C#、Java、Python或JavaScript），并结合特定的框架或库（如.NET Framework、JavaFX、jQuery或React）。例如，对于.NET环境，可能使用Windows ...
jqtreetable jquery-treeview
03-22
导入此SQL文件到数据库后，可以与前面的树形展示库结合，创建一个展示中国地区层级关系的树形表格。 **testGridTree** testGridTree可能是一个测试文件，用于验证jqtreetable或jquery-treeview功能的正确性。通常，...
jQuery+JavaScript+Webservice+sql2005实现TreeView右键操作菜单
08-25
Web Service调用SQL Server 2005的存储过程或SQL命令来执行增删改查操作，确保数据的一致性和完整性。 通过以上技术的结合，开发者可以创建出一个高效、用户友好的数据管理工具。用户可以直接在TreeView中可视化地...
动态树的管理程序(基于jQuery Treeview实现)-java源码
09-20
Hibernate3是一个ORM（对象关系映射）框架，简化了数据库操作，将Java对象与SQL数据库表对应起来。 动态树的实现通常涉及服务器端的数据获取。在这个系统中，当用户在前端交互（如点击节点）时，可能触发AJAX请求，...
js/jquery 获取TreeView中的值
dfmc81175的博客
04-22 287
一次维护一个asp.net网站的时候，要改一个关于asp:TreeView的控件。过程要用js获取TreeView的选中节点的值，百度没看到有好的解决方案，后来想到了一个，拿出来和大家分享一下： 客户端代码，至于拿到后怎么用就看你自己了： function GetValue(val){ alert(val); } 服务端代码： TreeNode n...
基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<一>...
08-10 186
BZ第一次自己写博客，心情好激动！！BZ也是小菜，本文如果有什么不对的地方，希望大神们多多指教，也希望和我一样的小菜多多学习。BZ在这里谢过各位。 BZ最近看了很多博友的有关TreeView的博客，发现很多都是WebForm、JQuery的。因为BZ使用的是MVC的原因，所以决定写一写关于MVC和Bootstrap的TreeView。 PS:基于Bootstrap的JQuery Tr...
jQuery.TreeView的使用介绍及其改进
hegz
04-16 400
TreeView为Xuanye 打造的一款支持 jQuery 1.3+ 的高性能树形菜单插件，插件的开发过程作者在《打造基于jQuery的高性能TreeView 》一文中有详细介绍，在此本人不再赘述。 该插件的特点： 1、支持静态的树，即一次性将全部数据加载到客户端。 2、支持异步树，即一次只加载一级或若干级节点，子节点可以异步加载数据。 3、支持Checkbox树（静态/异步），用于...
jquery的treeview插件 调用样例（动态数据）
keenweiwei的专栏
05-27 3289
参考： http://www.zhuoda.org/irini/83891.html http://www.pin5i.com/showtopic-23119.html http://king130520.iteye.com/blog/974628 http://www.cnblogs.com/liyuxin/archive/2011/03/01/1967776.html
利用TreeView控件 从数据库中动态载入数据
hqt的专栏
04-18 2638
//*************************  aspx  *************************//               AutoPostBack="True">         Width="152px" Height="64px">Label         Width="144px" Height="48px">Label    Label   //*****
WinXP/VS2008下TreeView控件的SQL数据库操作实践
本文档主要探讨了在Windows XP SP3和Visual Studio 2008开发环境中，如何利用TreeView控件与SQL ...整体来说，这篇文章深入介绍了如何通过TreeView控件和SQL数据库结合，提供了一种高效的数据展示和管理解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值