dhtmlxgrid 使用json数据 入门

原创 2013年12月04日 10:28:10

我们可以使用dhtmlxgrid插件将数据通过列表显示出来,有如下优点:

1、可以美化列表(css样式和图片全部帮我们实现了),不需要使用美工

2、可以做排序功能,不需要我们而外开发,省时省力

3、还可以帮我们提供"分页功能",可以为我们提供一个统一的模板

4、提供了丰富的事件功能

 

强调从dhtmlx官网上面下载的代码分为两种:普通版和专业版(收费),我们很多功能实际上是需要专业版(收费)的,比如说分页功能,包括后面对某一列隐藏的功能等等。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Easy skinable design</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="title" content="Samples" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/dhtmlxgrid.css">
	<!-- 标题栏会显示图片,这样更美观 ,具体使用哪个CSS样式根据后面使用mygrid.setSkin("dhx_skyblue");方法决定-->
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/skins/dhtmlxgrid_dhx_skyblue.css">
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/skins/dhtmlxgrid_dhx_black.css">
	<script src="dhtmlxgrid/dhtmlxcommon.js"></script>
	<script src="dhtmlxgrid/dhtmlxgrid.js"></script>
	<script src="dhtmlxgrid/dhtmlxgridcell.js"></script>
	<!-- 如果需要给某列数据添加链接,则需要引入这个js -->
	<script src="dhtmlxgrid/dhtmlxgrid_excell_link.js"></script>
	<div id="gridbox" style="width:503px;height:120px;background-color:white;"></div>
		<script>
		mygrid = new dhtmlXGridObject('gridbox');
		mygrid.setImagePath("dhtmlxgrid/imgs/");
		//标题显示内容
		mygrid.setHeader("Name,Date of Birth, First Book Published");
		//指明列的宽度,*表示是余下的宽度显示
		mygrid.setInitWidths("*,100,100");
		//表示内容排序位置,分别是左、中、中
		mygrid.setColAlign("left,center,center");
		
		/*
			ch ---- checkbox
			ra ---- radio
			ro ---- readonly,双击具体某项数据时不可编辑的
			txt ---- 显示的是字符串,双击某项数据会弹出编辑页面
		*/
		mygrid.setColTypes("ro,link,txt");
		//mygrid.setColTypes("ed,dhxCalendar,dhxCalendarA");
		
		//按照什么方式排序int,str,date 三个类型
		mygrid.setColSorting("str,str,date");
		
		//指明使用什么皮肤(天蓝色),这个和前面引用是CSS对应起来
		mygrid.setSkin("dhx_skyblue");
		//mygrid.setSkin("dhx_black");
		
		//初始化数据
		mygrid.init();
		//mygrid.loadXML("../common/grid_dates.xml");
		
		//备注:数据列一定要和标题栏对应起来,否则会显示前面的数据
		 var js={
				    rows:[
				        { id:1001,
				     data:[
				          "100",
				          //^后面显示的是链接地址,一定要指明这列数据类型是link,可以利用这个来修改具体数据项
				          "A Time to Kill^http://www.baidu.com",
				          "05/01/1998"] },
				       { id:1002,
				     data:[
				          "1000",
				          "Blood and Smoke",
				          "01/01/2000"] }
				    ]};
		
		 //指明导入数据的回调函数
		 mygrid.parse(js,function(){
			 //alert(1);
		 },"json");
			
	</script>
</body>
</html>

 

备注:尽量要保证对每一列的属性说明要全部一一对应起来,比如样式、排序、类型等,有多少项就配置多少项,以防错位或者解析不正确。

dhtmlx使用翻译(二) dhtmlxgrid 配置部分

1.1.1                      detachHeader(index)版本:大众版参数:index 表头索引用途:删除grid的某个表头,与attachHeader配对使用参考...
  • warison2008
  • warison2008
  • 2010年06月21日 20:38
  • 4440

dhtmlx使用翻译(五)dhtmlxgrid 列操作

 1.1.90 adjustColumnSize(cind)版本:大众版参数:cind:列索引用途:调整某列宽,使列所有数据可见,但需要在制定列宽的情况下,即不能设定列宽为 *参考实例:mygrid....
  • warison2008
  • warison2008
  • 2010年06月24日 22:18
  • 4241

dhtmlx使用翻译(六)dhtmlxgrid 单元格操作

 1.1.116cellById (row_id, col)版本:大众版 参数:row_id: rowIdcol:列索引用途:获得单元格对象,无参数时返回当前选中cell对象参考实例: var cel...
  • warison2008
  • warison2008
  • 2010年06月26日 17:04
  • 4533

dhtmlxgrid 控件使用

dhtmlxgrid 主要是一个开源的表格控件,它有标准版和专业版本,标准版只提供一些基础功能,而专业版提供了一些复杂的扩展功能,包括表格分割等等,它现在最新版本为3.5,下载地址为:http://w...
  • yang6
  • yang6
  • 2013年01月21日 16:43
  • 1101

dhtmlxGrid分页查询,条件查询实例

使用jquery的ajax get将页面条件请求到后台,取得数据库数据,分页查询,返回前台grid中。 引入所需文件: window.dhx_globalImgPath = "dhtmlx...
  • cai7095576
  • cai7095576
  • 2013年10月28日 23:04
  • 3087

DHTMLX做一个Grid列表显示数据

准备数据data.xml Grid的数据从这里读取 380 90 100 90 ...
  • HowCanYouDoIt
  • HowCanYouDoIt
  • 2016年09月05日 23:31
  • 1614

DHTMLX中对dhtmlxgrid表格行的置顶置底功能,以及拖动排序功能的实现

大家好,这半年工作上有点小忙,好久没写博了。        今天,要给大家分享的是JS框架DHTMLX中的表格控件dhtmlxgrid的一组功能的实现,这些功能在高级版(付费版)中已经有相关的接...
  • bingleiyuren
  • bingleiyuren
  • 2012年04月02日 18:31
  • 2257

DHTMLX 表格组件(dhtmlxGrid )使用介绍

String sql = select {s.*} from t_student s where s.age22; SQLQuery slqQuery = session.createSQLQuery...
  • herb777
  • herb777
  • 2012年03月01日 10:28
  • 7621

dhtmlxgrid所支持的列类型

ro 只读 ed 少量文本,双击原位编辑 txt 大量文本,双击弹出一个文本区域进行编辑 ch 复选框,选中值为1,未选值为0 ra  单选框,一列中只能有一个被选中,选中值为1 coro 下拉列表,...
  • polisman
  • polisman
  • 2010年08月05日 15:46
  • 1266

dhtmlxGrid初始化加载,jquery请求加载数据

使用jquery的ajax请求到后台,取得数据库数据,返回前台grid中。 引入使用jquery需使用的js文件 引入使用dhtmlxCombo需使用的文件 ...
  • cai7095576
  • cai7095576
  • 2013年10月28日 22:12
  • 2623
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dhtmlxgrid 使用json数据 入门
举报原因:
原因补充:

(最多只允许输入30个字)