JavaChen on JavaJavaScript http://www.javachen.com Just some sharing about Java open source and life Mon, 06 Feb 2012 12:16:34 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Export DhtmlxGrid to PDF in Java http://www.javachen.com/2011/08/export-dhtmlxgrid-to-pdf-in-java/ http://www.javachen.com/2011/08/export-dhtmlxgrid-to-pdf-in-java/#comments Thu, 11 Aug 2011 13:00:56 +0000 JavaChen http://www.javachen.com/?p=2384 您可能也喜欢：
DhtmlxGrid Quick Start Guide
Drag a item to dhtmlxGrid and add a column
Struts 2.0中的Action
Spring Bean Lifecycle Managerment
Unobtrusive Javascript 无觅 ]]> 将DhtmlxGrid数据导出到pdf这是很常见的需求，dhtmlx官网提供了php和java版本的例子，你可以去官网查看这篇文章《Grid-to-Excel, Grid-to-PDF Available for Java》，你可以从以下地址下载导出程序源码：
Export to Excel
Export to PDF
当然，还有一个示例工程： .zip archive with an example

XML2PDF和XML2Excel工程内代码很相似，XML2PDF内部使用了PDFjet.jar导出PDF，而XML2Excel使用JXL导出Excel。
需要说明的是，还需要引入dhtmlxgrid_export.js文件，该文件是导出grid的js源码，主要用于将表格数据，包括表头、样式等，序列化为xml字符串，然后模拟一个Form表单提交数据。

将上面三个工程导入到一个工程然后打开sample.html页面，效果如下：


点击Get as PDF按钮，你会发现会打开一个新的窗口，然后页面什么都没有，而eclipse控制台报空指针异常。异常的主要原因在于下段代码：。

?View Code JAVA
1
2
3
4
5
6
7
8
9
10
11

DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance ();
DocumentBuilder db = dbf.newDocumentBuilder();
Document dom = null;
try {
     dom = db.parse(new InputSource(new StringReader(xml)));
}catch(SAXException se) {
     se.printStackTrace();
}catch(IOException ioe) { 
     ioe.printStackTrace();
}
root = dom.getDocumentElement();

上面的代码，DocumentBuilder解析xml字符串后dom对象内并没有数据。
为了能够看到DhtmlxGrid导出pdf的效果，决定将上面的代码用dom4j改写，于是有了下面的代码：

?View Code JAVA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

public class PDFXMLParser {
	Element root;
	PDFColumn[][] columns;
	PDFRow[] rows;
	double[] widths;
	private Boolean header = false;
	private Boolean footer = false;
	private String profile = "gray";
	private double[] orientation = null;
 
	public void setXML(String xml) {
		SAXReader saxReader = new SAXReader();
 
		Document document = null;
		try {
			document = saxReader.read(new ByteArrayInputStream(xml.getBytes()));
		} catch (DocumentException e) {
			e.printStackTrace();
		}
		root = document.getRootElement();
 
		if ((root.attributeValue("header") != null)
				&& (root.attributeValue("header").equalsIgnoreCase("true") == true)) {
			header = true;
		}
		String footer_string = root.attributeValue("footer");
		if ((footer_string != null)
				&& (footer_string.equalsIgnoreCase("true") == true)) {
			footer = true;
		}
		String profile_string = root.attributeValue("profile");
		if (profile_string != null) {
			profile = profile_string;
		}
 
		String orientation_string = root.attributeValue("orientation");
		if (orientation_string != null) {
			if (orientation_string.equalsIgnoreCase("landscape")) {
				orientation = A4.LANDSCAPE;
			} else {
				orientation = A4.PORTRAIT;
			}
		} else {
			orientation = Letter.PORTRAIT;
		}
	}
 
	public PDFColumn[][] getColumnsInfo() {
		PDFColumn[] colLine = null;
		List n1 = root.element("head").elements("columns");
		if ((n1 != null) && (n1.size() > 0)) {
			columns = new PDFColumn[n1.size()][];
			for (int i = 0; i < n1.size(); i++) {
				Element cols = (Element) n1.get(i);
				List n2 = cols.elements("column");
				if ((n2 != null) && (n2.size() > 0)) {
					colLine = new PDFColumn[n2.size()];
					for (int j = 0; j < n2.size(); j++) {
						Element col_xml = (Element) n2.get(j);
						PDFColumn col = new PDFColumn();
						col.parse(col_xml);
						colLine[j] = col;
					}
				}
				columns[i] = colLine;
			}
		}
		createWidthsArray();
		optimizeColumns();
		return columns;
	}
        public PDFRow[] getGridContent() {
		List nodes = root.elements("row");
		if ((nodes != null) && (nodes.size() > 0)) {
			rows = new PDFRow[nodes.size()];
			for (int i = 0; i < nodes.size(); i++) {
				rows[i] = new PDFRow();
				rows[i].parse((Element) nodes.get(i));
			}
		}
		return rows;
 
	}
 
