我们可以使用dhtmlxgrid插件将数据通过列表显示出来,有如下优点:
1、可以美化列表(css样式和图片全部帮我们实现了),不需要使用美工
2、可以做排序功能,不需要我们而外开发,省时省力
3、还可以帮我们提供"分页功能",可以为我们提供一个统一的模板
4、提供了丰富的事件功能
强调:从dhtmlx官网上面下载的代码分为两种:普通版和专业版(收费),我们很多功能实际上是需要专业版(收费)的,比如说分页功能,包括后面对某一列隐藏的功能等等。
Easy skinable designmygrid = 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");
备注:尽量要保证对每一列的属性说明要全部一一对应起来,比如样式、排序、类型等,有多少项就配置多少项,以防错位或者解析不正确。