ajax动态生成table，需要对列排序、可拖动

Question

1。我要实现这么个功能：定时获取告警信息，并显示于页面，但是不能刷新页面。也就是必须ajax实现。2。要对告警信息table点击列可以排序、也可以拖动列现在的问题是，我动态生成了table，用了jquery grid插件，但是太插件对动态生成的表不能排序。谁有更好的办法，不胜感激！动态生成代码：（核心的）
function updateTable(tbodyId, logArray){
var tb = document.getElementById(tbodyId);
//tb.style.background="lightblue";
while(tb.hasChildNodes()){
tb.removeChild(tb.lastChild);
}



for(var i=0; i<logArray.length; i++){
var jobTask = logArray[i];
//添加行
var newTr = tb.insertRow();
//行样式
if(jobTask.alarmLevel=='紧急告警')
{
newTr.style.background="#FF0000";
}else if(jobTask.alarmLevel=='严重告警')
{
newTr.style.background="#FFBB00";
}
else if(jobTask.alarmLevel=='一般告警')
{
newTr.style.background="#EEEE00";
}else{
newTr.style.background="#00DD00";
}
//添单元格
  var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
var newTd4 = newTr.insertCell();
var newTd5 = newTr.insertCell();
var newTd6 = newTr.insertCell();
var newTd7 = newTr.insertCell();
var newTd8 = newTr.insertCell();


newTd0.width="8%";
newTd1.width="8%";
newTd2.width="8%";
newTd3.width="8%";
newTd4.width="30%";
newTd5.width="5%";
newTd6.width="7%";
newTd7.width="8%";
newTd8.width="8%";
var tds = jobTask.toTds();
//设置单元格内容
newTd0.innerHTML = tds[0];
newTd1.innerHTML = tds[1];
  newTd2.innerHTML = tds[2];
newTd3.innerHTML = tds[3];
newTd4.innerHTML = tds[4];
newTd5.innerHTML = tds[5];
newTd6.innerHTML = tds[6];
newTd7.innerHTML = tds[7];
newTd8.innerHTML = tds[8];
}
} <table border=1 width="100%">
<thead>
<tr bgcolor="#888888" height="30"> 
<th  width="8%"><b>CI</b></th>
<th  width="8%"><b>LAC</b></th>
<th  width="8%"><b>告警级别</b></th>
<th  width="8%"><b>告警类型</b></th>
<th  width="30%"><b>告警内容</b></th>
<th  width="5%"><b> 用户数</b></th>
<th  width="7%"><b>告警时间</b></th>
<th  width="8%"><b>MSC</b></th>
<th  width="8%"><b>BSC</b></th>
</tr>
</thead> 

<tfoot>

<tr>
<th  width="8%"><b>CI</b></th>
<th  width="8%"><b>LAC</b></th>
<th  width="8%"><b>告警级别</b></th>
<th  width="8%"><b>告警类型</b></th>
<th  width="30%"><b>告警内容</b></th>
<th  width="5%"><b> 用户数</b></th>
<th  width="7%"><b>告警时间</b></th>
<th  width="8%"><b>MSC</b></th>
<th  width="8%"><b>BSC</b></th> </tr>
</tfoot>
<tbody  id="tab" >
</tbody>
  
   </table>

Answer 1

楼主如果你已经实现用ajax定时获取数据的话，那排序就完全不是问题了啊。
比如：当点击“告警级别”这一列的时候，触发ajax去后台去数据，并且传一个排序参数（也就是“告警级别”）回去。这样后台取回来的数据就是已经按“告警级别”排好序的了，然后页面就根据这些数据动态生成表（这一步已经实现了）。至于“拖动列”，用js就可以实现了。虽然不明白拖动列有什么用，页面一刷新不是又变回去了吗

Answer 2

有10个字段，每个字段都有顺序、倒序拍排列，回去取数据，这多麻烦啊。还有，是动态生成的table，js不能识别，所以不能拖动，这个功能是老大要的，我必须实现

Answer 3

不存在js不能识别的问题，如果一定要在页面里实现排序，那就只能用js自己写代码排序了，现在如果你有功夫去写js排序的代码，那只需要解决你所谓的js不能识别问题就可以了

Answer 4

回去取数据麻烦吗？晕。你不是说定时用ajax获取数据吗？那ajax获取数据的方法都已经写好了，干嘛不用呢？只是调用一下而已。
不去后台，前台用js排序，然后重新生成表当然也可以。但是，你有很多字段，按字符串或者日期或者数字什么的，都要你手动写代码自己排序，这才叫麻烦....

Answer 5

这种功能以后不会少见，所以，希望能有个一劳永逸的解决办法。现在考虑用ext框架，正在研究，谁有这方面经验，可以给点建议

Answer 6

用js创建一个数组把ajax取得的数据都先保存进内存中，然后排序的时候。
把原来的tbody里面的内容删除了，排序好了再重新插入。

Answer 7

额，EXT确实可以实现，再结合JSON