DhtmlxGrid Quick Start Guide

说明:

本文来源于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 – 引入文件

< 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>
    //we'll write script commands here
< /script>

Step 2 – 放置gird

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

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

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

 var mygrid;
 function doInitGrid(){
 }

doInitGrid方法会包括以下代码:

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

目前,doInitGrid方法如下:

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方法:

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

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

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

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数据如下:

{
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方法里调用以下方法:

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

这时候页面展示如下:

Step 4 – 客户端排序

为了能够实习表格的客户端排序,必须调用grid的setColSorting(sortTypesStr)方法。sortTypesStr是一个类型列表,以逗号分隔。

该类型值有以下四种:

  • str – 作为字符串排序
  • int - 以Integer值排序 (通常可以是任何数字);
  • date – 以日期排序
  • custom sorting –自定义的更加复杂的排序方式(for example to sort days of week).

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

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

这时候单击最后一列表头,结果如下:

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

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

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

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:允许单元格作为一个可展开的子单元格,就想查看明细一样。

两个扩展:

  • sub_row_ajax – 单元格数据被认为是ajax请求的url
  • sub_row_grid – 允许创建一个子表作为一个子行的内容

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

Step 6 – 行操作方法

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() 方法的一些说明: * 创建一个惟一值 (number of millisecond since 1970) 来作为row的标识; * 在最后一行后面添加一新行,该行有新的id,值为空; * 选中最近创建的行 (by index), 不掉用 On-Select事件,不掉用选中行之前事件并且聚焦到选中行(如果垂直滚动条存在,则滚动对应位置)。

代码中removeRow() 的一些说明(一行行的): * 得到选中行id; * 删除指定行id的行

Step 7 – 事件

添加事件调用attachEvent 方法,如下行选中事件:

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

Step 8 – Code

最后的代码:

< 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>
时间: 2024-09-13 13:54:18

DhtmlxGrid Quick Start Guide的相关文章

AVEVA .NET Quick Start Guide

AVEVA .NET Quick Start Guide AVEVA .NET快速入门引导 eryar@163.com 一.概述 Introduction AVEVA提供.Net的二次开发接口,可使有C#编程经验的软件工程师使用Visual Studio来对AVEVA的工厂(Plant)设计和船舶(Marine)设计产品进行二次开发.使用.NET不仅可以对原来的PDMS进行二次开发,还可以对整合后的AVEVA Marine中的Hull Design.Hull Drafting等原来属于Tribo

即将发布《AVEVA .NET Quick Start Guide》

    将在2012.11.11发布<AVEVA .NET Quick Start Guide>.使用C#来对AVEVA二次开发,功能强大,效率高.

AVEVA PML Quick Start Guide

AVEVA PML Quick Start GuideAVEVA PML 快速入门引导 eryar@163.com 一.引言 近来网上有些朋友通过Email和QQ联系到我,和我聊他们公司中AVEVA Marine/Plant(PDMS)的使用情况和有关二次开发的问题.有的公司也许是由于船东或业主的要求不得已才用,也只是建模型,做碰撞检查之用,没有充分发挥AVEVA软件的作用,没有理解生产工具这个概念,没有使之转化为生产力,提高生产效率.觉得很好玩,从政治书中摘出以下内容: 生产力与生产关系矛盾运

oVirt quick start guide

1. 规划网络和存储 管理网络 存储网络 fence网络 虚拟机网络 存储(可选nfs, fc, iscsi, glusterfs), 推荐使用glusterfs. 2. 设计存储HA glusterfs挂载地址, HA. 会话同步. 3. 部署引擎和报告节点 4. 部署计算节点 5. 管理存储域 6. 创建虚拟机 7. 管理虚拟机 [参考] 1. 引擎和报告的安装 http://blog.163.com/digoal@126/blog/static/1638770402014628114756

Microsoft Deployment Toolkit 2010之快速部署Windows

最近MS出的东西可真多.什么都是2010了..哈哈.. MDT2008,以前本菜菜给大家介绍过,如何去部署Winxp,不过只是肤浅的.MDT2010 Beta也出来了- 跟我继续去瞧瞧- 写了些,没什么技术含量的东西.高手,还是别笑话了.. Quick Start Guide for Lite Touch Installation 我比较懒,省略了很多--嘿嘿! 环境很简单.1台win2008:dc+dhcp+dns+mdt2010+waik 看图操作就OK!! MDT2010新增加些什么呢?

Asynchronous JavaScript and XML (AJAX) 的初步认识

ajax|javascript|xml 下载Ajax.dll  http://ajax.schwarz-interactive.de/csharpsample/default.aspx  第一个范例建议参考其QuickGuide,感觉不错再这里引用一下AJAX .Net Wrapper quick usage guideKarl Seguin - http://www.openmymind.net/ - copyright 2005 (view AjaxGuide.doc for more de

Ajax之ASP.NET初级练习

ajax|asp.net Ajax不能不说是一种很好的技术.刚下了一个Ajax.Net,来试试.  从http://ajax.net/下载一个压缩包,解开过后有一个txt的quick usage guide和一个DOC的AJAX .Net Wrapper usage guide以及一个DLL.  嗯,看看TXT的先.了解到AJAX开发的大概步骤:  一.项目中建立一个引用,把ajax.dll引用进来.  二.修改web.config文件,加入  <httpHandlers>          

前端设计开发人员的免费电子书分享

文章描述:向前端设计和开发人员推荐10本优秀的免费电子书. 今天收集了10本优秀的免费电子书分享设计人员.电子书代表人们所阅读的数字化出版物, 从而区别于以纸张为载体的传统出版物, 电子书是利用计算机技术将一定的文字.图片.声音.影像等信息.电纸书相比传统的纸质书更加便于携带和查阅. Introduction to Good Usability How To Be Creative Why design? The Design Funnel: A Manifesto for Meaningful

用Pear加速PHP程序开发

程序 及时交付应用程序是确定解决方案采用何种技术的关键所在,PHP借助于PEAR(PHP Extension and Application Repository:PHP扩展与应用库)会大大促进其开发过程.PEAR是一种代码库,它为标准程序功能提供预先编写的类,从而大大降低了应用程序的开发时间.PEAR在概念上类同于Perl的CPAN,PEAR包含了具有丰富特性的功能函数,包括数据库.邮件和错误处理等.在采用PEAR的情况下,开发人员就可以部署和增强已经编写的基本函数同时把注意力集中到编写程序新