       *****
}

还需要修改PDFRow类的parse方法和PDFColumn的parse方法。

?View Code JAVA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

public class PDFRow {
 
	private String[] cells;
 
	public void parse(Element parent) {
		List nodes = ((Element) parent).elements("cell");
		if ((nodes != null) && (nodes.size() > 0)) {
			cells = new String[nodes.size()];
			for (int i = 0; i < nodes.size(); i++) {
				cells[i] = ((Element) nodes.get(i)).getTextTrim();
			}
		}
	}
 
	public String[] getCells() {
		return cells;
	}
}
 
public class PDFColumn {
 
	public void parse(Element parent) {
		colName = parent.getText();
		String width_string = parent.attributeValue("width");
		if (width_string!=null&&width_string.length() > 0) {
			width = Integer.parseInt(width_string);
		}
		type = parent.attributeValue("type");
		align = parent.attributeValue("align");
		String colspan_string = parent.attributeValue("colspan");
		if (colspan_string!=null&&colspan_string.length() > 0) {
			colspan = Integer.parseInt(colspan_string);
		}
		String rowspan_string = parent.attributeValue("rowspan");
		if (rowspan_string!=null&&rowspan_string.length() > 0) {
			rowspan= Integer.parseInt(rowspan_string);
		}
	}
}

这样xml字符串就能正常解析了，然后使用pdfjet.jar包就可以导出pdf了，最后的效果如下：

结论：

1.导出pdf和导出Excel代码差不多，这里不做说明。
2.使用上面的工具，可以将dhtmlxgrid的数据导出到pdf，并且导出的pdf还保持了grid表格的样式（包括颜色、多表头、表头合并、复选框等等），这点很不错。
3.导出的pdf为多页显示，每页有表头
4.导出后的pdf页面可以直接打印，当然如果在代码上做点处理，可以直接将pdf保存为一个文件，让用户下载。
您可能也喜欢：

生日快乐！
OpenStack架构预览
Unobtrusive Javascript
模仿QQ空间的警告提示栏
DhtmlxGrid Quick Start Guide
无觅
By the time your rss reader get this post here is 1 comments ,Welcome you come to leave your opinion !]]> http://www.javachen.com/2011/08/export-dhtmlxgrid-to-pdf-in-java/feed/ 1 JavaScript模态窗口和非模态窗口 http://www.javachen.com/2011/08/javascript-modelessdialog-and-modaldialog/ http://www.javachen.com/2011/08/javascript-modelessdialog-and-modaldialog/#comments Sun, 07 Aug 2011 06:58:26 +0000 JavaChen http://www.javachen.com/?p=2373 您可能也喜欢：
javascript 弹出子窗口
JavaScript数据类型
JavaScript中的闭包
JavaScript 中的 call与apply
JavaScript验证正则表达式大全 无觅 ]]> JavaScript中弹出的窗口有模态窗口和非模态窗口。模态窗口就是打开一个子窗口，如果这个子窗口不关闭，就不能操作它的父窗口，原来程序暂停执行，直到这个模态窗口关闭后才回到原来程序继续。非模态的就是直接显示出来，然后原来的程序继续执行下面的语句，而且其他窗口也呈可用状态。 模态窗口独占了用户的输入，当一个模态窗口打开时，用户只能与该窗口进行交互，而其他用户界面对象收不到输入信息。 通常浏览器中windwo.open或超链接弹出的新窗口就是非模式窗口,而模式窗口是类似alert那种必须关闭才能响应其他事件的窗口。

常见的方法

