dhtmlxgrid导出的js_dhtmlxgrid 使用json数据 入门

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

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

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

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

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

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

Easy skinable design

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");

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