存档

‘Dhtmlx’ 分类的存档

dhtmlxGrid内容实时动态修改

2013年4月27日 没有评论

实现的功能

功能:实现grid内容实时动态的修改

用到的技术

1、Dataprocessor和Grid结合
2、Dataprocessor主要API
enableDataNames(true) 这个参数设为true是和Grid的setColumnIds()结合使用的.
setUpdateMode(“off”) 该处设置手动更改数据
setUpdated(row,true) 第二个参数为true则更新选定行的数据,否则为false,不更新数据
sendData() 发送数据到服务器
3、Grid的主要API
事件:
onEditCell(stage,row,cell,newValue,oldValue)
Stage有3个状态,0为编辑前,1为编辑中,2为编辑后
修改数据的实现写在2状态中
服务器响应:
通过dataprocessor的对象绑定onAfterUpdate事件后可以在jsp
页面编写回调函数提示数据修改成功

dp.attachEvent("onAfterUpdate", some_function);
function  some_function(…..){
//代码
}

注意 响应xml的编写格式

<data>
	<action type="my_error" sid="id" tid="id">
		Details
	</action>
</data>
//回调函数参数列表
onAfterUpdate - occurs for each action tag in xml response
-sid 
-action
-tid
-xml node object

阅读全文…

dhtmlxGrid表格随填随存回调方式

2013年4月27日 没有评论

基本方法

做表格随填随存时,如果需要传递参数,使用如下方法:

