2. Tech
  3. [Repost] Take a tree list with TreeView

[Repost] Take a tree list with TreeView

xiaoxiao2021-03-06  18

Previously, if you want to use the tree control in the web page, there will be some troubles, sometimes you should write the code yourself to reach the purpose of displaying the data with the tree list. In ASP.NET, we can easily use the Internet Exploer Web Controls control provided by Microsoft to implement the tree list. In Microsoft, this Internet Explore Web Controls control collection includes MultiPage, Tabstrip, Toolbar, TreeView controls. In this article, let's look at how to use the TreeView control and XML in ASP.NET to implement the tree list.

Microsoft's set of controls can be downloaded in http://asp.net/iewebcontrols/download.aspx?tabindex=0&tabid=1, and run the setup installation after downloading. Now let's try to make a simple example with the TreeView control.

In the new web project in VS.NET, then in the toolbox, the mouse button pops up, select "Add New Item", in the custom toolbox, select the TreeView control (Note that the namespace is Microsoft Internet EXPLOERE Web Control's namespace), you can appear in the toolbox in the toolbox.

Next, drag the TreeView control into the form, switch to the HTML view, then find the following code:

<% @ Register tagprefix = "IE" namespace = "microsoft.web.ui.webcontrols" assembly = "Microsoft.Web.ui.WebControls"%>

Of course, you can change the tagrefix tag value, for example, change to FOOBAR, then use the TreeView control, use it as follows:

Now, we can add all kinds of nodes to the tree by selecting the Nodes attributes in the property box of the TreeView control, which is not detailed herein. Below is the code after adding a variety of nodes:

. . . . . . We specially pay attention to the Expanded attribute in Expanded = "True", which is loaded when the page is loaded, when the page is loaded, the tree control is loaded. It is fully expanded.

The above is a method of static adding data to a tree control when designing. Since the XML is essentially a structure of the tree structure, the data can be dynamically loaded into the control by binding to the tree control by using an XML file, there are two ways to implement:

1) Two additional XML files in line with TreeView format

2) Transform XML via XSL.

Let's first look at the first method, build an XML file as an example, named aspnetbooks.xml:

Designing Active Server Pages </ title> <authors > <Author> mitchell </ author> </ authors> <year> 2000 </ year> </ book></p> <p><book price = "34.95"> <title> ASP.NET: TIPS, TUTORIALS, AND CODE </ Title> <authors> <author> mitchell </ author> <author> Mack </ author> <author> walther </ Author> <author> seven </ author> <author> Anders </ author> <author> Nathan </ author> <author> wahlin </ author> </ authors> <year> 2001 </ year> </ book></p> <p><book price = "24.95> <title> asp unleashed </ title> <authors> <author> walther </ author> </ authors> <year> 1998 </ year> </ book> </ books></p> <p>If we use the first method, you must rewrite the XML, indicated in the following form, to be bound to the tree control.</p> <p><Treenodes> <Treenode text = "..."> <Treenode text = "..."> </ treenode></p> <p><Treenode Text = "..." /></p> <p>... </ Treenodes></p> <p>That is to say, the root node must be Treenodes (case in cases do not matter), each sub-node must be arranged in the form of <TREENODE>. So, we have rewritten the original XML file as the following form:</p> <p><? XML Version = "1.0" encoding = "utf-8"?> <Treenodes> <Treenode text = "TEACH YOURSELF ACTIVE SERVER_U80? AGES 3.0 in 21 days> <Treenode Text =" Price - $ 34.95 "/> <Treenode Text = "authors"> <treenode text = "mitchell" /> <Treenode text = "atkinson" /> </ Treenode> <Treenode text = "Year Published - 2000" /> </ TREENODE> <Treenode text = "Designing Active Server Pages> <Treenode Text = "Price - $ 29.95" /> <Treenode Text = "Authors> <Treenode Text =" Mitchell "/> </ Treenode> <Treenode Text =" Year Published - 2000 "/> < / Treenode> </ treenodes></p> <p>Add the following code:</p> <p><form runat = "server"> <IE: TreeView Runat = "Server"> <IE: Treenode Runat = "Server" text = "asp.net books" expanded = "true" treenodesrc = "aspnetbooks.xml" /> <ASPNetBooks.xml / IE: TreeView> </ form></p> <p>This will then bind the XML file to the tree control. You can see the result after running:</p> <p>ASP.NET Books Teach Yourself Active Server Pages 3.0 in 21 Daysdesigning Active Server PageSASP.NET: TIPS, TUTORIALS, AND CODEPROGRAMMING ASP.NET</p> <p>It can be seen that the first method is confirmed, and the node of XML cannot be filtered or otherwise. And if the XSL of the second method is used, the original XML can be formatted to the original XML can be performed as needed. It is very convenient.</p> <p>When using XSL, the tree control can be binded by using the following method:</p> <p><form runat = "server"> <IE: TreeView Runat = "Server"> <IE: Treenode Runat = "Server" text = "ASP.NET books" expanded = "TREENODESRC =" ASPNETBOOKS.XML "TREENODEXSLTSRC =" aspbooks.xsl "/> </ ie: TreeView> </ form> where the TREENODEXSLTSRC's properties specify the XSL file to be converted, our XSL files are as follows:</p> <p><XSL: Stylesheet XMLns: XSL = "http://www.w3.org/1999/xsl/transform" Version = '1.0'> <xsl: template match = "/ books"> <treenodes> <xsl: for- Each select = "book"> <Treenode> <xsl: attribute name = "text"> <xsl: value-of select = "title" /> </ xsl: attribute></p> <p><Treenode> <XSL: Attribute Name = "Text"> Price - $ <xsl: value-of select = "@ price" /> </ xsl: attribute> </ treenode></p> <p><Treenode Text = "Authors> <xsl: for-each select =" authors / author "> <Treenode> <XSL: attribute name =" text "> <xsl: value-of select =" text () "/> </ xsl: attribute> </ treenode> </ xsl: for-each> </ treenode></p> <p><TREENODE> <XSL: Attribute Name = "Text"> Year Published - <xsl: value-of select = "year" /> </ xsl: attribute> </ treenode> </ treenode> </ xsl: for-Each > </ Treenodes> </ xsl: template> </ xsl: stylesheet></p> <p>In the XSL above, we pass the same</p> <p><xsl: attribute name = "text"> <xsl: value-of select = "title" /> </ xsl: attribute></p> <p>Attribute setting, extract each node in the XML file, assign it to the TEXT property of Treenode. Of course, it is also possible to set the node to display in XPath or the like in XSL. After running, the result is the same as the first method, the tree control can be correctly displayed, and the flexibility is relatively high.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-41917.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="41917" 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.044</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 = 'qKPJ3LbsAZTYYpJzydSFfbX6nJ0xmV2pNOpDd27HjnXqf2uehFT3D5HM5lgSe9Ui3xrCQY7DyqzM_2FEHxiC8svQ_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>