工作记录: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. 至此,大功告成!
相关文章推荐
- table 上移 下移 保存时 获取每行中的值 将排序记录保存到数据库
- Oracle,实现一条记录的上移下移
- ListBox实现上移,下移,左移,右移操作
- JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
- 使用bootstraptable插件实现表格记录的查询、分页、排序操作
- ListBox实现上移,下移,左移,右移操作
- easyui datagrid实现单行的上移下移,以及保存移动的结果
- JQuery操作html实现<li>标签上移和下移效果
- datagrid实现行的上移和下移
- easyui中的datagrid行数据如何实现上移和下移
- mysql选择上一条、下一条数据记录,排序上移、下移、置顶
- jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
- JS实现的表格操作类详解(添加,删除,排序,上移,下移)
- mysql选择上一条、下一条数据记录,排序上移、下移、置顶
- 怎么在datagridview中对记录进行上移或下移操作?
- mysql选择上一条、下一条数据记录,排序上移、下移、置顶
- ListBox控件实现上移、下移、循环上移、循环下移操作
- jquery easyui datagrid实现单行的上移下移,以及保存移动的结果
- datagrid实现行的上移和下移(转)
- 排序列表中上移和下移按钮的后台实现