Motivation: Sorting features make the data on our page more user-friendly, which is a very common functional effect that we have seen on our website. Previous automatic sorting is done with a large number of script code, which is difficult for general enthusiasts. However, if you use XML, it is more simple. Let your own page is more beautiful, haha, are you still a heart! Material: XML volume dynamic sorting has 2 files: paixu.xml and paixu.xsl effect: In the case of not refreshing the page, the user's own needs to re-sort the data, effectively improve the data interaction function, let yourself The page is more colorful. Effect: Browse here code: paixu.xml
Program code: [Copy code to clipboard]
1 Sailflying A simple sorting 2002-1-11 17:35:33 xml topic < Team> 2 flyingbird Marry you, is you want you to hurt 2001-09-06 12:45:51 Irrigation essence 3 Changer Regular expression in UBB Forum < Blue_time> 2001-11-23 21:02:16 Web programming essence 4 Tai Lo Year-end Classic True Party Complete Manual V0.1 2000-12-08 10:22:48 Forum Irrigation District 5 mmkk ASP error message 2001 2001-10-13 16:39:05 javascript script PAIXU.XSL
Program code: [Copy code to clipboard]
XML volume actual combat kit (1): Dynamic Sorting </ Title> <style> body, blueidea, team, blue_id, blue_name, blue_text, Blue_time, blue_class {font: 12px "Song", "Arial", "Times New Roman";} Table {font-size: 12px; border: 0px double; border-color: # 99cc99 # 99cc99 #cccccccccccccccccccccccccccccccccccccccccccc; cellpadding: 3; cellspacing: 3; bgcolor: #eeeee; text-decoration: blink} span {font-size: 12px; color: red;} </ style> <script> function taxis (x) {styletet = document.xsldocument; source; source = document.XMLDocument; sortField = document.XSLDocument.selectSingleNode ( "// @ order-by"); sortField.value = x; Layer1.innerHTML = source.documentElement.transformNode (stylesheet);} </ script> </ head > <body> <p align = "center"> <span> XML volume actual combat kit (1): Dynamic sorting </ span> </ p> <div id = "layer1" name = "layer1"> <XSL : Apply-Templates Select = "Blueidea" /> </ div> </ body> </ html> </ xsl: template> <xsl: template match = "blueidea"> <table width = "500" border = "1 "Align =" center "cellpadding =" 1 "cellspacing =" 1 "bordercolordark =" # fffff "bordercolorlight =" # adaaAad "> <tr bgcolor =" # ffcc9 9 "Align =" center "> <TD style =" CURSOR: S-Resize "onclick =" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ('Blue_Name') "> Name </ TD> <TD Style =" CURSOR: S-Resize "OnClick =" TAXIS ('Blue_Text') "></p>
<p>Topic </ TD> <TD Style = "CURSOR: S-Resize" OnClick = "TAXIS ('Blue_Time')"> Published Time </ TD> <TD Style = "CURSOR: S-Resize" OnClick = "TAXIS (' Blue_class') "> Class-class </ td> </ tr> <xsl: Apply-Templates Select =" Team "ORDER-by =" Blue_ID "/> </ table> </ xsl: template> <xsl: template match = "Team"> <tril_ = "center"> <xsl: Apply-templates select = "blue_id" /> <xsl: Apply-templates select = "blue_name" /> <xsl: Apply-Templates SELECT = "Blue_Text" /> <XSL: Apply-Templates Select = "Blue_time" /> <xsl: Apply-Templates SELECT = "Blue_class" /> </ tr> <xsl: template> <xsl: template match = "blue_id"> <TD Bgcolor = "# eeeeee"> <xsl: value-of /> </ td> </ xsl: template> <xsl: template match = "blue_name"> <td> <xsl: value-of /> </ td> </ xsl: template> <xsl: template match = "blue_text"> <TD> <xsl: value-of /> </ td> </ xsl: template> <xsl: template match = "blue_time"> <td> <xsl: value-of /> </ td> </ xsl: template> <xsl: template match = "blue_class"> <td> <xsl: value-of /> </ td> </ xsl: template> < / XSL: Stylesheet></p>
<p>Explain: 1) paixu.xml is a data file, I believe everyone will not have problems. 2) paixu.xsl is a format file, and there are several places to pay attention. (1) Script: Sortfield = Document.xsldocument.selectsinglenode ("@ ORDER-BY"); the role is to find the first node with the ORDER-BY, so its corresponding node is <XSL: Apply -Templates select = "team" ORDER-BY = "Blue_ID" /> The value value of the order-by is Blue_ID when the initial online is. And we are redefined by redefining the value value of ORDER-BY to reach sorting. Layer1.innerhtml = source.documentelement.TransFormNode (Stylesheet); Role is to change Layer1 after transforming XML data, so after the outgoing parameter 'blue_name', <TD Style = "CURSOR: S-Resize" OnClick = "TAXIS (' Blue_name "> Name </ td> We modified the value of the order-by to is 'blue_name', which is sorted by 'Blue_name'. Then display the new sorting content by replaying the InnerHTML value of Layer1. (2) In the text: ORDER-by this can not be less, otherwise it can be found, the effect, you look at it! ! Program code: [Copy code to clipboard]</p>
<p><? XML Version = "1.0" encoding = "GB2312"?></p>
<p>In addition, it is a little in most of the code displayed in most XML textbooks. Postscript: Everyone is familiar with dynamic sorting, it will find that our implementation is simple. That is to modify the value of the ORDER-BY and then redisplay. In the function of dynamic query and dynamic paging, we are still done according to this idea.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-70170.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="70170" 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.038</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 = 'K9VMg_2F36FsU0yJSIwys4veKcW39Y1VlNR_2FlDAAv1HnEiZ2edeYS9eiOWOdHCJeL_2BRPa5RkTlpnhcV_2BUy';
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>
