easyui datagrid 列拖动“含源码”
easyui datagrid 列拖动“含源码”
- 苟且，诗与远方
- 1.功能需求
- 2.直接看效果图
- 3.需要的包
- 4.tuodong3.js代码片
- 5.页面代码片(警告：JS最后一行需要修改)
苟且，诗与远方
本文章为秋后的虫子君原创文章，含源码，转载需注明出处，否则一经发现直接举报。
1.功能需求
甲方客户要求easyui datagrid的数据可以左右拖动排列顺序，实现列拖动。
大哥啊，这是网页，不是客户端啊！！！
没办法，甲方才是爸爸！
可是easyui datagrid官方文档里面又没有列拖动属性，那就只能自己重写一个了。
2.直接看效果图
拖拽前:
拖拽时:
拖拽后:
3.需要的包
| 文件 | Value |
|---|---|
| jquery | 建议1.8以上 |
| jquery.easyui.min.js | 建议easyui1.5以上 |
| easyui.css | 建议easyui1.5以上 |
| tuodong3.js | 下面贴出源码 |
4.tuodong3.js代码片
$.extend($.fn.dialog.methods, {
mymove: function(jq, newposition){
return jq.each(function(){
$(this).dialog('move', newposition);
});
}
});
// $('#dg').dialog('mymove', {
// left: 200,
// top: 100
//});
$.extend($.fn.datagrid.methods,{
columnMoving: function(jq){
return jq.each(function(){
var target = this;
var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
cells.draggable({
revert:true,
cursor:'pointer',
edge:5,
proxy:function(source){
var p = $('').appendTo('body');
p.html($(source).text());
p.hide();
return p;
},
onBeforeDrag:function(e){
e.data.startLeft = $(this).offset().left;
e.data.startTop = $(this).offset().top;
},
onStartDrag: function(){
$(this).draggable('proxy').css({
left:-10000,
top:-10000
});
},
onDrag:function(e){
$(this).draggable('proxy').show().css({
left:e.pageX+15,
top:e.pageY+15
});
return false;
}
}).droppable({
accept:'td[field]',
onDragOver:function(e,source){
$(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
$(this).css('border-left','1px solid #ff0000');
},
onDragLeave:function(e,source){
$(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
$(this).css('border-left',0);
},
onDrop:function(e,source){
$(this).css('border-left',0);
var fromField = $(source).attr('field');
var toField = $(this).attr('field');
setTimeout(function(){
moveField(fromField,toField);
$(target).datagrid();
$(target).datagrid('columnMoving');
},0);
}
});
// move field to another location
function moveField(from,to){
var columns = $(target).datagrid('options').columns;
var cc = columns[0];
var c = _remove(from);
if (c){
_insert(to,c);
}
function _remove(field){
for(var i=0; i<cc.length; i++){
if (cc[i].field == field){
var c = cc[i];
cc.splice(i,1);
return c;
}
}
return null;
}
function _insert(field,c){
var newcc = [];
for(var i=0; i<cc.length; i++){
if (cc[i].field == field){
newcc.push(c);
}
newcc.push(cc[i]);
}
columns[0] = newcc;
}
//columns[0]是拖动后保存的顺序
//这个是拖动触发事件
tuodong_ajax(columns[0]);
}
});
}
});
function tuodong_ajax(jilu_string){
//遍历一下顺序，里面的ck参数是复选框的field，一定要小心
var paixu="";
$.each( jilu_string, function( key, value ){
if(value.field != 'ck'){
paixu+=value.field;
if(key < jilu_string.length){
paixu+=",";
}
}
});
//利用ajax将顺序保存返回给后台
$.ajax({
type: 'POST',
url : "/TreeController/tuodong.do",
data : { paixu : paixu },
dataType : "json",
success : function(result){
}
});
}
5.页面代码片(警告：JS最后一行需要修改)
<html>
<head>
<script type="text/javascript" src="/static/js/jquery_1.8.0.min.js"></script>
<script type="text/javascript" src="/static/js/jqueryeasyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/js/jqueryeasyui/themes/bootstrap/easyui.css">
<script type="text/javascript" src="/view/pages2/tuodong3.js"></script>
<script type="text/javascript">
$(function() {
$("#dg").datagrid({
pagination:true,//分页工具栏
url :"/Souli_51_Controller/select.do",
idField:"name",//标识字段
fit: true, //自适应大小
nowrap: true,//数据长度超出列宽时将会自动截取。
rownumbers:true,//行号
// fitColumns:true,//自动使列适应表格宽度以防止出现水平滚动。
sortOrder: 'asc',//设置排序规则
sortName: 'name',//设置默认排序的列
remoteSort:true,//设置属性（对本地数据是false，默认为true）
pageSize : 20,
pageList : [15,20,30,50,100,150,200,250,300],
columns : [ [
{field : 'ck',checkbox : true},
{field : 'name', title:'姓名', align:'center',sortable: true,width:50},
{field : 'account_id',title:'呼叫',align:'center',sortable: true,width:50},
{field : 'uuid', title:'工号', align:'center',sortable: true,width:50},
] ],
//表头双击事件
onDblClickRow: function (index, row) {
},
}).datagrid("columnMoving"); //这行是开启添加拖动
});
</script>
</head>
<body>
<div id="a" class="easyui-layout" style="width:100%;height:100%;">
<div data-options="region:'center'">
<table id="dg"></table>
</div>
<div id="ft" style="height:60px"></div>
</div>
<div id="bfdc_jiazai_div"></div>
</body>
</html>