window.showModalDialog(“http://www.javachen.com”,”newwin”,”dialogHeight: 200px; dialogWidth: 150px; dialogTop: 458px; dialogLeft: 166px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;”); window.showModelessDialog() //用来创建一个显示HTML内容的非模态对话框。
window.returnValue=”javachen”; //设置模态窗口返回值
var str=window.showModalDialog(“http://www.javachen.com”); //获得模态窗口返回值
window.close(); //关闭窗口
window.focus(); //窗口聚焦

使用方法：

参数说明： sURL–必选参数，类型：字符串。用来指定对话框要显示的文档的URL。 vArguments–可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures–可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。

1.dialogHeight :对话框高度，不小于100px，IE4中dialogHeight 和 dialogWidth 默认的单位是em，而IE5中是px，为方便其见，在定义modal方式的对话框时，用px做单位。

2.dialogWidth: 对话框宽度。

3.dialogLeft: 离屏幕左的距离。

4.dialogTop: 离屏幕上的距离。

5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。

6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。

7.resizable: {yes | no | 1 | 0 } ［IE5＋］：是否可被改变大小。默认no。

8.status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。

9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

下面几个属性是用在HTA中的，在一般的网页中一般不使用。

10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。

11.edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。

12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

上面的方法中需要设置太多的常数，我们可以对其进行封装，如window.open方法：

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

       window.doOpenWinAction = function(sUrl, _nWidth, _nHeight, _oArgs, _nTop,
		_nLeft) {
	var nWidth = _nWidth || 200;
	var nHeight = _nHeight || 200;
 
	var nLeft = _nLeft || (window.screen.availWidth - nWidth) / 2;
	var nTop = _nTop || (window.screen.availHeight - nHeight) / 2;
 
	// 2.Construct parameters for dialog
	var sFeatures = "height="+ nHeight+ ", width="	+ nWidth+ ","+ "top="
             + nTop+ ",left="+ nLeft+ ",fullscreen =no,"
             +"menubar =no,toolbar =no,scrollbars=yes,location =no,titlebar=no,resizable=yes";
 
	var oWin = window.open(sUrl, '_blank', sFeatures, false);
	if (oWin == null) {
		alert("您的IE插件已经将窗口拦截，无法打开新窗口！\n"
		+ "请将拦截去掉-->点击退出-->关闭IE，然后重新打开IE登录即可！"    
                +"\n" + "URL：" + _sUrl);
	} else {
		oWin.opener = window;
		oWin.focus();
	}
};

而对模态窗口和非模态窗口的方法也可以封装如下：

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

window.doModalDialogAction = function(sDialogUrl, _nWidth, _nHeight, _oArgs,
		_nTop, _nLeft) {
	// 1.verify parameters
	var nWidth = _nWidth || 200;
	var nHeight = _nHeight || 200;
 
	var nLeft = _nLeft || (window.screen.availWidth - nWidth) / 2;
	var nTop = _nTop || (window.screen.availHeight - nHeight) / 2;
 
	// 2.Construct parameters for dialog
	var sFeatures = "dialogHeight: " + nHeight + "px; dialogWidth: " + nWidth
		+ "px; " + "dialogTop: " + nTop + "; dialogLeft: " + nLeft + "; "
		+ "center: Yes; scroll:Yes;help: No; resizable: No; status: No;";
	// 3.display Dialog
	var arArgs = [];
	arArgs[0] = window.location.href;
	arArgs[1] = _oArgs;
	try {
		var sResult = window.showModalDialog(sDialogUrl, arArgs, sFeatures);	
		return sResult;
	} catch (e) {
		alert("您的IE插件已经将对话框拦截！\n" + 
          "请将拦截去掉-->点击退出-->关闭IE，然后重新打开IE登录即可！\n");
		return true;
	}
 
};
 
window.doModelessDialogAction = function(sDialogUrl, _nWidth, _nHeight, _oArgs,
		_nTop, _nLeft) {
	// 1.verify parameters
	var nWidth = _nWidth || 200;
	var nHeight = _nHeight || 200;
 
	var nLeft = _nLeft || (window.screen.availWidth - nWidth) / 2;
	var nTop = _nTop || (window.screen.availHeight - nHeight) / 2;
 
	// 2.Construct parameters for dialog
	var sFeatures = "dialogHeight: " + nHeight + "px; dialogWidth: " + nWidth
			+ "px; " + "dialogTop: " + nTop + "; dialogLeft: " + nLeft + "; "
			+ "center: Yes; scroll:Yes;help: No; resizable: No; status: No;";
	// 3.display Dialog
	var arArgs = new Array();
	arArgs[0] = window.location.href;
	arArgs[1] = _oArgs;
	try {
		var sResult = window.showModelessDialog(sDialogUrl, arArgs, sFeatures);
		return sResult;
	} catch (e) {
		alert("您的IE插件已经将对话框拦截！\n" + 
          "请将拦截去掉-->点击退出-->关闭IE，然后重新打开IE登录即可！\n");
		return true;
	}
 
};

模态窗口一般是用于弹出窗口，让用户在模态窗口中选中某一数据之后关闭模态窗口将用户选择的结果返回到当前页面，如下图。下图单击浏览按钮将弹出窗口，用户当前弹出窗口中数据列表的某一行记录，就会关闭窗口将该行记录的id和name设置到当前窗口的隐藏域（id）和输入框上（name）。

为了实现上面的效果，需要在浏览按钮上添加事件：

?View Code JAVASCRIPT
1
2
3
4
5
6

function showSelectIdNameDialog(id, name, url, width, height, callback) {
	var array = callback ? toArray(id, name, callback) : toArray(id, name);
	var args = buildDialogArgs(onDialogSelectIdAndName, array,callback);
	doModalDialogAction2(url, width, height, args);
	return false;
}
常数id指定当前隐藏域的id；
name指定返回结果需要显示到的输入框name；
url为访问地址；
callback为回调函数，在关闭窗口后执行

设置好id和name的值，在调用上面的方法之后，但用户选中某一行数据之后，只需要在打开的页面设置好返回值，其他的就不用我们做了。showSelectIdNameDialog方法的内部往常数里添加列onDialogSelectIdAndName这个回调函数，而这个函数就是用于将窗口返回值设置到指定id和name的input域上。

在弹出窗口的页面，需要返回结果：

?View Code JAVASCRIPT
1
2
3
4

grid.attachEvent("onRowSelect", function(id, ind) {
	dialogReturn(id, grid.cells(id, 1).getValue());//这句话是关键
	return true;
});

当然，我们还可以自定义回调函数：

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/**
 * 弹出选择窗口
 * @param url
 * @param width
 * @param height
 * @param callback
 * @returns {Boolean}
 */
function showSelectDialog(url, width, height, callback) {
	var args = buildDialogArgs(onDialogSelectCallback,callback);
	doModalDialogAction2(url, width, height, args);
	return false;
}
 
/**
 * 弹出普通的窗口
 * @param url
 * @param width
 * @param height
 * @param callback
 * @returns {Boolean}
 */
function showNormalDialogCallback(url, width, height, callback) {
	var args = buildDialogArgs(callback,{});
	doModalDialogAction2(url, width, height, args);
	return false;
}
 
function showModalDialogCallbackExt(url, width, height, callback, param) {
	var args = buildDialogArgs(callback, param);
	doModalDialogAction2(url, width, height, args);
	return false;
}

说明：

本文中的源码和例子可以通过email(在关于页面可以找到地址)向我索取。

您可能也喜欢：

javascript 弹出子窗口
JavaScript数据类型
JavaScript中的闭包
JavaScript 中的 call与apply
JavaScript验证正则表达式大全
无觅
Here is no comments yet by the time your rss reader get this, Do you want to be the first commentor? Hurry up ]]> http://www.javachen.com/2011/08/javascript-modelessdialog-and-modaldialog/feed/ 0 自定义dhtmlxGrid表头菜单 http://www.javachen.com/2011/07/custom-dhtmlxgrid-header-menu/ http://www.javachen.com/2011/07/custom-dhtmlxgrid-header-menu/#comments Sun, 31 Jul 2011 08:12:22 +0000 JavaChen http://www.javachen.com/?p=2286 您可能也喜欢：
DhtmlxGrid Quick Start Guide
Export DhtmlxGrid to PDF in Java
Drag a item to dhtmlxGrid and add a column
Drag an item to dhtmlxGrid and add a column
Spring Bean Lifecycle Managerment 无觅 ]]> dhtmlxGrid可以定义表头菜单以及表格右键菜单，表格右键菜单可以自定义，但是表头菜单只能使用其提供的菜单。dhtmlxGrid默认的表头菜单可以决定表格中每一列是否在表格中显示，并没有提供更多的扩展，如果我想自定义表头菜单，该怎么做呢？本文就是基于自定义表格菜单，说说我的实现方式。
以下是dhtmlxGrid的表头菜单效果：

