<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>表格排序</title>
<style type="text/css">
table{
border-collapse:collapse;
}
.STYLE2 {color: #339966}
.STYLE3 {color: #0000FF}
.STYLE4 {color: #FF0000}
</style>
<script type="text/javascript" src="TableOrder.js"></script>
<script type="text/javascript">
function bindEvnetHandler(){
var oInputs=document.getElementsByTagName("input");
for(var i=0;i<oInputs.length;i++){
oInputs[i].onclick=callAfterOrder;
}
}
function callAfterOrder(e){
var evt=e||window.event;
var srcEl=evt.target||evt.srcElement;
alert(srcEl.value);
}
var oTOrder2;
window.onload=function(){
var oTOrder1=new TableOrder("t1");
oTOrder1.init();
oTOrder2=new TableOrder("t3",{
sortcols:[0,2],
getfuncs:{
0:function(oTd){return parseInt(oTd.innerHTML)},
2:function(oTd){
var oInput=oTd.getElementsByTagName("input")[0];
return oInput.value;
}
},
callAfterOrder:bindEvnetHandler
});
oTOrder2.init();
}
</script>
</head>
<body>
<fieldset>
<legend>使用方法</legend>
<ul>
<li>引入js文件TableOrder.js</li>
<li>将图片文件拷贝到项目目录中的合适位置</li>
<li>使用语句<span class="STYLE3">var</span> oTOrder<span class="STYLE3">=new</span> TableOrder<span class="STYLE3">(</span>"<tableid|table object>"<span class="STYLE3">[</span>,<span class="STYLE3">{</span>
<ul>
<li> sortcols:<span class="STYLE3">[</span>0,2<span class="STYLE3">]</span>,<span class="STYLE2">//排序列索引，若不制定则所有列均可排序</span></li>
<li>getfuncs:<span class="STYLE3">{</span>0:function<span class="STYLE3">(</span>oTd<span class="STYLE3">){</span>..<span class="STYLE3">}</span>..<span class="STYLE3">}</span><span class="STYLE2">//获取排序值函数，0代表第0列函数，一次类推，若不制定则按</span></li>
<li>单元格字符排序</li>
<li>callAfterOrder:<span class="STYLE2">//排序后调用函数</span></li>
</ul>
</li>
<li><span class="STYLE3">}])</span>;</li>
<li>调用oTOrder.init();舒适化</li>
</ul>
</fieldset>
<br/>
<fieldset>
<legend>简单排序例子</legend>
<table id="t1" width="540" border="1" cellspacing="0" cellpadding="0" bordercolor="#ACA899">
<tr>
<td width="164">表头1</td>
<td width="167">表头2</td>
<td width="201">表头3</td>
</tr>
<tr>
<td>1</td>
<td>a1</td>
<td><input type="radio" name="rad1"/></td>
</tr>
<tr>
<td>2</td>
<td>a2</td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td>3</td>
<td>b1</td>
<td><input type="radio" name="rad1"/></td>
</tr>
<tr>
<td>4</td>
<td>c3</td>
<td><input type="radio" name="rad1" id="rad4"/></td>
</tr>
</table>
<span class="STYLE4">注意</span>：第一行为表头，其余为表格数据的简单表格可不用thead和tbody
</fieldset>
<br/>
<fieldset>
<legend>制定排序列、排序列取值函数、排序后执行函数的例子</legend>
<table id="t3" width="540" border="1" cellspacing="0" cellpadding="0" bordercolor="#ACA899">
<thead>
<tr>
<td colspan="3">综合表头</td>
</tr>
<tr>
<td width="109">表头1</td>
<td width="112">表头2</td>
<td width="197">表头3</td>
</tr>
</thead>
<tBody>
<tr>
<td>1</td>
<td>a1</td>
<td><input type="text" value="1"/></td>
</tr>
<tr>
<td>2</td>
<td>a2</td>
<td><input type="text" value="2"/></td>
</tr>
<tr>
<td>3</td>
<td>b1</td>
<td><input type="text" value="4"/></td>
</tr>
<tr>
<td>4</td>
<td>c3</td>
<td><input type="text" value="3"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="center">tfoot中存放不参与排序数据</td>
</tr>
</tfoot>
</table>
<span class="STYLE4">注意</span>：复杂表头必须使用thead和tbody将表头和数据分开
</fieldset>
</body>
</html>
评论1
最新资源