您的位置：首页 > Web前端 > JavaScript

dhtmlxgrid 使用json数据入门

2013-12-04 10:28 246 查看

我们可以使用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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

dhtmlxgrid 使用json数据 入门

dhtmlxgrid 使用json数据入门