asp.net动态加载dtree.js树treeview

来源:互联网 发布:百度网盘网络出错 编辑:程序博客网 时间:2024/04/30 18:47
首先大家可以去下载一个dtree的js文件 网上一大把 这是一个外国人写的非常出名


下载的时候除了aspx页面是没有的 aspx页面是我们下面要说的动态生成treeview的
有的时候我们需要对用户的一个权限进行管理起来那么我们必须怎么做呢!

刚开始的时候我们是不是必须判断用户名!你浏览example01.html的时候会发现如下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Destroydrop » Javascripts » Tree</title>

<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>

</head>
<body>

<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
  <!--

  d = new dTree('d');
  d.add(0,-1,'My example tree');
  d.add(1,0,'Node 1','example01.html');
  d.add(2,0,'Node 2','example01.html');
  d.add(3,1,'Node 1.1','example01.html');
  d.add(4,0,'Node 3','example01.html');
  d.add(5,3,'Node 1.1.1','example01.html');
  d.add(6,5,'Node 1.1.1.1','example01.html');
  d.add(7,0,'Node 4','example01.html');
  d.add(8,1,'Node 1.2','example01.html');
  d.add(9,0,'My Pictures','example01.html','Pictures I've taken over the years','','','img/imgfolder.gif');
  d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
  d.add(11,9,'Mom's birthday','example01.html');
  d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
  document.write(d);

  //-->
</script>

</div>
<p></p>
</body>
</html>

接下来我们可以分析 我们要是想让他动态的生成 我们 要怎么处理
我们可以看到如下代码是生成树的关键:
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
  <!--

  d = new dTree('d');
  d.add(0,-1,'My example tree');
  d.add(1,0,'Node 1','example01.html');
  d.add(2,0,'Node 2','example01.html');
  d.add(3,1,'Node 1.1','example01.html');
  d.add(4,0,'Node 3','example01.html');
  d.add(5,3,'Node 1.1.1','example01.html');
  d.add(6,5,'Node 1.1.1.1','example01.html');
  d.add(7,0,'Node 4','example01.html');
  d.add(8,1,'Node 1.2','example01.html');
  d.add(9,0,'My Pictures','example01.html','Pictures I've taken over the years','','','img/imgfolder.gif');
  d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
  d.add(11,9,'Mom's birthday','example01.html');
  d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
  document.write(d);

  //-->
</script>

</div>

我们是不是可以把上面的代码写到.cs文件里面呢! 是可以的
首先我们必须在数据库建立一张表

我们看下其实这里的这么多表字段 个人觉得 pid子节点(如果是0那么就是根节点,1子节点,3子节点的子节点) name要显示的名称 url连接地址 title标题 icon关闭图片的路径 iconopen打开图片的路径 这里不详细介绍了 大家可以试下 我们最主要的就是根据username 进行判断 大家也可以是把username换成是引用的字段 我这里只是一个测试的所以就用了个字符串类型 下面我们来动态加载treeview
首先我们建立一个数据库连接类返回一个Dataset类型 我是个人喜欢你们也可以直接返回一个DataTable

private DataSet GetDt(string username)
    {
        string strConn="server=ZHOUYUN;database=Mytest;uid=sa;pwd=123456";
        SqlConnection conn = new SqlConnection(strConn);
        string strSql = string.Format("
        select * from treeview where username='{0}'",username);
        SqlDataAdapter da = new SqlDataAdapter(strSql, conn);
        DataSet ds = new DataSet();
        da.Fill(ds);
        return ds;
     
    }

然后我们把先我们生成书的js放到.cs文件里面来 非常关键的一个就是注意.js文件的倒入 和 .css文件的倒入 我们可以用到Page.hearder.innerHTMl=""你要倒入的文件名
我们来看代码

public void treeview()
    {
        //实力化一个长字符串类型
        StringBuilder strbu = new StringBuilder();
      //我们在生成一个保留静态文本的位置的类
        Literal lit = new Literal();
      //这里就是我们刚才提到的要把.js和.cs文件倒入的位置
        //page.Header.InnerHtml的意思就是把这段文件引用放到html标签里的
      // <head>这个之间</head>
        Page.Header.InnerHtml = @"<
        link rel='StyleSheet' href='dtree.css' type='text/css'/>
        <script type='text/javascript' src='dtree.js'></script>";//倒入结束

        string username = "zhangsan";
        DataSet ds = GetDt(username.Trim());
        DataTable dt = ds.Tables[0];
      //我们现在开始把js文件放到长字符串类型里面

        strbu.Append(@"<div class='dtree'>
        <p><a href='javascript: d.openAll();'>open all</a> |
        <a href='javascript: d.closeAll();'>close all</a></p>
        <script type='text/javascript'>
        <!--
        d = new dTree('d');
        d.add(0,-1,'My example tree');");//这里结束一段长字符穿类型
      // 我们开始循环DataTable
        for (int i = 1; i < dt.Rows.Count; i++)
        {
            //我们又开始添加长文件类型 大家这里注意了拼接字符穿
            //的时候要仔细点
            strbu.Append(@"
            d.add(" + i + "," + dt.Rows["pid"] + ",'" +
                          dt.Rows["name"] + "','" +
                          dt.Rows["url"] + "','" +
                          dt.Rows["target"] + "','" +
                          dt.Rows["icon"] + "','"+
                          dt.Rows["iconopen"]+"');");
        }
        //再次添加长文件类型
        strbu.Append(@"document.write(d);
        -->
    </script>
        </div> "); //长文件类型添加结束
        //现在我们保留静态文本的text值就等于 我们刚才的长文件类型的值
        lit.Text = Convert.ToString(strbu);
        //那么我们在想 我怎么把个段文本放到<body>
        //<form>这个位置呢</form><boy>
        form1.InnerHtml = "";
        //我们可以直接从.cs文件里面获得form1然后.Controls.Add()
        //他只能放静态文本所以我们把刚才长文件类型的值赋给了静态文本
        //那么我们这里也就可以直接添加进来了
        form1.Controls.Add(lit);
}
原创粉丝点击