Column
WEB tree structure program design under .NET platform
Li Honggen
My last article "Application of tree structure in development" is mainly implemented under Windows Form, telling below to implement the implementation under Web Form.
Overview
TreeView is an important control, either in VB.NET, C # or VB, Delphi, and other languages, it acts as a navigation role. In actual work, many cases need to connect TreeView with the database to fill its node. In Windows Form and Web Form, we can display tree structure with TreeView, such as displaying directory trees, display areas, classification display items. It can be said that in most software development, TreeView is an indispensable display control. Therefore, the design of the tree structure has become an eternal topic of software developers.
Tree structure display method
There are three ways to show a tree structure:
1. Fill the TreeView control directly in the TreeView designer or code when designing the interface.
2. Create a tree structure from the XML file.
3. Get data from the database to create a tree structure.
The first way is the easiest, this way is mainly used for applications that are generally not changed, and a tree is fixed when designing. Of course, the structure of the tree is fixed when designing, and then want to modify, increase, and delete the node of the tree, you must modify the source program. All is not intended to expand.
The second way is extracted from the XML file. Since the XML itself is a tree structure, Microsoft provides the document object model DOM convenient to read, operate, and modify the XML document. In .NET, Apply the System.xml class to easily load the XML file into the TreeView control, Microsoft's MSDN also provides an example, and there is no more.
In the third way, the data of the tree structure is obtained from the database. Generally speaking, most of our applications are based on a database. This way, increase, modify, and delete a tree is convenient, as long as the data in the database can be operated. Moreover, this approach can be associated with other tables in the database, queries and summarizes, easy to check the relevant data you want by designing views or stored procedures. Below, we mainly discuss the design and implementation of this approach.
Database Design
First, we establish a table TBTree in SQL Server 2000, the structure design of the table is as follows:
Column Name Data Type Description Length Primary Key
ID INT Node No. 4 is
ParentID Int Parent Node 4
Context nvarchar We want to display the node content 50
Construction tables in SQL Server 2000:
Create Table [DBO]. [TBTree] (
[ID] [INT] Identity (1, 1) Not NULL,
[Context] [nvarchar] (50) collate chinese_prc_ci_as null,
[Parentid] [int] NULL
) On [primary]
Add the following records in the table:
Set Identity_Insert Tbtree On
INSERT TBTREE (ID, Context, Parentid) Values (1, 'China ", 0)
INSERT TBTREE (ID, Context, Parentid Values (2, 'Beijing ", 11)
INSERT TBTREE (ID, Context, Parentid) Values (3, 'Tianjin ", 11)
INSERT TBTREE (ID, Context, Parentid) Values (4, 'Hebei Province ", 1)
INSERT TBTREE (ID, Context, Parentid) Values (5, 'Guangdong ", 1) INSERT TBTREE (ID, Context, Parentid) Values (6,' Guangzhou ', 5)
INSERT TBTREE (ID, Context, Parentid) Values (7, 'Sichuan ", 1)
INSERT TBTREE (ID, Context, Parentid) Values (8, 'Chengdu', 7)
INSERT TBTREE (ID, Context, Parentid) Values (9, 'Shenzhen', 5)
INSERT TBTREE (ID, Context, Parentid) VALUES (10, 'Shijiazhuang', 4)
INSERT TBTREE (ID, Context, Parentid) Values (11, 'Liaoning Province ", 1)
INSERT TBTREE (ID, Context, Parentid) Values (12, 'Dalian', 11)
INSERT TBTREE (ID, Context, Parentid) Values (13, 'Shanghai ", 1)
INSERT TBTREE (ID, Context, Parentid) Values (14, 'Tianhe Software Park ", 6)
INSERT TBTREE (ID, Context, Parentid) Values (15, 'Shantou ", 5)
Set Identity_INSERT TBTREE OFF
download link
Http://msdn.microsoft.com/downloads/sample/internet/asp_dot_net_serverControls/webControls/default.asp
After installation, the TreeView is added to the toolbox by "Custom Toolbox" -> ". Net Framework Components.
Create a new project, select the Visual Basic.Net Engineering ASP.NET web application, drag a TreeView control on the page.
HTML Page:
<% @ Register TagPrefix = "iewc" Namespace = "Microsoft.Web.UI.WebControls" Assembly = "Microsoft.Web.UI.WebControls, Version = 1.0.2.226, Culture = neutral, PublicKeyToken = 31bf3856ad364e35"%>
<% @ Page language = "vb" autoeventwireup = "false" codebehind = "Webform1.aspx.vb" inherits = "tree.webform1"%>%>
Webform1 </ Title></p>
<p><meta name = "generator" Content = "Microsoft Visual Studio .NET 7.0"></p>
<p><meta name = "code_language" content = "Visual Basic 7.0"></p>
<p><meta name = "vs_defaultclientscript" content = "javascript"></p>
<p><meta name = "vs_targetschema" content = "http://schemas.microsoft.com/intellisense/ie5"></p>
<p></ HEAD></p>
<p><body ms_positioning = "gridLayout"></p>
<p><form id = "form1" method = "post" runat = "server"></p>
<p><Font face = "Song"></p>
<p><IEWC: TreeView ID = "TreeView1" Style = "Z-Index: 101; Left: 39px; Top: 68px" Runat = "Server"> </ iewc: TreeView> </ font></p>
<p></ form></p>
<p></ body></p>
<p></ Html></p>
<p>Backstage code:</p>
<p>Private Sub Page_Load (Byvale AS System.Object, Byval E AS System.Eventargs) Handles MyBase.LOAD</p>
<p>DIM DS AS New DataSet ()</p>
<p>DIM CN As New SqlConnection ()</p>
<p>Try</p>
<p>'Initializing the connection string</p>
<p>Cn.connectionstring =</p>
<p>"Data Source = PMServer; Initial Catalog = Benchmark; Persist Security Info = False; User ID = SA; Password = SA;"</p>
<p>Cn.open ()</p>
<p>DIM ADP As SqldataAdapter = New SqldataAdapter ("Select * from TBTree", CN)</p>
<p>ADP.FILL (DS)</p>
<p>Me.ViewState ("DS") = DS</p>
<p>Catch exception</p>
<p>#If debug the</p>
<p>Session ("error") = ex.toString ()</p>
<p>Response.Redirect ("ERROR.ASPX") 'Jump Program Public Error Processing Page</p>
<p>#End IF</p>
<p>Finally</p>
<p>'Close connection</p>
<p>Cn.close ()</p>
<p>END TRY</p>
<p>'Call the recursive function, complete the generation of the tree structure</p>
<p>AddTree (0, Nothing)</p>
<p>End Sub</p>
<p>'Removing the node of adding a tree</p>
<p>Private Sub Addtree (byval Parentid As Integer, Byval Pnode As Treenode)</p>
<p>DIM DS AS Dataset</p>
<p>DS = Me.ViewState ("DS")</p>
<p>DIM DVTREE AS New DataView ()</p>
<p>DVTree = New DataView (ds.tables (0))</p>
<p>'Filter ParentID to get all current child nodes</p>
<p>Dvtree.rowfilter = "ParentId =" ParentId.tostring</p>
<p>DIM ROW AS DATAROWVIEW</p>
<p>For Each Row in Dvtree</p>
<p>DIM Node as new treenode () if pnode is nothing the 'judgments whether the root node</p>
<p>'Add root node</p>
<p>Node.text = row ("context"). Tostring ()</p>
<p>TreeView1.nodes.add (Node)</p>
<p>Node.expanded = true</p>
<p>'Regeneration again</p>
<p>AddTree (INT32.PARSE (Row ("ID"). Tostring ()), NODE</p>
<p>Else</p>
<p>'Add a child node of the current node</p>
<p>Node.text = row ("context"). Tostring ()</p>
<p>Pnode.nodes.add (node)</p>
<p>Node.expanded = true</p>
<p>'Regeneration again</p>
<p>AddTree (INT32.PARSE (Row ("ID"). Tostring ()), NODE</p>
<p>END IF</p>
<p>NEXT</p>
<p>End Sub</p>
<p>C # version:</p>
<p>Using system;</p>
<p>Using system.collections;</p>
<p>Using system.componentmodel;</p>
<p>Using system.data;</p>
<p>Using system.drawing;</p>
<p>Using system.Web;</p>
<p>Using system.Web.SessionState;</p>
<p>Using system.Web.ui;</p>
<p>Using system.Web.ui.webcontrols;</p>
<p>Using system.Web.ui.htmlcontrols;</p>
<p>USING Microsoft.Web.ui.WebControls;</p>
<p>Using system.data.sqlclient;</p>
<p>Namespace Treecs</p>
<p>{</p>
<p>///</p>
<p>/// WebForm1 summary description</p>
<p>///</p>
<p>Public class Webform1: System.Web.ui.page</p>
<p>{</p>
<p>Protected Microsoft.Web.ui.WebControls.treeView TreeView1;</p>
<p>Private Void Page_Load (Object Sender, System.EventArgs E)</p>
<p>{</p>
<p>/ / Define database connections</p>
<p>SqlConnection CN = New SQLCONNECTION ();</p>
<p>Try</p>
<p>{</p>
<p>// Initialize the connection string</p>
<p>Cn.connectionstring =</p>
<p>"Data Source = PMSERVER; Initial Catalog = Benchmark; Persist Security Info = false; user ID = sa; password = sa;"</p>
<p>Cn.open ();</p>
<p>SqlDataAdapter ADP = New SqldataAdapter ("Select * from TBTree", CN);</p>
<p>DataSet DS = New DataSet ();</p>
<p>ADP.FILL (DS);</p>
<p>THIS.VIEWSTATE ["DS"] = DS;</p>
<p>}</p>
<p>Catch (Exception EX)</p>
<p>{</p>
<p>Session ["Error"] = ex.totring ();</p>
<p>Response.Redirect ("Error.aspx"); // Public Error Processing Page of Jump Programs</p>
<p>}</p>
<p>Finally</p>
<p>{</p>
<p>Cn.close ();</p>
<p>}</p>
<p>// Call the recursive function and complete the generation of the tree structure</p>
<p>AddTree (0, (Treenode) NULL;</p>
<p>}</p>
<p>// Regenerate the node of the tree</p>
<p>Public void addtree (int parentid, treenode pnode)</p>
<p>{</p>
<p>DataSet DS = (Dataset) this.viewState ["DS"]; DataView DVTree = New DataView (ds.tables [0]);</p>
<p>// Filter ParentID to get all the current child nodes</p>
<p>Dvtree.rowfilter = "[parentid] =" ParentID;</p>
<p>Foreach (DataRowView Row In Dvtree)</p>
<p>{</p>
<p>Treenode node = new treenode ();</p>
<p>IF (pnode == null)</p>
<p>{// Add root node</p>
<p>Node.text = row ["context"]. TOSTRING ();</p>
<p>TreeView1.nodes.Add (Node);</p>
<p>Node.expanded = true;</p>
<p>AddTree (Int32.Parse (ROW ["ID"]. TOSTRING ()), Node); // Regeneration again</p>
<p>}</p>
<p>Else</p>
<p>{// Add the child node of the current node</p>
<p>Node.text = row ["context"]. TOSTRING ();</p>
<p>Pnode.nodes.add (node);</p>
<p>Node.expanded = true;</p>
<p>AddTree (Int32.Parse (ROW ["ID"]. TOSTRING ()), Node); // Regeneration again</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>#Region Web Form Designer Generated Code</p>
<p>Override protected void oninit (Eventargs E)</p>
<p>{</p>
<p>//</p>
<p>// Codegen This call is required for the ASP.NET Web Form Designer.</p>
<p>//</p>
<p>InitializationComponent ();</p>
<p>Base.onit (e);</p>
<p>}</p>
<p>/// <summary></p>
<p>/// Designer supports the required method - do not use the code editor to modify</p>
<p>// This method's content</p>
<p>/// </ summary></p>
<p>Private vidinitiRizeComponent ()</p>
<p>{</p>
<p>This.Load = New System.EventHandler (this.page_load);</p>
<p>}</p>
<p>#ndregion</p>
<p>}</p>
<p>}</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-70294.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="70294" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.036</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'nq26esMUbwoTs7pJfbExCKPo3VDavnkkIjVkn8Y8Gie00gqUmZgUv4XMshdPrNB6lKghq6ADkOvuLU9uGbOo5w_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
