.net1.1采用Ajax动态加载TreeView

11 篇文章 0 订阅
1 篇文章 0 订阅

文章见http://www.cnblogs.com/dingsea/archive/2005/10/26/262220.html
安装问题:
对此文中源代码下载之后,进行安装。

  1. 发现ajaxTest必须放在WWWROOT下面才可以。。。。-应该是SLN的问题。
  2. 将其设为网站,用vs2003打开,将其引用重新添加(主要是BorgWorX.Web.Core.Ajax.dll与Microsoft.ApplicationBlocks.Data.dll)

代码使用问题:

 以下JS关键为前台JS调用后台的public  DataSet returnDs(string PreFix)

         < script language = " javascript " >
            
var  Index;
            
function  ds()
            
{
                WebForm2.returnDs(TreeView1.getTreeNode(Index).getAttribute(
"NodeData"),returnDs_callback);
            }

            
function  returnDs_callback(response)
            
{
                
var n=TreeView1.getTreeNode(Index);
                
var load=n.getChildren();
                
if(load.length!=1){
                    
return;
                }

                
else
                
{
                    
var loadNode=load[0];
                    loadNode.remove();
                }

                
var ds=response.value;
                
if(ds!=null && ds.Tables!=null && typeof(ds)=="object")
                
{
                    
                    
for(var i=0;i<ds.Tables[0].Rows.length;i++)
                    
{
                        
var newNode=TreeView1.createTreeNode();
                        newNode.setAttribute(
"NodeData",ds.Tables[0].Rows[i].UNSPSCCode);
                        newNode.setAttribute(
"Text",ds.Tables[0].Rows[i].UNSPSCCode+" "+ds.Tables[0].Rows[i].Description);
                        
if(newNode.getAttribute("NodeData")%100==0)
                        
{
                            
var loadNode=TreeView1.createTreeNode();
                            loadNode.setAttribute(
"Text","Loading......");
                            newNode.add(loadNode);
                        }

                        n.add(newNode);
                    }

                }

                
else{alert(response.error);}
            }

            
        
</ script >
        
< script language = javascript  for = " TreeView1 "  event = " onexpand " >
            Index
=  window.event.treeNodeIndex;
            
if (Index == ' 0 ' ) return ;
            ds();
        
</ script >

后台点击后的代码【public  DataSet returnDs(string PreFix)】

         // [Ajax.AjaxMethod()]
        [BorgWorX.Web.Core.Ajax.AjaxMethod()]
        
public   DataSet returnDs( string  PreFix)
        
{
            
int preFix=getPreFix(PreFix);
            
string str="workstation id=SCS-DINGSEA;packet size=4096;user=sa;data source=SCS-DINGSEA;persist security info=True;initial catalog=GEPS;password=sa";
            DataSet ds
=SqlHelper.ExecuteDataset(str,"sp_loadUNSPSCCodeByLevel",preFix);
            
return ds;
        }

后台树初始化代码:


        
private   void  loadData(TreeNode rootNode, int  preFix)
        
{
            DataSet ds
=SqlHelper.ExecuteDataset(sqlConn,"sp_loadUNSPSCCodeByLevel",preFix);
            
//dg.DataSource=ds;
            
//dg.DataBind();
            foreach(DataRow r in ds.Tables[0].Rows)
            
{
                TreeNode t
=new TreeNode();
                TreeNode loadNode
=new TreeNode();

                loadNode.Text
="Loading......";

                t.Text
=r.ItemArray[0].ToString()+"  "+r.ItemArray[1].ToString();
                t.NodeData
=r.ItemArray[0].ToString();
                
if(t.NodeData.EndsWith("00"))
                
{t.Nodes.Add(loadNode);}
                rootNode.Nodes.Add(t);
            }

        }

 

最终的前台为:

 

<% @ Page language="c#" Codebehind="AjaxTree.aspx.cs" AutoEventWireup="false" Inherits="Workplace.Test.AjaxTree"  %>
<% @ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35"  %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
< HTML >
    
< HEAD >
        
< title > AjaxTree </ title >
        
< meta  content ="Microsoft Visual Studio .NET 7.1"  name ="GENERATOR" >
        
< meta  content ="C#"  name ="CODE_LANGUAGE" >
        
< meta  content ="JavaScript"  name ="vs_defaultClientScript" >
        
< meta  content ="http://schemas.microsoft.com/intellisense/ie5"  name ="vs_targetSchema" >
        