其功能过于单一，以下是表格右键菜单效果：

如果能够像表格菜单一样自定义表头菜单，那会是一件非常有意义的事情，因为dhtmlxGrid菜单都是一些针对行和单元格的操作，没有提过针对列的操作，比如我可能需要在某一列上实现该列的显示与隐藏、排序、改变列属性以及在该列右边添加一新的列，等等。
如何实现表头菜单的自定义呢？可不可将表格右键菜单移到表头上去呢？
首先，来看看context menu的实现方式，下面代码来自dhtmlxGrid Samples中的Context menu例子源码：

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function onButtonClick(menuitemId, type) {
    var data = mygrid.contextID.split("_");
    //rowId_colInd;
    mygrid.setRowTextStyle(data[0], "color:" + menuitemId.split("_")[1]);
    return true;
}
menu = new dhtmlXMenuObject();
menu.setIconsPath("../common/images/");
menu.renderAsContextMenu();
menu.attachEvent("onClick", onButtonClick);
menu.loadXML("../common/_context.xml");
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Author,Title");
mygrid.setInitWidths("250,250");
mygrid.enableAutoWidth(true);
mygrid.setColAlign("left,left");
mygrid.setColTypes("ro,link");
mygrid.setColSorting("str,str");
mygrid.enableContextMenu(menu);
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/grid_links.xml");

上面代码创建了一个menu并将其作为context menu附件到grid上面去，下面为最关键的两行行代码：

?View Code JAVASCRIPT
1
2

menu.renderAsContextMenu();
mygrid.enableContextMenu(menu);

