treegrid-dnd.js
(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"> </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的更多相关文章
- EasyUi TreeGrid封装
礼物一:树型实体的抽象与封装 所谓树型实体,就是具有树型结构关系的实体,比如省.市.区.对于初学者,可能会创建三张表进行存储,有经验的开发者通过引入ParentId将设计简化为一张表,但是基于Pare ...
- RDIFramework.NET框架Web中datagrid与treegrid控件自动生成右键菜单与列标题右键菜单
在实际应用中常可以看到数据展示控件有右键菜单的功能,对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能.在我们的RDIFramework.NET Web框架中,只要是使用了EasyUI的D ...
- html或者jsp页面引用jar包中的js文件
一,页面上引用jar包中的js文件的方法 使用java web框架AppFuse的时候发现,jquery.bootstrap等js框架都封装到jar包里面了.这些js文件通过一个wro4j的工具对其进 ...
- easyloader.js源代码分析
http://www.cnblogs.com/jasonoiu/p/easyloader_source_code_analysis.html Jquery easyui是一个javascript UI ...
- treegrid.bootstrap使用说明
treegrid.bootstrap使用说明 这个插件是用来做有层次的表格的,大概如图: 官网 http://maxazan.github.io/jquery-treegrid/ 使用这个控件之前需 ...
- JS组件系列——自己动手封装bootstrap-treegrid组件
前言:最近产品需要设计一套相对完整的组织架构的解决方案,由于组织架构涉及到层级关系,在表格里面展示层级关系,自然就要用到所谓的treegrid.可惜的是,一些轻量级的表格组件本身并没有自带树形表格的功 ...
- treegrid 表格树
treegrid 实现表格树的结构 效果图: 第一步:页面布局 <div class="col-sm-12 select-table table-striped" styl ...
- Bootstrap treegrid 实现树形表格结构
前言 :最近的项目中需要实现树形表格功能,由于前端框架用的是bootstrap,但是bootstrapTable没有这个功能所以就找了一个前端的treegrid第三方组件进行了封装.现在把这个封装的组 ...
- 学习日记3、投机取巧使两个表的数据同时在一个treeGrid中显示
不多说了直接上代码, $('#List').treegrid({ url: '@Url.Action("GetList")', width: $(window).width() - ...
- 五、bootstrap-Table Treegrid
一.bootstrap-Table Treegrid <!DOCTYPE HTML> <html lang="zh-cn"> <head> &l ...
随机推荐
- Rust 格式输出
格式输出由一系列定义在 std::fmt 中的宏提供. 包含: format! : 输出格式化的字符串. print! : 输出格式化的字符串到控制台(终端)println!: 添加一个换行,输出格 ...
- HDU 4757
可持久化trie树.不会可持久化数据结构的话推荐先看陈立杰的论文.先掌握可持久化线段树和可持久化trie树. //可持久化trie树,题目已知一棵树,每个点有点权,询问一对点路径上点权与给定值异或的最 ...
- PHP - AJAX 与 MySQL
PHP - AJAX 与 MySQL AJAX 可用来与数据库进行交互式通信. AJAX 数据库实例 下面的实例将演示网页如何通过 AJAX 从数据库读取信息: 本教程使用到的 Websites 表 ...
- 【转】如何成为Python高手
http://www.aqee.net/how-to-become-a-proficient-python-programmer/ 这篇文章主要是对我收集的一些文章的摘要.因为已经有很多比我有才华的人 ...
- Eclipse自动编译NDK/JNI的三种方法
一.Eclipse关联cygwin 1. 工程->右击选择Properties->选择Builders,在Builders中选择New创建一个Program 2. 参数配置 二.Eclip ...
- 浅析JDK中ServiceLoader的源码
前提 紧接着上一篇<通过源码浅析JDK中的资源加载>,ServiceLoader是SPI(Service Provider Interface)中的服务类加载的核心类,也就是,这篇文章先介 ...
- AjaxAnyWhere 实现页面局部刷新,局部分页
这个比較jquery.单纯ajax异步简单多了.不多说了直接上代码. 须要引入:ajaxanywhere-1.2.1.jar (最新)和 /ajaxAnyWhereDemo/WebRoot/js/aa ...
- UNIX网络编程卷2进程间通信读书笔记(二)—管道 (1)
一.管道 管道的名称很形象,它就像是一个水管,我们从一端到水然后水从令一端流出.不同的是这里说的管道的两边都是进程.从一端往管道里写数据,其它进程可以从管道的另一端的把数据读出,从而实现了进程间通信的 ...
- OFBiz:component-load.xml
component-load.xml定义了OFBiz的组件载入位置,默认的是通过目录来设置: <component-loader xmlns:xsi="http://www.w3.or ...
- beyond compare 与git diff整合
这两天花了点时间最终在Window和Mac上把Beyong Compare和git整合好.当中遇到到非常多坑,如今把这些都分享出来.希望对大家有帮助. 首先如果你已经装好了Beyong Compare ...