easyui树拖拽排序java_Jquery easyui treegrid实现树形表格的行拖拽

前几天修改了系统的一个功能——实现树形列列表的行拖拽，以达到排序的目的。现在基本上功能实现，现做一个简单的总结。

1.拿到这个直接网上搜，有好多，但是看了后都觉得不是太复杂就是些不是特别想看的例子，自己太懒(对自己不是很熟悉的东西是不愿意第一去看的)。结果选择良久，还是jquery easyui treegrid这个例子自己看起来比较熟悉。于是就专心研究了，从官方网站http://www.jeasyui.net/下载了demo，开始研读。先把jsp页面一些代码贴出

$(function(){//初始化弹出对话框

$('#win').window('close');

$('#tt').treegrid({//data:data,

url:'catalogListItem',

method:'post',

dataType:'json',

rownumbers:true,

singleSelect:true,

idField:'id',

treeField:'title',

animate:true,

columns:[[

{field:'id',title:'ckc',checkbox:true},

{field:'title',title:'分类名称',width:400,align:'left',editor:'text'},

{field:'sortid',title:'排序值',width:100,align:'left',editor:'text'},

{field:'creatorNick',title:'创建者',width:100},

{field:'createdTime',title:'创建时间',width:220},

{field:'operate',title:'操作',width:220,

formatter:function(value,row,index){var html='';

html+='编辑 ';//html+=value+'编辑 ';

if(row.level==0){

html+=' 删除 ';

html+='新建子节点 ';//默认只有二级节点

}elsehtml+=' 删除 ';returnhtml;

}

}

]],

onLoadSuccess:function(row){//$(this).treegrid('enableDnd', row?row.id:null);

//上面的代码是demo中的，但是对于要保存更改到数据库显然走不通，需要向其他办法 //启用拖动排序

enableDnd($('#tt'));

}

});

});//进入修改/添加 type:操作类型 id：编辑时，当前记录的id；添加时当前记录的id(添加第一级节点id要作特殊处理)functionshowedit(type,id){

$("#form")[0].reset();

$('#win').window('open');if(type=='编辑'){

$.ajax({

url:'catalogGet?id='+id,

type:'post',

dataType:'json',

cache:false,

success:function(data){

$("#title").val(data[0].title);

$("#sortid").val(data[0].sortid);

$("#id").val(id);

}

});

}else{

$("#parentId").val(id);

}

}//保存

functionsave(){var title= $("#title").val();var sortid=$("#sortid").val();var id=$("#id").val();var parentId=$("#parentId").val();

$.ajax({

url:'catalogEdit',

data:{"title":title,"sortid":sortid,"id":id,"parentId":parentId},

type:'post',

dataType:'json',

success:function(data)

{if(data.result){

$('#win').window('close');

$('#tt').treegrid('reload');

}elsealert(data.result);

}

});

}

//是否删除functionConfirm(msg,id) {

$.messager.confirm("确认", msg, function(r) {if(r) {//请求

$.ajax({url:'catalogDelete?id='+id,

type:'post',

dataType:'json',

success:// function(data) {if(data){

$('#tt').treegrid('reload');

}elsealert("faile");

}

});

}

});return false;

}

想到拖动的话，一定会用到jquery easyui 中draggable这个,但是这也不会写啊，看看demo按照那个写了一个，不合适，放弃了。想着着一定会有哪位这方面的前辈写好了，就各种百度和google，经过各种实验，找到一个就是上面  onLoadSuccess  里的  enableDnd($('#tt'));摘自一个论坛http://www.jeasyui.com/forum/index.php?topic=575.0

functionenableDnd(t) {var nodes = t.treegrid('getPanel').find('tr[node-id]');

nodes.find('span.tree-hit').bind('mousedown.treegrid', function() {return false;

});

nodes.draggable({

disabled:false,

revert:true,

cursor:'pointer',

proxy:function(source) {var p = $('

p.html($(source).find('.tree-title').html());

p.hide();returnp;

},

deltaX:15,

deltaY:15,

onBeforeDrag:function() {

$(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({ accept: 'no-accept'});

},

onStartDrag:function() {

$(this).draggable('proxy').css({

left:-10000,

top:-10000});

},

onDrag:function(e) {

$(this).draggable('proxy').show();this.pageY =e.pageY;

},

onStopDrag:function() {

$(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({ accept: 'tr[node-id]'});

}

}).droppable({

accept:'tr[node-id]',

onDragOver:function(e, source) {var pageY =source.pageY;var top = $(this).offset().top;var bottom = top + $(this).outerHeight();

$(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');

$(this).removeClass('row-append row-top row-bottom');if (pageY > top + (bottom - top) / 2) {if (bottom - pageY < 5) {

$(this).addClass('row-bottom');

}else{

$(this).addClass('row-append');

}

}else{if (pageY - top < 5) {

$(this).addClass('row-top');

}else{

$(this).addClass('row-append');

}

}

},

onDragLeave:function(e, source) {

$(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');

$(this).removeClass('row-append row-top row-bottom');

},

onDrop:function(e, source) {varaction, point;if ($(this).hasClass('row-append')) {

action= 'append';

}else{

action= 'insert';

point= $(this).hasClass('row-top') ? 'top' : 'bottom';

}

$(this).removeClass('row-append row-top row-bottom');//alert(action + ":" + point);

//your logic code here

//do append or insert action and reload the treegrid data

//================================== //做自己的逻辑处理

var src = $('#tt').treegrid('find', $(source).attr('node-id'));var dest = $('#tt').treegrid('find', $(this).attr('node-id'));//alert(src.title+","+dest.title);

$.ajax({

url:'updateCatalogList',

dataType:'json',

type:'post',

data: {"srcId": src.id,"destId": dest.id

},

success:function(data){if(data.result)

{

$('#tt').treegrid('reload'); //重新加载treegrid

}

}

});

//====================

}

});

}

写入自己的程序，完全可以，拖动的效果有了，拖动的处理时间自己写“//============”之间的就是逻辑代码，具体就是向后台传送拖拽节点的标识信息(一般是id)和拖拽的目标节点的标识信息，即srcId和destId后台在做处理。

分类名称:

排序值:

确定

取消