前几天修改了系统的一个功能——实现树形列列表的行拖拽，以达到排序的目的。现在基本上功能实现，现做一个简单的总结。
1.拿到这个直接网上搜，有好多，但是看了后都觉得不是太复杂就是些不是特别想看的例子，自己太懒（对自己不是很熟悉的东西是不愿意第一去看的）。结果选择良久，还是jquery easyui treegrid这个例子自己看起来比较熟悉。于是就专心研究了，从官方网站http://www.jeasyui.net/下载了demo，开始研读。先把jsp页面一些代码贴出
<link rel="stylesheet" type="text/CSS" href="../css/treegrid/default/easyui.css"><link rel="stylesheet" type="text/css" href="../css/treegrid/icon.css"><link rel="stylesheet" type="text/css" href="../css/treegrid/treegrid.css"><script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script><script type="text/Javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/treegrid-dnd.js"></script><script type="text/javascript">
$(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+='<a onclick="showedit(/'编辑/','+row.id+')" >编辑 </a> '; //html+=value+'<a onclick="editrow('+row+')" >编辑 </a> <a id="cancel" onclick="cancel()"></a>'; if(row.level==0){ html+=' <a href="#" onclick="Confirm(/'确认删除这个分类及其子类/','+row.id+')">删除</a> '; html+='<a href="#" onclick="showedit(/'新建/','+row.id+')">新建子节点</a> ';//默认只有二级节点 } else html+=' <a href="#" onclick="Confirm(/'确认删除这个记录/','+row.id+')">删除</a> '; return html; } } ]], onLoadSuccess: function(row){ //$(this).treegrid('enableDnd', row?row.id:null); //上面的代码是demo中的，但是对于要保存更改到数据库显然走不通，需要向其他办法 //启用拖动排序 enableDnd($('#tt')); } }); }); //进入修改/添加 type:操作类型 id：编辑时，当前记录的id；添加时当前记录的id（添加第一级节点id要作特殊处理） function showedit(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); } } //保存 function save(){ 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'); } else alert(data.result); } }); } //是否删除 function Confirm(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'); } else alert("faile"); } }); } }); return false; } 想到拖动的话，一定会用到jquery easyui 中draggable这个,但是这也不会写啊，看看demo按照那个写了一个，不合适，放弃了。想着着一定会有哪位这方面的前辈写好了，就各种百度和google，经过各种实验，找到一个就是上面 onLoadSuccess 里的 enableDnd($('#tt'));摘自一个论坛http://www.jeasyui.com/forum/index.php?topic=575.0
function enableDnd(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 = $('<div class="tree-node-proxy tree-dnd-no"></div>').appendTo('body'); p.html($(source).find('.tree-title').html()); p.hide(); return p; }, 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) { var action, point; if ($(this).hasClass('row-append')) { action = 'append'; } else { action = 'ins
新闻热点
疑难解答
