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 Sort by 2 Files: PAixu.xml and PAixu.xsl
Role: In the case of not refreshing the new page, the user's own needs to be resembled, effectively improve the data interaction function, so that your page is more colorful. Effect: Browse here code: paixu.xml 1 Sailflying A simple sorting 2002-1-11 17:35:33 XML topic 2 flyingbird Marry you, it is to hurt 2001-09- 06 12:45:51 Irrigation essence 3 Huanzi Regular expression in UBB Application in the Forum 2001-11-23 21:02:16 web programming essence 4 Tailang The classic scorpion party complete manual V0.1 2000-12-08 10:22:48 Forum Irrigation District < / blue_class> 5 mmkk ASP error message summary 2001-10-13 16:39:05 javascript scripting
PAIXU.XSL XML volume actual battle (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 #ccccccc #cccccc; cellpadding: 3; cellspacing: 3; bgcolor: #eeeeee; text-decoration: blink} span {font-size: 12px; color: red;} </ style> <script> function taxis (x) {stylesheet = document.XSLDocument; 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 =" # ffffff "bordercolorlight =" # adaaAad "> <tr bgcolor =" # ffcc99 "align =" center "> <td style =" cursor: s-resize "onclick = "TAXIS ('Blue_ID')"> Number </ TD> <TD Style = "Cursor: S-Resize"</p>
<p>OnClick = "'Blue_Name')> Name </ TD> <TD Style =" CURSOR: S-Resize "OnClick =" TAXIS ('Blue_Text') "> Topic </ TD> <TD Style =" CURSOR: S-Resize "onclick =" "" "" "" "" ""> "" ">" ""> "" ">" ">" ">" ""> ""> ""> ""> "" ">" ""> ""> "" ""> "" ">" ""> ">" / TR> <XSL: Apply-Templates Select = "Team" ORDER-by = "Blue_ID" /> </ table> </ xsl: template> <xsl: template match = "team"> <tr align = "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 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> explanation: 1) PAIXU.XML Yes 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:</p>
<p>Sortfield = document.xsldocument.selectSinglenode ("@ ORDER-BY"); the role is to find the first node with ORDER-BY, so it corresponds to <xsl: Apply-Templates Select = "Team "ORDER-by =" blue_id "/> So the value value of 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.</p>
<p>(2) Text:</p>
<p>ORDER-by this can not be less, otherwise it can be found, the effect, you look at it! !</p>
<p><? XML Version = "1.0" encoding = "GB2312"?> In addition: in most XML textbooks displayed in the code, ENCODING = "GB2312", so we used Chinese in XML When you have an error, the reason is not to write this declaration.</p>
<p>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-95750.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="95750" 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.040</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 = 'UXR8_2FUpx8lQ_2Bx_2BX6N392dxCzhe3WCMyuE7_2FQh7h9IESy2SGWl66TirfzOUiu6RUYdv05k9_2F3wmAuGb1dbG1Idg_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>