< script  language ="javascript" >
                 
var Index;
                 
function ds()
                 
{
                       AjaxTree.returnDs(TreeView1.getTreeNode(Index).getAttribute(
"NodeData"),returnDs_callback);
                 }

                 
function returnDs_callback(response)
                 
{
                      
var n=TreeView1.getTreeNode(Index);
                      
var load=n.getChildren();
                      
if(load.length!=1){
                            
return;//如果已经存在数据,那就不再读取。
                      }

                      
else
                      
{
                            
var loadNode=load[0];
                            loadNode.remove();
                      }

                      
var ds=response.value;
                      
if(ds!=null && ds.Tables!=null && typeof(ds)=="object")
                      
{
                            
                            
for(var i=0;i<ds.Tables[0].Rows.length;i++)
                            
{
                                  
var newNode=TreeView1.createTreeNode();
                                  newNode.setAttribute(
"NodeData",ds.Tables[0].Rows[i].OrderID);
                                  
//newNode.setAttribute("Text",ds.Tables[0].Rows[i].UNSPSCCode+" "+ds.Tables[0].Rows[i].Description);
                                  newNode.setAttribute("Text",ds.Tables[0].Rows[i].OrderID+" "+ds.Tables[0].Rows[i].CustomerID);
                                  
//注意 这边必须为OrderID,CustomerID即列名 要不就是无法显示
                                  if(newNode.getAttribute("NodeData")%10==0)
                                  
{
                                       
var loadNode=TreeView1.createTreeNode();
                                       loadNode.setAttribute(
"Text","Loading......");
                                       newNode.add(loadNode);
                                  }

                                  n.add(newNode);
                            }

                      }

                      
else{alert(response.error);}
                 }

                 
        
</ script >
        
< script  language ="javascript"  for ="TreeView1"  event ="onexpand" >
                 
//TODO:在此处填写TreeView的OnExpand事件的代码。
                 Index= window.event.treeNodeIndex;//获得展开的节点的位置,根节点为0。
                 if(Index=='0')return;//如果是根节点的话就直接返回。
                 ds();
        
</ script >
    
</ HEAD >
    
< body  MS_POSITIONING ="GridLayout" >
        
< form  id ="Form1"  method ="post"  runat ="server" >
            
< FONT  face ="宋体" >
                
< asp:label  id ="Label1"  runat ="server" > Label </ asp:label ></ FONT >
            
< div  id ="ta" ></ div >
            
< input  onclick ="ds()"  type ="button"  value ="clicking"  name ="bt" >
            
< iewc:TreeView  id ="TreeView1"  style ="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 64px"  runat ="server" ></ iewc:TreeView >
        
</ form >
    
</ body >
</ HTML >

 

 后台为:

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Data.SqlClient;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;
using  Microsoft.Web.UI.WebControls;
using  Microsoft.ApplicationBlocks.Data;

namespace  Workplace.Test
{
    
/// <summary>
    
/// AjaxTree 的摘要说明。
    
/// </summary>

    public class AjaxTree : System.Web.UI.Page
    
{
        
protected System.Web.UI.WebControls.Label Label1;
        
public System.Data.SqlClient.SqlConnection sqlConn;
        
protected Microsoft.Web.UI.WebControls.TreeView TreeView1;


        
private TreeNode LoadNode;
    
        
private void Page_Load(object sender, System.EventArgs e)
        
{
            BorgWorX.Web.Core.Ajax.Utility.RegisterTypeForAjax(
typeof(AjaxTree));

            
// 在此处放置用户代码以初始化页面
            LoadNode=new TreeNode();
            LoadNode.Text
="Loading......";
            LoadNode.ID
="load";

            
if(!IsPostBack)
            
{
                TreeNode root
=new TreeNode();
                root.Text
="Root";
                
//root.Nodes.Add(LoadNode);
                TreeView1.Nodes.Add(root);
                loadData(root,
0);
                root.Expanded
=true;
            }


        }


        
Web 窗体设计器生成的代码

        
private int getPreFix(string code)
        
{
            
string tempStr;
            
while(code.EndsWith("1"))
            
{
                code
=code.Remove(code.Length-2,2);
            }

            tempStr
=code;
            
return tempStr.Length==0?0:Convert.ToInt32(tempStr);
        }


        
/// <summary>
        
/// 
        
/// </summary>
        
/// <param name="path"></param>
        
/// <returns></returns>

