โหลด dtree.js treeview แบบไดนามิก (โค้ดตัวอย่าง)

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-02-21 15:16:01

复制代码代码如下:

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

<html>

<หัว>

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

</หัว>

<ร่างกาย>

<div>

<p><a href="javascript: d.openAll();">เปิดทั้งหมด</a> | <a href="javascript: d.closeAll();">ปิดทั้งหมด</a></p>

d = dTree ใหม่ ('d');

d.add(0,-1,'แผนผังตัวอย่างของฉัน');

d.เพิ่ม(1,0,'โหนด 1','example01.html');

d.เพิ่ม(2,0,'โหนด 2','example01.html');

d.add(3,1,'Node 1.1','example01.html');

d.เพิ่ม(4,0,'โหนด 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,'รูปภาพของฉัน','example01.html','รูปภาพที่ฉันถ่ายมาตลอดหลายปีที่ผ่านมา','','','img/imgfolder.gif');

d.add(10,9,'การเดินทางสู่ไอซ์แลนด์','example01.html','รูปภาพของน้ำตกกุลล์ฟอสส์และไกเซอร์');

d.add(11,9,'วันเกิดแม่','example01.html');

d.add(12,0,'ถังรีไซเคิล','example01.html','','','img/trash.gif');

เอกสาร. เขียน(d);

</สคริปต์>

</div>

<p></p>

</ร่างกาย>

</html>

接下来我们可以分析我们要是想让他动态的生成我们要怎么处理

我们可以看到如下代码是生成树的关键:

复制代码代码如下:

<div>

<p><a href="javascript: d.openAll();">เปิดทั้งหมด</a> | <a href="javascript: d.closeAll();">ปิดทั้งหมด</a></p>

d = dTree ใหม่ ('d');

d.add(0,-1,'แผนผังตัวอย่างของฉัน');

d.เพิ่ม(1,0,'โหนด 1','example01.html');

d.เพิ่ม(2,0,'โหนด 2','example01.html');

d.add(3,1,'Node 1.1','example01.html');

d.เพิ่ม(4,0,'โหนด 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(11,9,'วันเกิดแม่','example01.html');

d.add(12,0,'ถังรีไซเคิล','example01.html','','','img/trash.gif');

เอกสาร. เขียน(d);

</สคริปต์>

</div>

我们是不是可以把上上的代码写到.cs文件里的呢！是可以的

首先我们必须在数据库建立一张表

我们看下其实这里的这么多表字段个人觉得pid子节点（如果是0那么就是根节点，1子节点，3子节点的子节点） name要显示的名称 url连接地址 title标题icon关闭上的路径 iconopen打闭上的路径这里不详细介绍了大家可以试下我们最主要的就是根据ชื่อผู้ใช้ 进行判断ตัวใหญ่下的我们来动态加载treeview

首先我们建立一个数据库连接类返回一个Dataset类型我是个人喜欢你们也可以直接返回一个DataTable

复制代码代码如下:

ชุดข้อมูลส่วนตัว GetDt (ชื่อผู้ใช้สตริง)

string strConn="server=ZHOUYUN;database=Mytest;uid=sa;pwd=123456";

SqlConnection conn = SqlConnection ใหม่ (strConn);

สตริง strSql = string.Format("

เลือก * จาก treeview โดยที่ชื่อผู้ใช้='{0}'",ชื่อผู้ใช้);

SqlDataAdapter da = SqlDataAdapter ใหม่ (strSql, conn);

ชุดข้อมูล ds = ชุดข้อมูลใหม่ ();

ดาเติม(ds);

กลับds;

然后我们把先我们生成书的js放到.cs文件里เลดี้来非常关键的一个就是注意.js文件的倒入和 .css文件的倒入我们可以用到Page.hearder.innerHTMl=""คุณ要倒入的文件名

我们来看代码

复制代码代码如下:

โมฆะสาธารณะ treeview()

//实力化一个长字符串类型

StringBuilder strbu = StringBuilder ใหม่ ();

// 我们在生成一个保留静态文本的位置的类

ตัวอักษรสว่าง = ตัวอักษรใหม่ ();

//这里就是我们刚才提到的要把.js和.cs文件倒入的位置

//page.Header.InnerHtml 意思就是把这段文件引用放到html标签里的

// <head>这个之间</head>

Page.Header.InnerHtml = @"<

ลิงค์ rel='StyleSheet' href='dtree.css' type='text/css'/>

ชื่อผู้ใช้สตริง = "จางซาน";

ชุดข้อมูล ds = GetDt(ชื่อผู้ใช้.Trim());

DataTable dt = ds.Tables[0];

//我们现上的始把js文件放到长字符串类型里เลดี้

strbu.Append(@"<div class='dtree'>

<p><a href='javascript: d.openAll();'>เปิดทั้งหมด</a> |

<a href='javascript: d.closeAll();'>ปิดทั้งหมด</a></p>

d = dTree ใหม่ ('d');

d.add(0,-1,'My example tree');");//这里结束一段长字符穿类型

// ฉันเริ่มต้นสร้าง DataTable

สำหรับ (int i = 1; i < dt.Rows.Count; i++)

// 我们又长文件类型大家这里注意了拼接字符穿

// 的时候要仔细点

strbu.ผนวก(@"

d.add(" + i + "," + dt.Rows["pid"] + `,'" +

dt.Rows["ชื่อ"] + "','" +

dt.Rows["url"] + "','" +

dt.Rows["เป้าหมาย"] + "','" +

dt.Rows["ไอคอน"] + "','"+

dt.Rows["iconopen"]+"');");

//再次添加长文件类型

strbu.ผนวก(@"document.write(d);

</สคริปต์>

</div> "); //长文件类型添加结束

//现在我们保留静态文本的text值就等于我们刚才的长文件类型的值

lit.Text = Convert.ToString(strbu);

//那么我们在想我怎么把个段文本放到<body>

//<form>这个位置呢</form><boy>

form1.InnerHtml = "";

//我们可以直接从.cs文件里เลดี้获得form1然后.Controls.Add()

// 他只能放静态文本所以我们把刚才长文件类型的值赋给了静态文本

//那么我们这里也就可以直接添加进来了

form1.Controls.Add (สว่าง);