上面对于context menu提供的方法太少，这时候可以看看dhtmlxMenu api，看看有没有设置context menu生效位置的方法（指定context menu在哪片区域有效）。在dhtmlxMenu API Methods里没有找到需要的方法，这时候在官网论坛搜搜，也许可以找到点什么。
在论坛里可以找到一个例子，大致代码如下：

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function onButtonClick(menuitemId, type) {
    var data = mygrid.contextID.split("_");
    //rowId_colInd;
    mygrid.setRowTextStyle(data[0], "color:" + menuitemId.split("_")[1]);
    return true;
}
menu = new dhtmlXMenuObject();
menu.setIconsPath("../common/images/");
menu.attachEvent("onClick", onButtonClick);
menu.loadXML("../common/_context.xml");
 
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Author,Title");
mygrid.setInitWidths("250,250");
mygrid.enableAutoWidth(true);
mygrid.setColAlign("left,left");
mygrid.setColTypes("ro,link");
mygrid.setColSorting("str,str");
//mygrid.enableContextMenu(menu); //使其失效
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/grid_links.xml");
 
mygrid.hdr.id = "header_id";
var header_row = mygrid.hdr.rows[1];
for ( var i = 0; i < header_row.cells.length; i++) {
   header_row.cells[i].id = "context_zone_" + i;
}
menu.addContextZone("header_id");

上面最关键的代码在最后几行，给dhtmlxGrid表头设置了一个id，然后调用menu的addContextZone()方法指定centext的有效区域。视乎这就是我们所需要的，但是你执行以上代码你会发现onButtonClick方法里mygrid.contextID会报错，原因是mygrid没有contextID属性（在context menu中通过该属性可以获知鼠标焦点在哪一行，但是现在在表头上强加了该menu，所以并不存在该属性了）。
剩下的问题是需要解决，菜单单击事件了。我们可以在表头的contextmenu事件处罚的时候获取鼠标焦点，并将自定义的菜单在该位置显示，该方法如下：

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

dhtmlxEvent(mygrid.hdr, "contextmenu", function(ev) {
	ev = ev || event;
	var el = ev.target || ev.srcElement;
	var zel = el;
	while (zel.tagName != "TABLE")
		zel = zel.parentNode;
	var grid = zel.grid;
	if (!grid)
		return;
	grid.setActive();
 
	el = grid.getFirstParentOfType(el, "TD")
 
	if ((grid) && (!grid._colInMove)) {
		grid.resized = null;
		if ((!grid._mCols) || (grid._mCols[el._cellIndex] == "true"))
			colId = el._cellIndex + 1;//获得表头右键菜单焦点所在列索引
	}
 
	function mouseCoords(ev) {
		if (ev.pageX || ev.pageY) {
			return {
				x : ev.pageX,
				y : ev.pageY
			};
		}
		var d = _isIE && document.compatMode != "BackCompat" ? 
                    document.documentElement: document.body;
		return {
			x : ev.clientX + d.scrollLeft - d.clientLeft,
			y : ev.clientY + d.scrollTop - d.clientTop
		};
	}
 
	var coords = mouseCoords(ev);
	menu.addContextZone("header_id");
	menu.showContextMenu(coords.x, coords.y);//强制显示
	return true;
});

在上面的代码里，我们获得表头右键菜单焦点所在列索引，将其值赋给colId，然后在菜单单击事件的时候添加一新的列并将colId重置：

?View Code JAVASCRIPT
1
2
3
4
5

function onButtonClick(menuitemId, type, e) {
	mygrid.insertColumn(colId, "12", "ed", 80);
	colId = 0;
	return true;
}

然后，需要禁止掉表格数据区域的菜单显示：

?View Code JAVASCRIPT
1
2
3

mygrid.attachEvent("onBeforeContextMenu", function(rid, cid, e) {
	return false;//禁止数据区域菜单
});

最后的最后，最后的代码如下：

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

	var mygrid, colId;
 
	function onButtonClick(menuitemId, type, e) {
		mygrid.insertColumn(colId, "12", "ed", 80);
		colId = 0;
		return true;
	}
 
	menu = new dhtmlXMenuObject();
	menu.setIconsPath("../common/images/");
	menu.renderAsContextMenu();
	menu.attachEvent("onClick", onButtonClick);
	menu.loadXML("../common/_context.xml");
	menu.attachEvent("onBeforeContextMenu", function(zoneId, e) {
		var hdr = document.getElementById(zoneId)
		return true;
	});
 
	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.init();
	mygrid.setSkin("dhx_skyblue");
	//mygrid.enableHeaderMenu();
	mygrid.enableColumnMove(true);
	mygrid.enableContextMenu(menu);
	dhtmlxEvent(mygrid.hdr, "contextmenu", function(ev) {
		ev = ev || event;
		var el = ev.target || ev.srcElement;
		var zel = el;
		while (zel.tagName != "TABLE")
			zel = zel.parentNode;
		var grid = zel.grid;
		if (!grid)
			return;
		grid.setActive();
 
		el = grid.getFirstParentOfType(el, "TD")
 
		if ((grid) && (!grid._colInMove)) {
			grid.resized = null;
			if ((!grid._mCols) || (grid._mCols[el._cellIndex] == "true"))
                                //获得表头右键菜单焦点所在列索引
				colId = el._cellIndex + 1;
		}
 
		function mouseCoords(ev) {
			if (ev.pageX || ev.pageY) {
				return {
					x : ev.pageX,
					y : ev.pageY
				};
			}
			var d = _isIE && document.compatMode != "BackCompat" ? 
                             document.documentElement: document.body;
			return {
				x : ev.clientX + d.scrollLeft - d.clientLeft,
				y : ev.clientY + d.scrollTop - d.clientTop
			};
		}
 
		var coords = mouseCoords(ev);
		menu.addContextZone("header_id");
		menu.showContextMenu(coords.x, coords.y);//强制显示
		return true;
	});
 
	mygrid.attachEvent("onBeforeContextMenu", function(rid, cid, e) {
		return false;//禁止数据区域菜单
	});
 
	mygrid.loadXML("../common/grid_ml_16_rows_columns_manipulations.xml");
 
	mygrid.hdr.id = "header_id";
	var header_row = mygrid.hdr.rows[1];
	for ( var i = 0; i < header_row.cells.length; i++) {
		header_row.cells[i].id = "context_zone_" + i;
	}