        private TreeNode getNode(string path)
        
{
            TreeNode t
=TreeView1.GetNodeFromIndex(path);
            
return t;
        }




        
/// <summary>
        
///以某个节点为父节点添加节点
        
/// </summary>
        
/// <param name="rootNode"></param>
        
/// <param name="preFix"></param>

        private void loadData(TreeNode rootNode,int preFix)
        
{
            
string strSelectRoot="select * from Employees";
            SqlDataAdapter daRoot 
=new SqlDataAdapter(strSelectRoot,sqlConn);
            DataSet ds
=new DataSet();
            daRoot.Fill(ds);
//            DataSet ds=SqlHelper.ExecuteDataset(sqlConn,"sp_loadUNSPSCCodeByLevel",preFix);
            
//dg.DataSource=ds;
            
//dg.DataBind();
            foreach(DataRow r in ds.Tables[0].Rows)
            
{
                TreeNode t
=new TreeNode();
                TreeNode loadNode
=new TreeNode();

                loadNode.Text
="加载中......";

                t.Text
=r.ItemArray[0].ToString()+"  "+r.ItemArray[1].ToString();
                t.NodeData
=r.ItemArray[0].ToString();
                
if(t.NodeData.EndsWith("1"))
                
{
                    
                }

                
else
                
{
                    t.Nodes.Add(loadNode);
                }

                
                rootNode.Nodes.Add(t);
            }

        }


        
        
//[Ajax.AjaxMethod()]
        [BorgWorX.Web.Core.Ajax.AjaxMethod()]
        
public  DataSet returnDs(string PreFix)
        
{
            
int preFix=getPreFix(PreFix);
//            string str="workstation id=SCS-DINGSEA;packet size=4096;user=sa;data source=SCS-DINGSEA;persist security info=True;initial catalog=GEPS;password=sa";
//            string str="workstation id=ACE;packet size=4096;user id=sa;data source="10.7.1.113";persist s" +
//                "ecurity info=True;initial catalog=Northwind;password=sa";
//            DataSet ds=SqlHelper.ExecuteDataset(str,"sp_loadUNSPSCCodeByLevel",preFix);
            SqlConnection connSel=new SqlConnection("workstation id=ACE;packet size=4096;user id=sa;data source="10.7.1.113";persist security info=True;initial catalog=Northwind;password=sa");
            
string strSelectRoot="select * from orders";
            SqlDataAdapter daRoot 
=new SqlDataAdapter(strSelectRoot,connSel);
            DataSet ds
=new DataSet();
            daRoot.Fill(ds);
            
return ds;
        }

    }

}

 

当然,Web.config还是要改的

 

<? xml version="1.0" encoding="utf-8" ?>
< configuration >
  
< appSettings >

    
< add  key ="FCKeditor:BasePath"  value ="~/fckeditor/" />

    
< add  key ="FCKeditor:UserFilesPath"  value ="~/Files/" />
    
    
< add  key ="OraConnString"  value ="" />

  
</ appSettings >

  
< system .web >
      
< httpHandlers >
       
<!-- <add verb="POST,GET" path="ajax/*.ashx" type="BorgWorX.Web.Core.Ajax.PageHandlerFactory, Ajax" /> -->
       
< add  verb ="POST,GET"  path ="ajax/*.ashx"  type ="BorgWorX.Web.Core.Ajax.PageHandlerFactory, BorgWorX.Web.Core.Ajax"   />
    
</ httpHandlers >  

    
<!--   动态调试编译
          设置 compilation debug="true" 以启用 ASPX 调试。否则,将此值设置为
          false 将提高此应用程序的运行时性能。
          设置 compilation debug="true" 以将调试符号(.pdb 信息)
          插入到编译页中。因为这将创建执行起来
          较慢的大文件,所以应该只在调试时将此值设置为 true,而在所有其他时候都设置为
          false。有关更多信息,请参考有关
          调试 ASP.NET 文件的文档。
    
-->
    