upFinancePropertyConfig=new dataProcessor("
		financePropertyConfigAction!setFinancePropertyConfig.action?
		budgetItemId="+ rowId + "&colIndex="+ colIndex + "
			&value="+ newValue );

方式发送请求可能会存在参数传递不正确问题,这时使用如下方法:

upFinancePropertyConfig = new PanelUpdater(
		bgObj,
		 "divNULL",
		"financePropertyConfigAction!setFinancePropertyConfig.action?
		budgetItemId="+ rowId
		+ "&colIndex="+ colIndex
		+ "&value="+ newValue
		);

以上方式发送请求,则后台可以正确接收请求。

阅读全文…

dhtmlxGrid中实现分页查询

2013年4月25日 没有评论

注:将Tomcat 5.0下的conf/server.xml中的URIEncoding 设置成UTF-8可以解决中文问题

导入文件

<link rel="STYLESHEET" type="text/css"
	href="../../codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css"
	href="../../codebase/ext/dhtmlxgrid_pgn_bricks.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxgrid.js"></script>
<script src="../../codebase/ext/dhtmlxgrid_pgn.js"></script>
<script src="../../codebase/dhtmlxgridcell.js"></script>

jsp页中的相关设置

//两个input域 和一个button按钮用于模糊查询

<div>
	Name
	<br>
	<input type="text" id="search_name">
</div>
<div>
	Chname
	<br>
	<input type="text" id="search_chname">
	<button onclick=
	reloadGrid();
id="submitButton"
		style="margin-left: 30px;">
		Search
	</button>
</div>
<div id="gridbox"
	style="width: 100%; height: 200px;
	margin-top: 20px; margin-bottom: 10px;">
</div>
<div>
	<span id="pagingArea"></span>
</div>

阅读全文…

dhtmlx TreeGrid分步请求加载的实现方法

2013年4月23日 没有评论

分析问题

在页面显示效果如:
dhtmlx TreeGrid分步请求
在treegrid中实现点击北京市只加载北京市的子节点,也就是说在页面只显示如上图所示的,而海淀区、西城区、东城区等下面的节点不能在点击北京市时也加载出来。只有当点击海淀区、西城区等时,对应的子节点才加载。

解决方案

分步请求加载内容:将批量内容的加载,分成若干个步加载。

优点

缓解数据库的压力,更有效、更快地将有关内容加载到页面。

阅读全文…

Dhtmlx TreeGrid关键词定位功能实现

2013年4月17日 没有评论

引入JS文件

<link rel="STYLESHEET" type="text/css" 
	href="../dhtmlxGrid/codebase/dhtmlxgrid.css">
<script src="../dhtmlxGrid/codebase/dhtmlxcommon.js"/>
<script src="../dhtmlxGrid/codebase/dhtmlxgrid.js"/>
<script src="../dhtmlxGrid/codebase/dhtmlxgridcell.js"/>
<script src="../dhtmlxTreeGrid/codebase/dhtmlxtreegrid.js"/>
<script src="../dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"/>
<script src="../dhtmlxTreeGrid/codebase/ext/dhtmlxtreegrid_filter.js"/>

执行初始化方法

<div id="gridbox" width="100%" height="250px"
	style="background-color: white; overflow: hidden">
</div>
<script>
	//将treeGrid放入id为’gridbox’的div中
	mygrid=newdhtmlXGridObject('gridbox');
	//引入图片
	mygrid.setImagePath("../dhtmlxGrid/codebase/imgs/icons_books/");
	//设置表头		
	mygrid.setHeader("Search, Text Filter, Select Filter");
	//设置检索类型(有文本框查找,文本框过滤,下拉列表过滤)
	mygrid.attachHeader("#text_search,#text_filter,#select_filter");
	//设置单元格的大小
	mygrid.setInitWidths("200,100,*");
	//数据的对齐方式
	mygrid.setColAlign("left,right,right");
	//设置每列的数据类型
	mygrid.setColTypes("tree,price,ed");
	//排序方式(有字符排序,数字排序,Date排序等)
	mygrid.setColSorting("str,int,int");
	//初始化
	mygrid.init();
	// loadXML()方法在XMl或Action中得到XML类型的数据
	mygrid.loadXML("treegrid_sample.xml");
</script>

阅读全文…

Dhtmlx TreeGrid中文帮助文档

2013年4月17日 没有评论

简单TreeGrid的实现

1、导入关键文件

<link rel="STYLESHEET" type="text/css" 
	href="../dhtmlxGrid/codebase/dhtmlxgrid.css"/>
<script src="../dhtmlxGrid/codebase/dhtmlxcommon.js"/>
<script src="../dhtmlxGrid/codebase/dhtmlxgrid.js"/>
<script src="../dhtmlxGrid/codebase/dhtmlxgridcell.js"/>
<script src="../dhtmlxTreeGrid/codebase/dhtmlxtreegrid.js"/>

2、初始化

<div id="gridbox" width="100%" height="250px" style="overflow:hidden"/>
<script>
	mygrid = new dhtmlXGridObject('gridbox'); 
//xml文件中图片的路径
	mygrid.setImagePath("<%=url%>Grid/codebase/imgs/icons_books/";
	mygrid.setHeader("Tree,Plain Text,Long Text,Color,Checkbox"); 
//列类型(要显示为树行结构第一列必值须为tree,ed为可编辑,txt为文本框…)
	mygrid.setColTypes("tree,ed,txt,ch,ch");
	mygrid.init(); 
	mygrid.loadXML("test_list_1.xml");
</script>

3、基本XML结构(基本机构就是使用row的嵌套达到树形效果)

<?xml version="1.0" encoding="UTF-8"?>
<rows>
	<row id="h1">
		<cell image="folder.gif">Honda</cell>
		<cell>...</cell>
		<cell>...</cell>
		 <row id=“c1”>
			<cell image="folder.gif">Honda</cell>
			<cell>...</cell>
			<cell>...</cell>
		<row>
	</row>
</rows>

阅读全文…

dhtmlxVault中文学习资料

2013年4月14日 没有评论

Initialize object on page

<div id="vaultDiv"></div>
vault = new dhtmlXVaultObject();
vault.setImagePath("codebase/imgs/");
vault.setServerHandlers("UploadHandler.php", "GetInfoHandler.php",
		"GetIdHandler.php");
vault.setFilesLimit(1);// 控制文件的上传数量:0不限制,1只能是一个
// 检测文件的上传类型
vault.onAddFile = function(fileName) {
	var ext = this.getFileExtension(fileName);
	if (ext != "txt" && ext != "doc") {
		alert("You may upload only text documents "
				+ "(txt, doc). Please retry.");
		return false;
	} else {
		return true;
	}
};

//Use onUploadComplete event handler to update your DhtmlX controls or check the upload status.
回调函数(对所有上传文件的处理)

阅读全文…

dhtmlx dataProcessor中文帮助文档

2013年4月11日 没有评论

简要说明

dhtmlxDataProcessor是用来为dhtmlxGrid/TreeGrid/Tree组件添加进度。从服务器端加载数据,用户进行增,删,改,服务器验证输入数据正确与否的操作的过程中显示进度。进度条有两个部分组成,一客户端代码主要是一些用例,服务器端代码主要用来根据客户端的请求进行相应的业务逻辑。

导入css,js等资源文件

<script type="text/javascript" 
    src="../dhtmlxGrid/codebase/dhtmlxcommon.js"/>
<script type="text/javascript" 
    src="../dhtmlxDataProcessor/codebase/dhtmlxdataprocessor.js"/>
<script type="text/javascript" 
    src="../dhtmlxDataProcessor/codebase/dhtmlxdataprocessor_debug.js"/>

阅读全文…

dhtmlx技术使用总结与介绍中文手册

2012年8月20日 没有评论

界面的主要元素概述

DHTMLX是一套完整的具有客户端程序效果的界面组件,解决了常见的客户端操作要求。这套组件采用javascript、xml定义组件性征,某些组件甚至可以直接渲染HTML元素。
常见的容器元素包括:布局(layout)、滑动窗口(accordion)、页签(tab)、窗口(window);
常见的数据元素包括:表格(grid)、树(tree)、选择框(combo)、日历(calendar);
常见的窗体元素包括:右键菜单(menu)、工具条(toolbar)。

阅读全文…

dhtmlXTree中文API帮助文档-常用方法

2012年8月18日 没有评论

下面一些dhtmlxtree常用的方法,大体下列举了一下,供大家参考之用

构造函数    
dhtmlXTreeObject(htmlObject, width, height, rootId)
	//rootId 虚拟根节点,在界面上不会显示,一般取值0   
enableIEImageFix(mode)    
  
析构函数    
destructor()    
  
实现继承    
clone()    

阅读全文…