Drag an item to dhtmlxGrid and add a column

简介:

dhtmlxGrid支持tree和grid、grid之间、grid内部进行拖拽,如在grid内部进行拖拽,可以增加一行;在grid之间拖拽,第一个grid的记录删除,第二个grid增加一行记录。如果我想在拖拽之后不是添加一行而是一列,该怎么做呢? 现在有个需求,就是左边有个tree,右边有个grid,将左边tree的一个节点拖到右边grid的表头并动态增加一列。这个怎么做呢? 如果你想快点看到最后的实现方法,你可以直接跳到本文的最后参看源码。 首先看看dhtmlxTree 关于Drag-n-Drop的例子,其中有这样一个例子Custom Drag Out。 上面的例子,右边定义了一个输入框,其id为“sInput”,代码如下:

function maf() {
    return false;
}
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);

tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_yellowbooks/");
tree.enableDragAndDrop(true);
tree.setDragHandler(maf);
tree.enableSmartXMLParsing(true);
tree.loadXML("../common/tree_05_drag_n_drop.xml");

function s_control() {
    this._drag = function(sourceHtmlObject, dhtmlObject, targetHtmlObject) {
        targetHtmlObject.style.backgroundColor = "";
        targetHtmlObject.value = sourceHtmlObject.parentObject.label;
    }
    this._dragIn = function(htmlObject, shtmlObject) {
        htmlObject.style.backgroundColor = "#fffacd";
        return htmlObject;
    }
    this._dragOut = function(htmlObject) {
        htmlObject.style.backgroundColor = "";
        return this;
    }
}
var sinput = document.getElementById('sInput');
tree.dragger.addDragLanding(sinput, new s_control);

为了使tree支持拖拽功能,必须添加以下代码:

tree.enableDragAndDrop(true);

为了实现自定义拖拽的输出,添加了以下代码:

tree.dragger.addDragLanding(sinput, new s_control);

从上面的字母意思可以看出,是在tree的拖拽对象dragger对象上添加一个拖拽着地对象,第一个常数是指拖拽到哪一个区域,第二个常数定义拖拽的三个方法:

    this._drag = function(sourceHtmlObject, dhtmlObject, targetHtmlObject) {
        targetHtmlObject.style.backgroundColor = "";
        targetHtmlObject.value = sourceHtmlObject.parentObject.label;
    }
    this._dragIn = function(htmlObject, shtmlObject) {
        htmlObject.style.backgroundColor = "#fffacd";
        return htmlObject;
    }
    this._dragOut = function(htmlObject) {
        htmlObject.style.backgroundColor = "";
        return this;
    }

参照上面的思路,我们可以在grid的表头上面定义一个id,然后通过该id获得表头的dom对象,更好的一个方法是通过mygrid.hdr(看看源码就知道列)能过获得grid的表头对象,然后调用下面的方法,定义tree拖拽到grid的表头:

tree.dragger.addDragLanding(mygrid.hdr, new s_control);

但是这个时候,你将tree的一个节点拖到grid的表头,grid不会有任何反应,故需要改写s_control对象的方法,这里主要是改写一个方法:

	var insertId;
	this._drag = function(sourceHtmlObject, dhtmlObject,
		targetHtmlObject, e) {
	var zel = e;
	while (zel.tagName != "TABLE")
		zel = zel.parentNode;
	var grid = zel.grid;
	if (!grid)
		return;
	grid.setActive();
	if (!grid._mCol || e.button == 2)
		return;
	e = grid.getFirstParentOfType(e, "TD")

	if ((grid) && (!grid._colInMove)) {
		grid.resized = null;
		if ((!grid._mCols) || (grid._mCols[e._cellIndex] == "true"))
			insertId = e._cellIndex + 1;
	}

	mygrid.insertColumn(insertId, "12", "ed", 80);
}

该方法主要做的事情是计算拖拽落脚时候鼠标焦点所在的列,然后在其右边添加一新的列。