< compilation  defaultLanguage ="c#"  debug ="true" >< assemblies >< add  assembly ="CrystalDecisions.CrystalReports.Engine, Version=9.1.5000.0, Culture=neutral, PublicKeyToken=692fbea5521e1304" />< add  assembly ="CrystalDecisions.ReportSource, Version=9.1.5000.0, Culture=neutral, PublicKeyToken=692fbea5521e1304" />< add  assembly ="CrystalDecisions.Shared, Version=9.1.5000.0, Culture=neutral, PublicKeyToken=692fbea5521e1304" />< add  assembly ="CrystalDecisions.Web, Version=9.1.5000.0, Culture=neutral, PublicKeyToken=692fbea5521e1304" /></ assemblies ></ compilation >

    
<!--   自定义错误信息
          设置 customErrors mode="On" 或 "RemoteOnly" 以启用自定义错误信息,或设置为 "Off" 以禁用自定义错误信息。 
          为每个要处理的错误添加 <error> 标记。

          "On" 始终显示自定义(友好的)信息。
          "Off" 始终显示详细的 ASP.NET 错误信息。
          "RemoteOnly" 只对不在本地 Web 服务器上运行的
           用户显示自定义(友好的)信息。出于安全目的,建议使用此设置,以便 
           不向远程客户端显示应用程序的详细信息。
    
-->
    
< customErrors  mode ="RemoteOnly" />  

    
<!--   身份验证 
          此节设置应用程序的身份验证策略。可能的模式是 "Windows"、 
          "Forms"、 "Passport" 和 "None"

          "None" 不执行身份验证。 
          "Windows" IIS 根据应用程序的设置执行身份验证 
            (基本、简要或集成 Windows)。在 IIS 中必须禁用匿名访问。
          "Forms" 您为用户提供一个输入凭据的自定义窗体(Web 页),然后 
           在您的应用程序中验证他们的身份。用户凭据标记存储在 Cookie 中。
          "Passport" 身份验证是通过 Microsoft 的集中身份验证服务执行的,
           它为成员站点提供单独登录和核心配置文件服务。
    
-->
    
< authentication  mode ="Windows" />  

    
<!--   授权 
           此节设置应用程序的授权策略。可以允许或拒绝不同的用户或角色访问
          应用程序资源。通配符: "*" 表示任何人,"?" 表示匿名
          (未经身份验证的)用户。
    
-->

    
< authorization >
        
< allow  users ="*" />   <!--  允许所有用户  -->
            
<!--   <allow     users="[逗号分隔的用户列表]"
                             roles="[逗号分隔的角色列表]"/>
                  <deny      users="[逗号分隔的用户列表]"
                             roles="[逗号分隔的角色列表]"/>
            
-->
    
</ authorization >

    
<!--   应用程序级别跟踪记录
          应用程序级别跟踪为应用程序中的每一页启用跟踪日志输出。
          设置 trace enabled="true" 可以启用应用程序跟踪记录。如果 pageOutput="true",则
          在每一页的底部显示跟踪信息。否则,可以通过浏览 Web 应用程序
           根目录中的 "trace.axd" 页来查看
          应用程序跟踪日志。
    
-->
    
< trace  enabled ="false"  requestLimit ="10"  pageOutput ="false"  traceMode ="SortByTime"  localOnly ="true" />

    
<!--   会话状态设置
          默认情况下,ASP.NET 使用 Cookie 来标识哪些请求属于特定的会话。
          如果 Cookie 不可用,则可以通过将会话标识符添加到 URL 来跟踪会话。
         若要禁用 Cookie,请设置 sessionState cookieless="true"。
    
-->
    
< sessionState  mode ="InProc"  stateConnectionString ="tcpip=127.0.0.1:42424"  sqlConnectionString ="data source=127.0.0.1;Trusted_Connection=yes"  cookieless ="false"  timeout ="20" />

    
<!--   全球化
          此节设置应用程序的全球化设置。
    
-->
    
< globalization  requestEncoding ="utf-8"  responseEncoding ="utf-8" />
   
 
</ system.web >

