问题描述:
我通过$().appendTO('#table')生成的一系列<tr>标签,
并通过异步请求数据的方式向其填充数据.
症结所在:
现在我想按数据中的某些字段如（如时间）的顺序来重新排列这些<tr>的顺序。
我想单纯的靠移动这些<tr>的先后次序来达到目的，
而不想重新请求一遍数据。
请求答案:
有可能吗？如果有请告诉我关键的函数，方法和步骤。
;俺是菜鸟.希望各位不吝赐教!
我通过$().appendTO('#table')生成的一系列<tr>标签,
并通过异步请求数据的方式向其填充数据.
症结所在:
现在我想按数据中的某些字段如（如时间）的顺序来重新排列这些<tr>的顺序。
我想单纯的靠移动这些<tr>的先后次序来达到目的，
而不想重新请求一遍数据。
请求答案:
有可能吗？如果有请告诉我关键的函数，方法和步骤。
;俺是菜鸟.希望各位不吝赐教!
希望您能附加个示例并说明.
关键怎么分析数据哦.
也不能怪你拉.是我没有相应的代码;
我在想可不可以
先获得这些对象,然后装在数组对象里,
在用数组的排序的某个方法(如sort()?)来排序.
单这样我就不能很灵活的控制到底按怎么样的方式排序拉.因为要求有好久种排序的方式.如时间,id,count(数值型).
或者该自己写,但要怎么写呢?
<html><body onLoad="_init()">
<style type="text/css" media="screen">
table {
border-collapse:collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */
border:solid #999; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width:1px 0 0 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
}
table caption {font-size:14px;font-weight:bolder;}
table th,table td {border:solid #999;border-width:0 1px 1px 0;padding:2px;}
tfoot td {text-align:center;}
</style><div id="div1">aaa</div>
<select id="select1" onChange="_go()">
<option value="_name">Sort by Name
<option value="_id">Sort by ID
<option value="_title">Sort by Title
</select>
<div id="div2">bbb</div>
<script type="text/javascript">
/*********************************************************************************************************************
***script开始,定义全局数组_arr,数据结构对象_o以及排序方法_OrderBy
*********************************************************************************************************************/
//结构定义
function _o(_name,_id,_title){
this._name = _name;
this._id = _id;
this._title = _title;
}var _arr = new Array();
//排序方法
_arr._OrderBy = function(_clsName)
{
var _sort1 = new Function("a","b","return a." + _clsName + " - b." + _clsName);
this.sort(_sort1);
}/*********************************************************************************************************************
***显示数据,参数为div对象
*********************************************************************************************************************/
function _displayData(_obj)
{
var _s = "";
for(var i=0;i<_arr.length;i++)
_s+=("<tr><td>"+_arr[i]._name+"</td><td>"
+_arr[i]._id+"</td><td>"
+_arr[i]._title+"</td></tr>"
);
_obj.innerHTML = "<table><tr><th>name</th><th>id</th><th>title</th></tr>" + _s + "</table>";
}
/*********************************************************************************************************************
***排序并刷新div2
*********************************************************************************************************************/
function _go()
{
_arr._OrderBy(document.getElementById("select1").value);
_displayData(document.getElementById("div2"));
}/*********************************************************************************************************************
***初始化
*********************************************************************************************************************/
function _init()
{
//添加数据
for(var i=0;i<10;i++)
{
_arr.push(
new _o(
Math.floor(Math.random( ) * 100),
Math.floor(Math.random( ) * 100),
Math.floor(Math.random( ) * 100)
)
);
} //显示div1 & div2
_displayData(document.getElementById("div1"));
document.getElementById("select1").value = "_name";
_go();
}
/*********************************************************************************************************************
***script完毕
*********************************************************************************************************************/
</script>
</body></html>
<style type="text/css" media="screen">
table {
border-collapse:collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */
border:solid #999; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width:1px 0 0 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
}
table caption {font-size:14px;font-weight:bolder;}
table th,table td {border:solid #999;border-width:0 1px 1px 0;padding:2px;}
tfoot td {text-align:center;}
</style><div id="div1">aaa</div>
<select id="select1">
<option value="name">Sort by Name
<option value="id">Sort by ID
<option value="title">Sort by Title
</select>
<div id="div2">bbb</div>
<script type="text/javascript">
//全局变量
var _o;
/*************************************************************************************************
//DEFINE START
*************************************************************************************************/
function _MyObj()
{
//初始化对象
this._Init = function()
{
this._RS = new ActiveXObject("Adodb.RecordSet");
with(this._RS)
{
//下面添加的数据都是string类型，所以sort时也是按string
//也可以添加其他类型，如int
Fields.Append("name",200,32);
Fields.Append("id",200,32);
Fields.Append("title",200,32);
Open();
}
}
//销毁对象
this._Close = function()
{
this._RS.Close();
this._RS = null;
}
//添加数据,参数为添加的数量
this._AddData = function(_number)
{
with(this._RS)
{
for(var i=0;i<_number;i++)
{
AddNew();
Fields("name") = this._GetRnd()
Fields("id") = this._GetRnd()
Fields("title") = this._GetRnd()
Update();
}
}
}
//返回随机字符，范围A-z(ASC65-ASC122)
this._GetRnd = function()
{
return String.fromCharCode(Math.floor(Math.random() * 100) % 57 + 65 );
}
//遍历并返回转化后的字符串
this._List = function(_obj)
{
var _s = "";
with(this._RS)
{
MoveFirst();
while(!EOF)
{
_s += ("<tr><td>"+Fields.Item("name") + "</td><td>" +
Fields.Item("id") + "</td><td>" +
Fields.Item("title") + "</td></tr>"
);
MoveNext();
}
}
_obj.innerHTML = "<table><tr><th>name</th>" +
"<th>id</th>" +
"<th>title</th>" +
"</tr>" + _s + "</table>";
// return s;
}
//排序
this._Sort = function(_s)
{
this._RS.Sort = _s;
}
}
/*************************************************************************************************
//DEFINE END
*************************************************************************************************/
//窗口将被关闭
window.onbeforeunload = function()
{
_o._Close();
_o = null;
}
//Select改变时
document.getElementById("select1").onchange = function()
{
_o._Sort(this.value + " ASC");
_o._List(document.getElementById("div2"));
}
//onload事件
document.body.onload = function()
{
try
{
var _s = "";
_o = new _MyObj();
_o._Init();
_o._AddData(10);
_o._List(document.getElementById("div1"));
_o._Sort("name ASC"); //ASC表示升序，DESC表示降序
_o._List(document.getElementById("div2"));
}catch(e){}
}
</script>
</body></html>