效果图如下;

您可能也喜欢：

DhtmlxGrid Quick Start Guide
Export DhtmlxGrid to PDF in Java
Drag a item to dhtmlxGrid and add a column
Drag an item to dhtmlxGrid and add a column
Butterfly Scheduling Introduction
无觅
Here is no comments yet by the time your rss reader get this, Do you want to be the first commentor? Hurry up ]]> http://www.javachen.com/2011/07/custom-dhtmlxgrid-header-menu/feed/ 0 Drag an item to dhtmlxGrid and add a column http://www.javachen.com/2011/07/drag-an-item-to-dhtmlxgrid-and-add-a-column/ http://www.javachen.com/2011/07/drag-an-item-to-dhtmlxgrid-and-add-a-column/#comments Sun, 24 Jul 2011 13:27:28 +0000 JavaChen http://www.javachen.com/?p=2236 您可能也喜欢：
Export DhtmlxGrid to PDF in Java
毕业纪念册完结了
JFreeChart 生成饼状图
接触云服务环境Eucalyptus
Hibernate one-to-one association 无觅 ]]> 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);
}

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

本例最后的代码：

本文实现的是将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

您可能也喜欢：

这一个月我在做什么
Spring Bean Lifecycle Managerment
使用kettle数据迁移添加主键和索引
DhtmlxGrid Quick Start Guide
无觅
Here is no comments yet by the time your rss reader get this, Do you want to be the first commentor? Hurry up ]]> http://www.javachen.com/2011/07/drag-an-item-to-dhtmlxgrid-and-add-a-column/feed/ 0 DhtmlxGrid Quick Start Guide http://www.javachen.com/2011/07/dhtmlxgrid-quick-start-guide/ http://www.javachen.com/2011/07/dhtmlxgrid-quick-start-guide/#comments Tue, 19 Jul 2011 13:28:59 +0000 JavaChen http://www.javachen.com/?p=2217 您可能也喜欢：
OpenNebula的架构
jQuery中的正则表达式
Begin to study struts2
OpenStack架构预览
房奴生活 无觅 ]]> 说明:本文来源于http://dhtmlx.com/docs/products/dhtmlxGrid/，本人对其进行翻译整理成下文，贴出此文，紧供分享。

dhtmlxGrid是一个拥有强大的数据绑定、优秀的大数据展示性能并支持ajax的JavaScript表格控件。该组件易于使用并通过富客户端的API提供了很大的扩展性。dhtmlxGrid支持不同的数据源（XML, JSON, CSV, JavaScript 数组和HTML表格），如果需要的话，还可以从自定义的xml中加载数据。

  • 跨浏览器
  • 使用JavaScript API进行控制
  • Ajax支持
  • 简单的JavaScript 或者XML 配置
  • 与HTML集成
  • 内建过滤、排序、查询、分组功能
  • 表格 footer/header自动计算
  • 行内编辑
  • 准备使用大数据集解决方案：分页，动态加载，智能渲染
  • 序列化为XML或CSV
  • 从 XML或CSV加载
  • 列锁定
  • 剪贴板支持
  • 简单的客户端到服务器端配置 (使用 dhtmlxConnector, 可用于 PHP, Java, .NET, ColdFusion)
  • 支持子表格
  • 列拖拽和移动
  • 行或列拖拽
  • dhtmlxTree PRO Edition支持拖拽
  • 可以创建一个编辑器或是列格式化 (使用 eXcell – 继承自 cell 对象)
  • 组合框，日历以及更多的预定义eXcells
  • Cell支持数学方程式
  • 不同的键盘映射
  • 简单的CSS风格或是预定义的皮肤
  • 对于rows/entire grid不可见的数据块 (用户数据)
  • 客户端排序(string, integer, date, custom)
  • 服务器端排序
  • 广泛的事件处理


