项目中出现一种需求:对某列表中元素进行手动排序,若使用按钮单击来向上或者向下效率低下,若直接手动输入序号更不科学=.=。
因此最好的方式就是能够实现手动拖动某个行到想要的位置。因此首先需要实现datagrid的拖拽操作。其次就是后端的数据处理了。
dnd插件的实现
超简单。。。。引入datagrid-dnd.js,然后enable之即可。
<script src="./datagrid-dnd.js"></script>
//载入后的触发事件
onLoadSuccess(data){
//启用dnd支持
$('#table').datagrid('enableDnd');
//可选-绑定dnd的触发事件
$('#table').datagrid({
onDrop:function(targetRow, sourceRow, point) {
//拖拽某行到指定位置后触发
doSomething();
}
})
}
前端数据的获取
主要涉及对datagrid的数据遍历,获取id以及序号
//获取表格的数据
var data = $('#table').datagrid('getRows');
//遍历每行
$.each(data, function(i ,row){
doSomething();
});
参考
- 常用事件
jQuery EasyUI 扩展 - 数据网格行拖放(Drag and Drop Rows in DataGrid)
网上中文博客真的很少。。。最近翻不出去了所以不太好找资料