您的位置:首页 > 产品设计 > UI/UE

工作记录:datagrid实现上移下移某行的操作,并保持排序

2014-10-07 00:00 417 查看
摘要: datagrid实现上移下移某行的操作,并保持排序

初始效果:



排序保存后的效果:



实现过程:

本项目中要求:后天可以对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. 至此,大功告成!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息