Step 1 – 引入文件

?View Code HTML
1
2
3
4
5
6
7
8

<rel ="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid.css">
<script src="codebase/dhtmlxcommon.js"></script>
<script src="codebase/dhtmlxgrid.js"></script>
<script src="codebase/dhtmlxgridcell.js"></script>
<script>
    //we'll write script commands here
</script>
</rel>

Step 2 – 放置gird

有两种方式在一个页面放置grid，这里减少最常用的方法：创建一个div并给id熟悉设置一个惟一值。例如：

?View Code HTML
1

  <div id="mygrid_container" style="width:600px;height:150px;"></div>

下面初始化参数，首先定一个mygrid变量，然后定一个doInitGrid方法，方法内部进行mygrid初始化工作：

?View Code JAVASCRIPT
1
2
3

 var mygrid;
 function doInitGrid(){
 }

doInitGrid方法会包括以下代码：
o 使用dhtmlXGridObject构造方法创建一个基于我们之前创建的DIV的grid对象；
o 设置grid图片路径。这个路径包括grid外观需要的所有图片。在大多数情况下该路径为“codebase/imgs/”. 该路径最后面的一个“/”很重要。 随便说一下，这个路径和你处理表格数据所使用的图片没有关系；
o 使用setHeader 方法定义表头；
o 使用setInitWidths (单位为像素) 或setInitWidthsP (单位为百分比)定义列宽。 使用*代表让列自动使用所有表格宽度；
o 定义一个列的水平对其方式。 Numeric values is better to align right;
o 使用setSkin方法设置皮肤；
o 最好使用这些设置通过init方法初始化grid。更多的参数之后再讨论。目前，doInitGrid方法如下：

?View Code JAVASCRIPT
1
2
3
4
5
6
7

mygrid = new dhtmlXGridObject('mygrid_container');
mygrid.setImagePath("codebase/imgs/"); //指定图片路径
mygrid.setHeader("Model,Qty,Price"); //设置表头显示
grid.setInitWidths("*,150,150"); //设置列的初始宽度
grid.setColAlign("left,right,right"); //设置列的水平对其方式
mygrid.setSkin("light"); //设置皮肤
grid.init(); //显示调用初始化方法，必须的

现在需要做的是运行该方法，可以将该方法加入body的onload方法里或是使用jquery的方法。下面使用body的onload方法：

?View Code HTML
1

<body onload="doInitGrid();"></body>

这样在该页面初始化之后会显示如下：

说明：除了调用set方法之外，还可以如下风格定义：

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

mygrid = new dhtmlXGridObject({
		parent:"a_grid",
		image_path:"codebase/imgs",
		columns:[
			{ label: "Sales",           width:50, 	type:"ed" },
			{ label:["Book title",
				 "#text_filter"],   width:150, 	type:"ed" },
			{ label:["Author",
				 "#select_filter"], width:150, 	type:"ed" },
			{ label: "Price",       width:50, 	type:"ed" },
			{ label:"In store" , 	width:80, 	type:"ch" },
			{ label:"Shipping" , 	width:50, 	type:"ed" },
			{ label:"Bestseller" , 	width:50, 	type:"ed" },
			{ label:"Date" , 	width:50, 	type:"ed" }
		],
 
		xml:"data.xml"
	});

Step 3 – 填充数据

你已经知道了dhtmlxGrid可以加载xml或cvs或json数据，这里主要演示dhtmlxGrid加载json数据。
在上面的例子中每行有三列，故我们的json数据如下：

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
rows:[
{
        id: "a",
        data: [Model 1, 100, 399]
},
{
id: "b",
        data: [Model 2, 50, 649]
},
{
    id: "c",
       data: [ Model 3, 70, 499]
}
]
}

将上面存于data.json文件，然后在doInitGrid方法里调用以下方法：

?View Code JAVASCRIPT
1

mygrid.load ("data.json"，,"json");

这时候页面展示如下：

Step 4 – 客户端排序

为了能够实习表格的客户端排序，必须调用grid的setColSorting（sortTypesStr）方法。sortTypesStr是一个类型列表，以逗号分隔。该类型值有以下四种：
o str – 作为字符串排序
o int – 以Integer值排序 (通常可以是任何数字);
o date – 以日期排序
o custom sorting –自定义的更加复杂的排序方式(for example to sort days of week).

接下来我们对上面的例子进行排序。上例中每行有三列，第一列为字符串，后两列为数字，故可以调用以下方法进行排序。注意，该方法应该在init方法之前执行。

?View Code JAVASCRIPT
1

mygrid.setColSorting("str,int,int");

这时候单击最后一列表头，结果如下：

