初始效果:
html
排序保存後的效果:
java
實現過程:node
本項目中要求:後天能夠對10條熱門問題進行排序,這也決定着前臺顯示時,順序隨之改變。通過多方求助,終於實現了: 1. 在列表的後面添加"上移"、"下移" 的文字連接,頂部添加按鈕"保存排序". 2. js中的寫法: /** * 上移:連接點擊時觸發 * @return */ function moveUp(chrid,rowindex){//這裏是傳遞了當前行的序號,註釋部分是沒有傳遞當前行號的操做。 //alert(rowindex) //var selectedRow=$("#question_tag").datagrid("getSelected"); //移動行的索 //var index=$("#question_tag").datagrid("getRowIndex",selectedRow); //alert(index); //mysort(index,'up'); mysort(rowindex,'up'); } /** * 下移 * @return */ function moveDown(chrid,rowindex){ mysort(rowindex,'down'); } /** * 排序的輔助方法;question_qes是jsp中的使用了datagrid組建的某個id:<table id="question_qes"></table> * @param index 索引 * @param type 上或者下 * @return */ function mysort(index,type){ if(type=='up'){ if(index!=0){ var toUp=$("#question_qes").datagrid("getData").rows[index]; var toDown=$("#question_qes").datagrid("getData").rows[index-1];//上一行 $("#question_qes").datagrid("getData").rows[index-1]=toUp; $("#question_qes").datagrid("getData").rows[index]=toDown; $("#question_qes").datagrid("refreshRow",index); $("#question_qes").datagrid("refreshRow",index-1); $("#question_qes").datagrid("selectedRow",index-1); } }else if(type=='down'){ var rows=$("#question_qes").datagrid("getRows").length; var index = parseInt(index); if(index!=rows-1){ var toUp=$("#question_qes").datagrid("getData").rows[index]; var toDown=$("#question_qes").datagrid("getData").rows[index + 1]; $("#question_qes").datagrid("getData").rows[index+1]=toUp; $("#question_qes").datagrid("getData").rows[index]=toDown; $("#question_qes").datagrid("refreshRow",index); $("#question_qes").datagrid("refreshRow",index+1); $("#question_qes").datagrid("selectRow",index+1); } } } /** * 保存排序,這裏是將當前頁的全部的問題的id和對應的新的序號傳遞到後臺。 * @return */ function saveSort(){ var nodes=$("#question_qes").datagrid("getRows");//返回當前頁的全部行 var nodeInfo=''; for(var i=0;i<nodes.length;i++){ nodeInfo+=nodes[i].CHR_ID+"--"+(i+1)+"&";//CHR_ID:問題的id,根據系統不一樣而變化 }//i+1是爲了跟數據庫中的sort字段保持一致 nodeInfo=nodeInfo.substring(0,nodeInfo.length-1);// $.post("questionAction!saveSortQes.dhtml",{ saveString:nodeInfo },function (val){ if(val=='保存成功'){ alert("提示:保存成功!") }else{ alert("提示:保存失敗!") //從新加載 $('#question_qes').datagrid('reload'); } } ); } 3. questionAction中saveSortQes的寫法大體是: //接受到的參數大體是:0b8cdf8b5c5d4f1b8aa040ce1b702263--1&7edc061fe6604582a6e24b79f167c1f3--2..... 因此要進行的操做就是使用 & 分切,而後使用 -- 分切,而後將 對應的問題id 和他的新 序號 存放到數據庫就能夠了。 4. 數據庫中的設計: 在原有的表的基礎上增長一個 sort字段,number 類型,不設置默認值,但要手動的將已經存在的10條熱門問題進行編號,1~10 5. 至此,大功告成!