</ configuration >
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jquery的treeview 在显示大层次树是会卡死浏览器,我结合http://www.cnblogs.com/xuanye/archive/2009/10/26/1590250.html的改进版做的这个改进版(因为很多人没读他的源码,不知道怎么请求节点的处理页面),把asp.net的json序列化 都做了进去(Newtonsoft.jsonnet2.0.dll),,采用ajax+wrapperpage+usercontrol的模式生成json(因为牵涉公司两个配置文件,必须读配置信息连接数据库,绕了一下其实可以更轻量级的handler来处理,例子不能运行,但可以看看),同时扩展了很多的配置项都有说明,希望对大家有帮助 使用例如: <link href="lib/jquery/plugins/treeview/jquery.tree.css" rel="stylesheet" type="text/css" /> <script src="lib/jquery/jquery.js" type="text/javascript"></script> <script src="lib/jquery/plugins/treeview/js/jquery.tree.js" type="text/javascript"></script> <%--<script src="lib/jquery/plugins/treeview/js/getData.js" type="text/javascript"></script>--%> <script src="lib/jquery/plugins/treeview/js/common.js" type="text/javascript"></script> <%--<script src="lib/jquery/plugins/treeview/js/tree3.js" type="text/javascript"></script>--%> <!--你可以把下面的代码放到一个js文件当中--> <script type="text/javascript"> var checknodes = "HJH8,HJA5"; //你事先要传给树控件的 已选中节点 id $(document).ready(function() { var o = { isAsync: false, //是否异步获取节点,根据咱的要求 设为false url: "AjaxWrapperPages/AsyncGetTreeNodes.aspx", //请求节点的页面,如果没有改变文件路径 不用关心 cbiconpath: "lib/jquery/plugins/treeview/images/icons/", //同上 checkbox icon的目录位置 //icons: ["checkbox_0.gif", "checkbox_1.gif", "checkbox_2.gif"],//不用配置 emptyiconpath: "lib/jquery/plugins/treeview/images/s.gif", //checkbxo三态的图片 animate: true, //不用配置,动画没有效果 theme: "bbit-tree-lines", //bbit-tree-lines ,bbit-tree-no-lines,bbit-tree-arrows有线、没线、箭头 三个样式中选择 showcheck: true //是否显示复选框 , checkNodes: checknodes //上面 你事先要传给树控件的 已选中节点 id的变量 , rootText: "中石化单位"//根节点的文本 可为空 则没有根节点 建议起个有意义的名字描述这棵树 //,onnodeclick: function(item) { alert(item.text); } , dbconfigPath: "~/hanwayDbConfig.hwdb" //可去掉,这是我做测试用 可不用此配置 , conStr: "conStr" //连接字符串 你可直接传,考虑安全 可不用此配置 /************ 必填项 ****************/ , sqlPath: "~/Db.hwSql" //sql语句存放的文件位置 , sqlID: "dwdyinfo" //sql对应的sqlid , dtFields: "dm,zhdm,mc" //表的结构 控件之关心3个:“主键id 外(父)键id 节点文本” 依次','分开 , pnodeMark: "dyzhgx" //和上面的dtFields中的外键 用来构造过滤条件 如"zhdm='dyzhgx'" 查询出所有一级节点 }; $("#tree").treeview(o); //到服务器处理选中节点 $("#showchecked").click(function(e) { var changnodes = $("#tree").getTSVs(); //得到所有选中节点的id if (changnodes != null) { changnodes = changnodes.join(","); $.ajax({ type: "get", url: "some.aspx", data: "nodes="+changnodes, success: function(msg) { alert("Data Saved: " + msg); } }); } });
Vue Treeview是一个基于Vue.js的树形控件,它可以用于显示层次结构数据。动态是指在需要时才数据,而不是一次性所有数据。Vue Treeview可以通过异步来实现动态。 实现动态的步骤如下: 1. 在Vue组件中定义一个方法,用于异步数据。 2. 在Vue Treeview组件中设置load-children属性为true,表示启用异步。 3. 在Vue Treeview组件中设置load-children属性的值为异步数据的方法名。 下面是一个示例代码,演示如何使用Vue Treeview实现动态: ``` <template> <div> <vue-treeview :nodes="nodes" :load-children="true" :load-children-method="loadChildren"></vue-treeview> </div> </template> <script> import VueTreeview from 'vue-treeview'; export default { components: { VueTreeview, }, data() { return { nodes: [ { id: 1, label: 'Node 1', children: [], }, { id: 2, label: 'Node 2', children: [], }, ], }; }, methods: { loadChildren(node, done) { // 异步数据 setTimeout(() => { node.children = [ { id: 3, label: 'Node 3', children: [], }, { id: 4, label: 'Node 4', children: [], }, ]; done(); }, 1000); }, }, }; </script> ``` 在上面的代码中,loadChildren方法用于异步数据。当Vue Treeview需要子节点时,它会调用loadChildren方法,并传入当前节点和一个回调函数done。loadChildren方法可以通过异步请求获取子节点数据,并将子节点数据设置到当前节点的children属性中。当数据完成后,调用done函数通知Vue Treeview数据已经完成。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值