Step 5 – 单元格格式化和编辑

Grid中使用单元格的编辑器（或是eXcells – 继承自 Cells, Cell 或 Columns types）来定义值的格式和编辑方式。你可以根据你的需要创建eXcells。

设定单元格的类型非常容易，其可以用一行代码定义。这里有一些常见的编辑器，如简单的编辑器代码为“ed”，多行编辑“txt”，只读单元格“ro”，复选框“ch”，价格的格式化“price”。
默认情况下所有的列是“ro”，也可以使用以下方法类设置编辑类型：

?View Code JAVASCRIPT
1

mygrid.setColTypes("ed,ed,price");

Excells格式化有以下几种：

 link：超链接
 img：图片
 price：价格
 dyn：动态行

Excell 复杂编辑器有以下几种：

 cp：colorpicker
 calck：允许调用grid.setNumberFormat的计算器
 dhxCalendar：日历，日期格式可以通过grid.setDateFormat设置
 dhxCalendarA：日历，日期格式可以通过grid.setDateFormat设置，单元格可以编辑
 calendar：YUI Calendar
 clist：多选组件

使用其他组件作为单元格编辑器

 grid：使用dhtmlxgrid
 stree ：使用dhtmlxtree
 context：使用dhtmlxmenu
 combo：使用dhtmlxCombo

Excells特别用途

sub_row：允许单元格作为一个可展开的子单元格，就想查看明细一样。
两个扩展
o sub_row_ajax – 单元格数据被认为是ajax请求的url
o sub_row_grid – 允许创建一个子表作为一个子行的内容

现在你可以双击或是F2进入编辑模式，你可以用tab键在单元格之间导航。

Step 6 – 行操作方法

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9

    function addRow(){
        var newId = (new Date()).valueOf()
        mygrid.addRow(newId,"",mygrid.getRowsNum())
        mygrid.selectRow(mygrid.getRowIndex(newId),false,false,true);
    }
    function removeRow(){
        var selId = mygrid.getSelectedId()
        mygrid.deleteRow(selId);
    }

代码中addRow() 方法的一些说明：

o 创建一个惟一值 (number of millisecond since 1970) 来作为row的标识；
o 在最后一行后面添加一新行，该行有新的id，值为空；
o 选中最近创建的行 (by index), 不掉用 On-Select事件，不掉用选中行之前事件并且聚焦到选中行(如果垂直滚动条存在，则滚动对应位置)。

代码中removeRow() 的一些说明（一行行的）:

o 得到选中行id；
o 删除指定行id的行

Step 7 – 事件

添加事件调用attachEvent 方法，如下行选中事件：

?View Code JAVASCRIPT
1
2
3
4

    function doOnRowSelected(rowID,celInd){
        alert("Selected row ID is "+rowID+"\nUser clicked cell with index "+celInd);
    }
    mygrid.attachEvent("onRowSelect",doOnRowSelected);

Step 8 – Code

最后的代码：

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

 <title>dhtmlxGrid Sample Page</title>
     <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid.css"/>
     <script src="codebase/dhtmlxcommon.js"></script>
     <script src="codebase/dhtmlxgrid.js"></script>
     <script src="codebase/dhtmlxgridcell.js"></script>
 
     <script>
      var mygrid;
      function doInitGrid(){
       mygrid = new dhtmlXGridObject('mygrid_container');
       mygrid.setImagePath("codebase/imgs/");
       mygrid.setHeader("Model,Qty,Price");
       mygrid.setInitWidths("*,150,150");
       mygrid.setColAlign("left,right,right")
       mygrid.setSkin("light");
       mygrid.setColSorting("str,int,int");
       mygrid.setColTypes("ed,ed,price");
       mygrid.attachEvent("onRowSelect",doOnRowSelected);
       mygrid.init();
       mygrid.load ("data.json","json");
      }
 
      function addRow(){
       var newId = (new Date()).valueOf()
       mygrid.addRow(newId,"",mygrid.getRowsNum())
       mygrid.selectRow(mygrid.getRowIndex(newId),false,false,true);
      }
      function removeRow(){
       var selId = mygrid.getSelectedId()
       mygrid.deleteRow(selId);
      }
 
      function doOnRowSelected(rowID,celInd){
       alert("Selected row ID is "+rowID+"\nUser clicked cell with index "+celInd);
      }
 
     </script>
 
     <body onload="doInitGrid()">
      <div id="mygrid_container" style="width:600px;height:150px;"></div>
     </body>
您可能也喜欢：

使用kettle数据迁移添加主键和索引
渐行渐远
在eclipse中构建Pentaho BI Server工程
房奴生活
Mondrian and OLAP
无觅
By the time your rss reader get this post here is 2 comments ,Welcome you come to leave your opinion !]]> http://www.javachen.com/2011/07/dhtmlxgrid-quick-start-guide/feed/ 2