(function($){
$.extend($.fn.treegrid.defaults, {
onBeforeDrag: function(row){}, // return false to deny drag
onStartDrag: function(row){},
onStopDrag: function(row){},
onDragEnter: function(targetRow, sourceRow){}, // return false to deny drop
onDragOver: function(targetRow, sourceRow){}, // return false to deny drop
onDragLeave: function(targetRow, sourceRow){},
onBeforeDrop: function(targetRow, sourceRow, point){},
onDrop: function(targetRow, sourceRow, point){} // point:'append','top','bottom'
});
$.extend($.fn.treegrid.methods, {
disableDnd:function(jq,id){
return jq.each(function() {
var target = this;
var state = $.data(this, 'treegrid');
state.disabledNodes = [];
var t = $(this);
var opts = state.options;
if (id) {
var nodes = opts.finder.getTr(target, id);
var rows = t.treegrid('getChildren', id);
for (var i = 0; i < rows.length; i++) {
nodes = nodes.add(opts.finder.getTr(target, rows[i][opts.idField]));
}
} else {
var nodes = t.treegrid('getPanel').find('tr[node-id]');
}
nodes.draggable({
disabled: true,
revert: true,
cursor: 'pointer'});
});
}
});
$.extend($.fn.treegrid.methods, {
enableDnd: function(jq, id){
if (!$('#treegrid-dnd-style').length){
$('head').append(
'<style id="treegrid-dnd-style">' +
'.treegrid-row-top td{border-top:1px solid red}' +
'.treegrid-row-bottom td{border-bottom:1px solid red}' +
'.treegrid-row-append .tree-title{border:1px solid red}' +
'</style>'
);
}
return jq.each(function(){
var target = this;
var state = $.data(this, 'treegrid');
state.disabledNodes = [];
var t = $(this);
var opts = state.options;
if (id){
var nodes = opts.finder.getTr(target, id);
var rows = t.treegrid('getChildren', id);
for(var i=0; i<rows.length; i++){
nodes = nodes.add(opts.finder.getTr(target, rows[i][opts.idField]));
}
} else {
var nodes = t.treegrid('getPanel').find('tr[node-id]');
}
nodes.draggable({
disabled:false,
revert:true,
cursor:'pointer',
proxy: function(source){
var row = t.treegrid('find', $(source).attr('node-id'));
var p = $('<div class="tree-node-proxy"></div>').appendTo('body');
p.html('<span class="tree-dnd-icon tree-dnd-no">&nbsp;</span>'+row[opts.treeField]);
p.hide();
return p;
},
deltaX: 15,
deltaY: 15,
onBeforeDrag:function(e){
if (opts.onBeforeDrag.call(target, getRow(this)) == false){return false}
if ($(e.target).hasClass('tree-hit') || $(e.target).parent().hasClass('datagrid-cell-check')){return false;}
if (e.which != 1){return false;}
$(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({accept:'no-accept'});
// var tr = opts.finder.getTr(target, $(this).attr('node-id'));
// var treeTitle = tr.find('span.tree-title');
// e.data.startX = treeTitle.offset().left;
// e.data.startY = treeTitle.offset().top;
// e.data.offsetWidth = 0;
// e.data.offsetHeight = 0;
},
onStartDrag:function(){
$(this).draggable('proxy').css({
left:-10000,
top:-10000
});
var row = getRow(this);
opts.onStartDrag.call(target, row);
state.draggingNodeId = row[opts.idField];
},
onDrag:function(e){
var x1=e.pageX,y1=e.pageY,x2=e.data.startX,y2=e.data.startY;
var d = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
if (d>3){ // when drag a little distance, show the proxy object
$(this).draggable('proxy').show();
var tr = opts.finder.getTr(target, $(this).attr('node-id'));
var treeTitle = tr.find('span.tree-title');
e.data.startX = treeTitle.offset().left;
e.data.startY = treeTitle.offset().top;
e.data.offsetWidth = 0;
e.data.offsetHeight = 0;
}
this.pageY = e.pageY;
},
onStopDrag:function(){
$(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({accept:'tr[node-id]'});
for(var i=0; i<state.disabledNodes.length; i++){
var tr = opts.finder.getTr(target, state.disabledNodes[i]);
tr.droppable('enable');
}
state.disabledNodes = [];
var row = t.treegrid('find', state.draggingNodeId);
opts.onStopDrag.call(target, row);
}
}).droppable({
accept:'tr[node-id]',
onDragEnter: function(e, source){
if (opts.onDragEnter.call(target, getRow(this), getRow(source)) == false){
allowDrop(source, false);
var tr = opts.finder.getTr(target, $(this).attr('node-id'));
tr.removeClass('treegrid-row-append treegrid-row-top treegrid-row-bottom');
tr.droppable('disable');
state.disabledNodes.push($(this).attr('node-id'));
}
},
onDragOver:function(e,source){
var nodeId = $(this).attr('node-id');
if ($.inArray(nodeId, state.disabledNodes) >= 0){return}
var pageY = source.pageY;
var top = $(this).offset().top;
var bottom = top + $(this).outerHeight();

allowDrop(source, true);
var tr = opts.finder.getTr(target, nodeId);
tr.removeClass('treegrid-row-append treegrid-row-top treegrid-row-bottom');
if (pageY > top + (bottom - top) / 2){
if (bottom - pageY < 5){
tr.addClass('treegrid-row-bottom');
} else {
tr.addClass('treegrid-row-append');
}
} else {
if (pageY - top < 5){
tr.addClass('treegrid-row-top');
} else {
tr.addClass('treegrid-row-append');
}
}
if (opts.onDragOver.call(target, getRow(this), getRow(source)) == false){
allowDrop(source, false);
tr.removeClass('treegrid-row-append treegrid-row-top treegrid-row-bottom');
tr.droppable('disable');
state.disabledNodes.push(nodeId);
}
},
onDragLeave:function(e,source){
allowDrop(source, false);
var tr = opts.finder.getTr(target, $(this).attr('node-id'));
tr.removeClass('treegrid-row-append treegrid-row-top treegrid-row-bottom');
opts.onDragLeave.call(target, getRow(this), getRow(source));
},
onDrop:function(e,source){
var dest = this;
var action, point;
var tr = opts.finder.getTr(target, $(this).attr('node-id'));
if (tr.hasClass('treegrid-row-append')){
action = append;
point = 'append';
} else {
action = insert;
point = tr.hasClass('treegrid-row-top') ? 'top' : 'bottom';
}

var dRow = getRow(this);
var sRow = getRow(source);
if (opts.onBeforeDrop.call(target, dRow, sRow, point) == false){
tr.removeClass('treegrid-row-append treegrid-row-top treegrid-row-bottom');
return;
}
action(sRow, dRow, point);
tr.removeClass('treegrid-row-append treegrid-row-top treegrid-row-bottom');
}
});

function allowDrop(source, allowed){
var icon = $(source).draggable('proxy').find('span.tree-dnd-icon');
icon.removeClass('tree-dnd-yes tree-dnd-no').addClass(allowed ? 'tree-dnd-yes' : 'tree-dnd-no');
}
function getRow(tr){
var nodeId = $(tr).attr('node-id');
return t.treegrid('find', nodeId);
}
function append(sRow, dRow){
doAppend();
if (dRow.state == 'closed'){
t.treegrid('expand', dRow[opts.idField]);
}

function doAppend(){
var data = t.treegrid('pop', sRow[opts.idField]);
t.treegrid('append', {
parent: dRow[opts.idField],
data: [data]
});
opts.onDrop.call(target, dRow, data, 'append');
}
}
function insert(sRow, dRow, point){
var param = {};
if (point == 'top'){
param.before = dRow[opts.idField];
} else {
param.after = dRow[opts.idField];
}

var data = t.treegrid('pop', sRow[opts.idField]);
param.data = data;
t.treegrid('insert', param);
opts.onDrop.call(target, dRow, data, point);
}
});
}
});
})(jQuery);

treegrid-dnd.js的更多相关文章

  1. EasyUi TreeGrid封装

    礼物一:树型实体的抽象与封装 所谓树型实体,就是具有树型结构关系的实体,比如省.市.区.对于初学者,可能会创建三张表进行存储,有经验的开发者通过引入ParentId将设计简化为一张表,但是基于Pare ...

  2. RDIFramework.NET框架Web中datagrid与treegrid控件自动生成右键菜单与列标题右键菜单

    在实际应用中常可以看到数据展示控件有右键菜单的功能,对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能.在我们的RDIFramework.NET Web框架中,只要是使用了EasyUI的D ...

  3. html或者jsp页面引用jar包中的js文件

    一,页面上引用jar包中的js文件的方法 使用java web框架AppFuse的时候发现,jquery.bootstrap等js框架都封装到jar包里面了.这些js文件通过一个wro4j的工具对其进 ...

  4. easyloader.js源代码分析

    http://www.cnblogs.com/jasonoiu/p/easyloader_source_code_analysis.html Jquery easyui是一个javascript UI ...

  5. treegrid.bootstrap使用说明

    treegrid.bootstrap使用说明 这个插件是用来做有层次的表格的,大概如图: 官网  http://maxazan.github.io/jquery-treegrid/ 使用这个控件之前需 ...

  6. JS组件系列——自己动手封装bootstrap-treegrid组件

    前言:最近产品需要设计一套相对完整的组织架构的解决方案,由于组织架构涉及到层级关系,在表格里面展示层级关系,自然就要用到所谓的treegrid.可惜的是,一些轻量级的表格组件本身并没有自带树形表格的功 ...

  7. treegrid 表格树

    treegrid  实现表格树的结构 效果图: 第一步:页面布局 <div class="col-sm-12 select-table table-striped" styl ...

  8. Bootstrap treegrid 实现树形表格结构

    前言 :最近的项目中需要实现树形表格功能,由于前端框架用的是bootstrap,但是bootstrapTable没有这个功能所以就找了一个前端的treegrid第三方组件进行了封装.现在把这个封装的组 ...

  9. 学习日记3、投机取巧使两个表的数据同时在一个treeGrid中显示

    不多说了直接上代码, $('#List').treegrid({ url: '@Url.Action("GetList")', width: $(window).width() - ...

  10. 五、bootstrap-Table Treegrid

    一.bootstrap-Table Treegrid <!DOCTYPE HTML> <html lang="zh-cn"> <head> &l ...

随机推荐

  1. Simple TCP/IP Echo Server & Client Application in C#

    1. TCP Server The server’s job is to set up an endpoint for clients to connect to and passively wait ...

  2. java实现双向循环链表

    java实现循环链表:http://www.cnblogs.com/lixiaolun/p/4643911.html 在单链表中,查询下一个元素的时间是O(1).查询上一个元素的时间却是O(n). 为 ...

  3. UNIX网络编程读书笔记:readv和writev函数

    这两个函数类似于read和write,不过readv和writev允许单个系统调用读入到或写出自一个或多个缓冲区.这些操作分别称为分散读(scatter read)和集中写(gather write) ...

  4. JS生成EXCEL(Chrome浏览器)

    直接使用js+Html生成excel文件,当前版本:chrome浏览器 <!DOCTYPE html> <html> <head> <meta charset ...

  5. 【转】DNS查询过程

    DNS查询过程 DNS的查询过程是指在客户端通过DNS服务器将一个IP地址转换为一个FQDN(Fully Qualified Domain Name,完全合格的域名),或将一个FQDN转化为一个IP地 ...

  6. spring测试实例

    我们以前要进行单元测试,必须先得到ApplicationContext对象,再通过它得到业务对象,非常麻烦,重复代码也多.基于spring3的单元测试很好的解决了这个问题 基于spring3的单元测试 ...

  7. Flume入门:安装、部署

    一.什么是Flume? flume 作为 cloudera 开发的实时日志收集系统,受到了业界的认可与广泛应用.Flume 初始的发行版本目前被统称为 Flume OG(original genera ...

  8. Spring @Autowired、@Resource、@Required、@Component、@Repository、@Service、@Controller注解的用法和作用

    Spring @Autowired,@Resource,@Required注解的用法和作用 Spring中 @Autowired标签与 @Resource标签 的区别 Spring注解@Compone ...

  9. 输出流格式化(以操纵子方式格式化,以ios类成员函数方式格式化)

    一.以操纵子方式格式化 数据输入输出的格式控制使用系统头文件<iomanip>中提供的操纵符.把它们作为插入操作符<<的输出对象即可.如setiosflags.setw.set ...

  10. js--在页面元素上(移动到或获取焦点)、鼠标离开(或失去焦点)

    1.onfocus() 和 onblur() 是一对相反的事件 但是他们只支持一部分标签 W3C关于onblur的描述:http://www.w3school.com.cn/jsref/event_o ...