<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>散人笔记 &#187; 表格排序</title>
	<atom:link href="http://www.uideas.cn/post/tag/%e8%a1%a8%e6%a0%bc%e6%8e%92%e5%ba%8f/feed" rel="self" type="application/rss+xml" />
	<link>http://www.uideas.cn</link>
	<description>生活来源于创意,所以我懂生活</description>
	<lastBuildDate>Sun, 22 Aug 2010 07:17:13 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>js表格排序,可任意的对指定列的进行排序</title>
		<link>http://www.uideas.cn/post/217.html</link>
		<comments>http://www.uideas.cn/post/217.html#comments</comments>
		<pubDate>Fri, 05 Mar 2010 13:39:21 +0000</pubDate>
		<dc:creator>kos</dc:creator>
				<category><![CDATA[DIV+CSS]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[任意列]]></category>
		<category><![CDATA[表格排序]]></category>

		<guid isPermaLink="false">http://www.uideas.cn/?p=217</guid>
		<description><![CDATA[　　由于工作需要,要实现表格内容的排序,于是在网上找了很多代码,这种东西写的人确实太多,所以自己就不怎么想写了,但网上找的大部分要么兼容性不好,要么达不到我的要求,于是找了个较为简单的进行修改.
声明:由于我在找到的源码上做了很多修改,把无用的东西都删除掉了,所以现在不知道出处,抄袭之处,敬请原谅!]]></description>
			<content:encoded><![CDATA[<p>由于工作需要,要实现表格内容的排序,于是在网上找了很多代码,这种东西写的人确实太多,所以自己就不怎么想写了,但网上找的大部分要么兼容性不好,要么达不到我的要求,于是找了个较为简单的进行修改.<br />
声明:由于我在找到的源码上做了很多修改,把无用的东西都删除掉了,所以现在不知道出处,抄袭之处,敬请原谅!<br />
所以排序的原理就不做解释了,再一就是我也没认真看过,可以慢慢去了解原理,在大部分要用到的这种排序中,可能有些不必要的项(即列),可能不需要进行排序,所以我们要对想进行排序的项才实现排序功能,那么要写一个通用的,最简单的方法就是把要排序的列放到一组数据中传到方法里面去,方法体接收到参数后,把组成一个数组,然后循环判断让需要进行排序的列去执行排序方法,费话就说这些了,下面是给出的源代码,如有兴趣可以一起研究一下,看有没有不足之处:<br />
效果如下:</p>
<form enctype="application/x-www-form-urlencoded" method="get"><code></p>
<div class="Nodiv">
<div class="Notitle">CODE</div>
<div class="Nocontent"><textarea class="textarea" rows="8">&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;表格排序&lt;/title&gt; &lt;script language="javascript" type="text/javascript" src="http://www.uideas.cn/download/sort.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; td{ font-size:12px; line-height:20px;} th{ background:url(http://www.uideas.cn/download/images/column.gif) bottom repeat-x; font-size:12px; font-weight:bold;} .m_over td{ background:#a5cbff} .m_out td{ background:#FFFFFF} .sort-arrow {width: 9px;height: 9px;background-position: center center;background-repeat: no-repeat;} .sort-arrow.descending {background-image: url(http://www.uideas.cn/download/images/down.gif);} .sort-arrow.ascending {background-image: url(http://www.uideas.cn/download/images/up.gif);} &lt;/style&gt;  &lt;/head&gt; &lt;body&gt;  &lt;table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC" id="dTable"&gt;   &lt;thead&gt;   &lt;tr&gt; 	&lt;th height="22" align="center" style="cursor:pointer;"&gt;&lt;img src="http://www.uideas.cn/download/images/blank.gif"&gt;姓名&lt;/th&gt; 	&lt;th height="22" align="center" style="cursor:pointer;"&gt;&lt;img src="http://www.uideas.cn/download/images/blank.gif"&gt;班级&lt;/th&gt; 	&lt;th height="22" align="center" style="cursor:pointer;"&gt;&lt;img src="http://www.uideas.cn/download/images/blank.gif"&gt;语文&lt;/th&gt; 	&lt;th height="22" align="center" style="cursor:pointer;"&gt;&lt;img src="http://www.uideas.cn/download/images/blank.gif"&gt;数字&lt;/th&gt; 	&lt;th height="22" align="center" style="cursor:pointer;"&gt;&lt;img src="http://www.uideas.cn/download/images/blank.gif"&gt;物理&lt;/th&gt; 	&lt;th height="22" align="center" style="cursor:pointer;"&gt;&lt;img src="http://www.uideas.cn/download/images/blank.gif"&gt;化学&lt;/th&gt; 	&lt;th height="22" align="center" style="cursor:pointer;"&gt;&lt;img src="http://www.uideas.cn/download/images/blank.gif"&gt;总分&lt;/th&gt; 	&lt;th height="22" align="center" style="cursor:pointer;"&gt;&lt;img src="http://www.uideas.cn/download/images/blank.gif"&gt;平均分&lt;/th&gt; 	&lt;th height="22" align="center" style="cursor:pointer;"&gt;&lt;img src="http://www.uideas.cn/download/images/blank.gif"&gt;总名次&lt;/th&gt; 	&lt;th height="22" align="center" style="cursor:pointer;"&gt;&lt;img src="http://www.uideas.cn/download/images/blank.gif"&gt;班级名次&lt;/th&gt;   &lt;/tr&gt;   &lt;/thead&gt;   &lt;tbody&gt;   &lt;tr onMouseOver="this.className='m_over'" onMouseOut="this.className='m_out'"&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;张三&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;1班&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;60&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;80&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;90&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;78&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;388&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;78&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;1&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;1&lt;/td&gt;   &lt;/tr&gt;   &lt;tr onMouseOver="this.className='m_over'" onMouseOut="this.className='m_out'"&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;李四&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;2班&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;70&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;90&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;98&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;56&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;483&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;76&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;7&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;2&lt;/td&gt;   &lt;/tr&gt;   &lt;tr onMouseOver="this.className='m_over'" onMouseOut="this.className='m_out'"&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;王五&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;3班&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;67&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;89&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;87&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;67&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;367&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;79&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;23&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;3&lt;/td&gt;   &lt;/tr&gt;   &lt;tr onMouseOver="this.className='m_over'" onMouseOut="this.className='m_out'"&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;赵六&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;4班&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;76&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;87&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;76&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;89&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;424&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;85&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;26&lt;/td&gt; 	&lt;td height="22" align="center" bgcolor="#FFFFFF"&gt;4&lt;/td&gt;   &lt;/tr&gt;   &lt;/tbody&gt; &lt;/table&gt; &lt;script type="text/javascript"&gt; setTimeout(tt,'1000');function tt(){var st1 = new SortableTable(document.getElementById("dTable"),'','1,2,3,4,5,7');}&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </textarea></div>
<div class="Nobutton">
<input onclick="RunCode(this)" type="button" value="运行代码" />
<input onclick="CopyCode(this)" type="button" value="复制代码" />
<input onclick="SaveCode(this)" type="button" value="保存代码" />
<span class="Nots">[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span></div>
</div>
<p></code></form>
<p> <br />
上面的例子我只让1,2,3,4,5,7进行排序,所以传值的时候写成了<code><br />
&lt;script type="text/javascript"&gt;<br />
var st1 = new SortableTable(document.getElementById("dTable"),'','1,2,3,4,5,7');<br />
&lt;/script&gt;<br />
</code><br />
<span style="color: #993300;"><strong>相关下载：</strong></span><br />
　　例子下载：<a href="http://www.uideas.cn/download/kos20100305.rar">kos20100305.rar</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uideas.cn/post/217.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
