客户端使用JS排序数据列表资源-CSDN文库

共47个文件

gif：31个

js：6个

css：4个

需积分: 9 44 浏览量 2009-04-12 21:26:34 上传评论 1 收藏 110KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

sortabletable.zip （47个子文件）

sortableTable

images

icon-table-sort-asc.png 3KB

icon-table-sort-desc.png 3KB

icon-table-sort.png 3KB

up2.gif 60B

down.gif 54B

down2.gif 60B

up.gif 54B

sortableTable.css 1KB

index.htm 5KB

sortableTable.js 7KB

_common

sifr.js 29KB

sifr-debug.js 4KB

sifr-config.js 1KB

mootools.js 36KB

google-analytics.js 335B

.DS_Store 6KB

css

main.css 6KB

sIFR-screen.css 1KB

sIFR-print.css 873B

swf

eurostyle.swf 36KB

img

heading-requirements.gif 826B

nav-multibox.gif 622B

nav-roundedcorners.gif 999B

title-slideshow.gif 774B

title-roundedcorners.gif 1KB

heading-example.gif 585B

title-pageloader.gif 860B

nav-pageloader.gif 837B

title-slider.gif 461B

heading-browser.gif 1KB

title-sortabletable.gif 979B

title-validate.gif 628B

nav-slider.gif 469B

nav-lightbox.gif 644B

nav-slideshow.gif 729B

title-imagemenu.gif 830B

mootools-plugins.gif 1KB

nav-imagemenu.gif 794B

logo.gif 2KB

heading-features.gif 596B

title-lightbox.gif 631B

nav-validate.gif 606B

heading-downloads.gif 710B

heading-options.gif 535B

title-multibox.gif 619B

nav-sortabletable.gif 922B

heading-usage.gif 460B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>phatfusion : sortableTable</title> <link rel="stylesheet" href="../_common/css/main.css" type="text/css" media="all"> <link href="sortableTable.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../_common/js/mootools.js"></script> <script type="text/javascript" src="sortableTable.js"></script> </head> <body> <div id="container"> <div id="logo"><h1>phatfusion</h1></div> <div class="nav"><a href="../index.htm">home</a></div> <p class="desc">javascript and flash development.</p> <h2 class="sortabletable">sortableTable</h2> <p class="version">version 1.4</p> <p class="description">sort and filter tables.</p> <h3 class="example">example</h3> <div id="example"> <div class="tableFilter"> <form id="tableFilter" onsubmit="myTable.filter(this.id); return false;">Filter: <select id="column"> <option value="1">Firstname</option> <option value="2">Lastname</option> <option value="3">Department</option> <option value="4">Start Date</option> </select> <input type="text" id="keyword" /> <input type="submit" value="Submit" /> <input type="reset" value="Clear" /> </form> </div> <table id="myTable" cellpadding="0" cellpadding="0"> <thead> <th axis="number">ID</th> <th axis="string">Firstname</th> <th axis="string">Lastname</th> <th axis="string">Department</th> <th axis="date">Start Date</th> </thead> <tbody> <tr id="1"> <td class="rightAlign">1</td> <td>Sam</td> <td>Birch</td> <td>Programming</td> <td class="rightAlign">01/06/00</td> </tr> <tr id="2"> <td class="rightAlign">2</td> <td>George</td> <td>Lo</td> <td>Support</td> <td class="rightAlign">01/07/99</td> </tr> <tr id="3"> <td class="rightAlign">3</td> <td>kevin</td> <td>Walker</td> <td>Programming</td> <td class="rightAlign">01/06/05</td> </tr> <tr id="4"> <td class="rightAlign">4</td> <td>Peter</td> <td>Aland</td> <td>Project Management</td> <td class="rightAlign">23/10/06</td> </tr> <tr id="5"> <td class="rightAlign">5</td> <td>Rachel</td> <td>Dickinson</td> <td>Design</td> <td class="rightAlign">20/01/05</td> </tr> <tr id="6"> <td class="rightAlign">6</td> <td>John</td> <td>Tsang</td> <td>Support</td> <td class="rightAlign">05/10/05</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tfoot> </table> <script type="text/javascript"> var myTable = {}; window.addEvent('domready', function(){ myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}}); }); </script> </div> <h3 class="features">features</h3> <div id="features"> <ul> <li>sort on numbers, strings, dates and currency</li> <li>filtering on columns</li> </ul> </div> <h3 class="usage">usage</h3> <div id="usage"> <pre><code>var myTable = new sortableTable('myTable', { overCls: 'over', onClick: function(){alert(this.id)} });</code></pre> <p>Data types:</p> <dl> <dt>number</dt> <dd>123.45</dd> <dt>string</dt> <dd>firstname</dd> <dt>date</dt> <dd>YYYY-MM-DD, DD/MM/YY[YY], DD-MM-YY[YY]</dd> <dt>currency</dt> <dd>£100.00 (any currency as long as its a single symbol)</dd> </dl> <h3 class="options">options</h3> <dl> <dt>overCls</dt> <dd>the name of the class added when the mouse is over the tr.</dd> <dt>onClick</dt> <dd>the name of the function to call on the onClick event.</dd> <dt>sortOn</dt> <dd>the number of the column to initially sort on (zero based).</dd> <dt>sortBy</dt> <dd>the direction of the sort (ASC / DESC) (default: ASC).</dd> <dt>filterHide</dt> <dd>whether or not to show just the results. (default: true).</dd> </dl> </div> <h3 class="compatibility">browser compatibility</h3> <div id="compatibility"> <ul> <li>Firefox 2 (mac / pc)</li> <li>IE 7</li> <li>IE 6</li> <li>Safari (mac)</li> </ul> </div> <h3 class="requirements">requirements</h3> <div id="requirements"> <ul> <li><a href="http://www.mootools.net" target="_blank">mootools v1.11</a></li> </ul> </div> <h3 class="downloads">downloads</h3> <div id="downloads"> <ul> <li><a href="sortabletable.zip">sortabletable.zip</a></li> </ul> </div> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-3333085-1"); pageTracker._initData(); pageTracker._trackPageview(); </script> </body> </html>

评论收藏

内容反馈