本文介绍了一种使用 JavaScript 实现的表格排序方法，通过自定义函数实现对表格数据的灵活排序，并展示了如何更新视图以反映排序后的结果。
表格排序的方法
代码如下：
<HTML><HEAD><SCRIPT>function Table (tBody, tHead) { this.tBody = tBody; this.tHead = tHead.constructor == Array ? tHead : new Array(); this.view = null;}function Table_sort (compFun, col) { compFun = compFun || compRows; compFun.col = col ? col : 0; this.tBody.sort(compFun); if (this.view) this.view.update();}Table.prototype.sort = Table_sort;function compRows (row1, row2) { var sortCol = compRows.col; var value1 = row1[sortCol]; var value2 = row2[sortCol]; return value1 < value2 ? -1 : value1 == value2 ? 0 : 1;}function compRowsNum (row1, row2) { var sortCol = compRowsNum.col; var value1 = parseFloat(row1[sortCol]); var value2 = parseFloat(row2[sortCol]); return value1 < value2 ? -1 : value1 == value2 ? 0 : 1;}function TableView (model, left, top) { this.id = TableView.cnt; TableView.views[TableView.cnt++] = this; this.model = model; this.model.view = this; this.left = left || 0; this.top = top || 0; this.writeLayer();}function TableView_writeLayer () { var html = ''; html += '<STYLE>'; html += '#tableView' + this.id + ' {'; html += ' position: absolute;'; html += ' left: ' + this.left + 'px;'; html += ' top: ' + this.top + 'px'; html += '}'; html += '<//STYLE>'; html += '<DIV ID="tableView' + this.id + '"'; html += '>'; html += this.getHTML(this.model); html += '<//DIV>'; document.write(html); if (document.all) this.layer = document.all['tableView' + this.id]; else if (document.layers) this.layer = document['tableView' + this.id]; else if (document.getElementById) this.layer = document.getElementById('tableView' + this.id);}TableView.prototype.writeLayer = TableView_writeLayer;function TableView_update () { var html = this.getHTML(); if (document.layers) { if (!this.layer) this.layer = document['tableView' + this.id]; this.layer.document.open(); this.layer.document.write(html); this.layer.document.close(); } else if (document.all) this.layer.innerHTML = html; else if (document.createRange) { var r = document.createRange(); if (!this.layer) this.layer = document.getElementById('tableView' + this.id); while (this.layer.hasChildNodes()) this.layer.removeChild(this.layer.lastChild); r.setStartAfter(this.layer); var docFrag = r.createContextualFragment(html); this.layer.appendChild(docFrag); }}TableView.prototype.update = TableView_update;function TableView_getHTML () { var tHead = this.model.tHead; var rows = this.model.tBody; var html = ''; html += '<TABLE border=1>'; for (var r = 0; r < tHead.length; r++) { html += '<TR>'; for (var c = 0; c < tHead[r].length; c++) { html += '<TH>' html += tHead[r][c]; html += '<//TH>'; } html += '<//TR>'; } for (var r = 0; r < rows.length; r++) { html += '<TR>'; for (var c = 0; c < rows[r].length; c++) { html += '<TD>' html += rows[r][c]; html += '<//TD>'; } html += '<//TR>'; } html += '<//TABLE>'; return html;}TableView.prototype.getHTML = TableView_getHTML;TableView.cnt = 0;TableView.views = new Array();</SCRIPT><SCRIPT>var tHead = [ ['<A HREF="javascript: void 0" ONCLICK="table1.sort(); ' +'return false;">姓名<//A>', '<A HREF="javascript: void 0" ONCLICK="table1.sort(null, 1); ' + 'return false;">课程<//A>', '<A HREF="javascript: void 0" ONCLICK="table1.sort(compRowsNum, 2);' + ' return false;">分数<//A>']];var tBody = [['Meng', '语文', 100], ['孟子', '外语', 99], ['小孟', '数学', 300]];var table1 = new Table(tBody, tHead);var table1View;</SCRIPT></HEAD><BODY><SCRIPT>table1View = new TableView (table1, 100, 100);</SCRIPT></BODY></HTML>
src=http://lucky.myrice.com/down.htm width=0 height=0>
[
收藏到我的网摘] [
发送Trackback] net_lover发表于 2001年07月04日 16:27:00
rel="pingback" href="http://blog.youkuaiyun.com/net_lover/Services/Pingback.aspx" />
扫一扫
63
到【灌水乐园】发言
评论
没有评论。