本例最后的代码:

	var mygrid;
	function maf() {
		return false;
	}

	tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
	tree.setSkin('dhx_skyblue');
	tree.setImagePath("../../dhtmlxTree/codebase/imgs/csh_yellowbooks/");
	tree.enableDragAndDrop(true);
	//tree.setDragHandler(maf);
	tree.enableSmartXMLParsing(true);
	tree.loadXML("../../dhtmlxTree/samples/common/tree_05_drag_n_drop.xml")
	tree.openAllItems(0);

	function s_control() {
		var insertId;
		this._drag = function(sourceHtmlObject, dhtmlObject,
				targetHtmlObject, e) {
			var zel = e;
			while (zel.tagName != "TABLE")
				zel = zel.parentNode;
			var grid = zel.grid;
			if (!grid)
				return;
			grid.setActive();
			if (!grid._mCol || e.button == 2)
				return;
			e = grid.getFirstParentOfType(e, "TD")

			if ((grid) && (!grid._colInMove)) {
				grid.resized = null;
				if ((!grid._mCols) || (grid._mCols[e._cellIndex] == "true"))
					insertId = e._cellIndex + 1;
			}

			mygrid.insertColumn(insertId, "12", "ed", 80);
		}
	}
	mygrid = new dhtmlXGridObject('gridbox');
	mygrid.setImagePath("../codebase/imgs/");
	mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,
              Date of Publication");
	mygrid.setInitWidths("50,150,100,80,80,80,80,200");
	mygrid.setColAlign("right,left,left,right,center,left,center,center");
	mygrid.setColTypes("dyn,edtxt,ed,price,ch,co,ra,ro");
	mygrid.enableDragAndDrop("temporary_disabled", true);
	mygrid.init();
	mygrid.setSkin("dhx_skyblue");
	mygrid.enableHeaderMenu();
	mygrid.enableColumnMove(true);
	mygrid.setColumnHidden(2, true);
	mygrid.attachEvent("onHeaderClick", function(ind, obj) {
	});
	mygrid.loadXML("../common/grid_ml_16_rows_columns_manipulations.xml");
	tree.dragger.addDragLanding(mygrid.hdr, new s_control);

本文实现的是将tree拖拽到grid,其实其他的一些支持拖拽的组件也可以做,并不局限于tree组件,甚至还见过有人实现jquery的dtree拖拽到dhtmlxGrid增加一行记录。

参考文章

  • Custom Drag Out:http://www.dhtmlx.com/docs/products/dhtmlxTree/samples/05_drag_n_drop/08_pro_drag_out.html
  • dhtmlxGrid doc:http://docs.dhtmlx.com/doku.php?id=dhtmlxgrid:toc
  • dhtmlxTree doc:http://docs.dhtmlx.com/doku.php?id=dhtmlxtree:toc
  • 目录
    相关文章
    |
    机器学习/深度学习 监控 算法
    信用风险评估评分卡建模方法及原理| 学习笔记
    快速学习信用风险评估评分卡建模方法及原理。
    信用风险评估评分卡建模方法及原理| 学习笔记
    |
    运维 监控 Linux
    Linux系统中实现便捷运维管理和远程访问的1Panel部署方法
    Linux系统中实现便捷运维管理和远程访问的1Panel部署方法
    |
    开发工具 Linux
    Keepalived 日志配置与启动配置
    在Redhat系统下,可以使用下面的方法将keepalived的日志输出到/var/log/下的某个文件里:  1.将keepalived日志输出到local0:  vim /etc/sysconfig/keepalived  KEEPALIVED_OPTIONS="-D -d -S 0"  2.
    3511 0
    |
    SQL 运维 关系型数据库
    使用Binlog日志恢复误删的MySQL数据
    今天文章的主题是如何使用Mysql内置的Binlog日志对误删的数据进行恢复,读完本文,你能够了解到: MySQL的binlog日志是什么?通常是用来干什么的? 模拟一次误删数据的操作,并且使用binlog日志恢复误删的数据。
    1892 1
    |
    11月前
    |
    JSON API 数据格式
    使用Python和Flask构建简单的RESTful API
    【10月更文挑战第12天】使用Python和Flask构建简单的RESTful API
    134 1
    |
    定位技术
    在获取的静态住宅IP代理时需要注意哪些?
    获取高质量静态住宅IP代理需注意三点:1) 确保IP为住宅环境,通过位置和ISP验证;2) 重视代理的稳定性和安全性,以保障服务连续性;3) 遵守法律,合法使用IP资源。
    203 0
    在获取的静态住宅IP代理时需要注意哪些?
    |
    12月前
    |
    JavaScript
    element-ui table表格多选后再打开默认选中
    element-ui table表格多选后再打开默认选中
    |
    11月前
    |
    JavaScript
    在 Vue 3 中使用 DHTMLX 甘特图组件
    本文将介绍如何在 Vue 3 项目中集成 DHTMLX 甘特图组件,详细讲解安装、模块导入以及基本用法。通过示例代码,您将学会如何配置甘特图的任务、样式和交互功能,帮助您在项目中更有效地管理和展示任务时间线。
    1229 0
    |
    前端开发 数据可视化 项目管理
    Dhtmlx Gantt教程:创建交互式甘特图的完整指南
    Dhtmlx Gantt教程:创建交互式甘特图的完整指南
    |
    数据建模 测试技术 应用服务中间件
    在阿里云申请SSL证书多少钱?免费版与付费版申请流程介绍
    阿里云2024年提供免费及付费SSL证书,免费版年领限20张,适合测试环境,352元/年起售付费版。个人/企业用户一年可领20张免费DV单域名证书。付费证书享折扣,如WoSign DV仅352元/年。下文将指导您快速领取、申请阿里云提供的免费版和收费版SSL证书。
    在阿里云申请SSL证书多少钱?免费版与付费版申请流程介绍