存档: ‘JavaScript’ 分类

Export DhtmlxGrid to PDF in Java

1条评论 2011年8月11日

将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页面,效果如下:

继续阅读…

JavaScript模态窗口和非模态窗口

没有评论 2011年8月7日

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来取得传递进来的参数。
继续阅读…

自定义dhtmlxGrid表头菜单

1条评论 2011年7月31日

dhtmlxGrid可以定义表头菜单以及表格右键菜单,表格右键菜单可以自定义,但是表头菜单只能使用其提供的菜单。dhtmlxGrid默认的表头菜单可以决定表格中每一列是否在表格中显示,并没有提供更多的扩展,如果我想自定义表头菜单,该怎么做呢?本文就是基于自定义表格菜单,说说我的实现方式。
以下是dhtmlxGrid的表头菜单效果:

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

如果能够像表格菜单一样自定义表头菜单,那会是一件非常有意义的事情,因为dhtmlxGrid菜单都是一些针对行和单元格的操作,没有提过针对列的操作,比如我可能需要在某一列上实现该列的显示与隐藏、排序、改变列属性以及在该列右边添加一新的列,等等。
如何实现表头菜单的自定义呢?可不可将表格右键菜单移到表头上去呢? 继续阅读…

Drag an item to dhtmlxGrid and add a column

没有评论 2011年7月24日

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

继续阅读…

DhtmlxGrid Quick Start Guide

没有评论 2011年7月19日

说明:本文来源于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)
  • 服务器端排序
  • 广泛的事件处理

继续阅读…

prototype.js 源码之扩展Object

没有评论 2010年9月7日

Object是其他对象实例的构造函数(var a=new Object()),也是所有其他类的父类,对Object直接扩展(注意不是扩展Object.prototype,扩展 Object.prototype相当于添加实例方法)相当于为Object类添加静态方法。
继续阅读…