dhtmlxGrid实例.docx

dhtmlxGrid实例摘要dhtmlxGrid启用Ajax的JavaScript网格控制与尖端功能，强大的数据绑定，并与大型数据集的出色表现。组件是易于使用，并提供了极大的灵活性，由于其丰富的客户端 API 。dhtmlxGrid支持不同的数据源（XML，JSON，CSV，JavaScript数组，和HTML表格），也可以从自定义的XML格式加载。一、文件列表及功能简介/usersgrid.htmldhtmlXGrid数据显示及修改示例getval.html对第1列修改时弹出的页面/jsdhtmlXCommon.jsdhtmlXGrid基本js文件（必需）dhtmlXGrid.jsdhtmlXGridObject对象的定义（必需）dhtmlXGridCell.js单元格操作定义（必需）dhtmlXGrid_excell_link.js对link（超链接）列类型的支持（可按需载入）dhtmlXGrid_excell_calendar.js对calendar列类型的支持（可按需载入）calendar\对calendar列类型的支持（与dhtmlXGrid_excell_calendar.js协同工作，同时载入）stylesdhtmlXGrid.css样式表imagesblanc.gif表格显示所需空白图片blank.gif表格显示所需空白图片item_chk0.gif复选框未选中item_chk0_dis.gif复选框被禁用item_chk1.gif复选框选中item_chk1_dis.gif复选框选中时被禁用sort_asc.gif正序排序sort_desc.gif逆序排序二、实例(部分代码)a.页面数据加载(必需导入的文件)link href=styles/dhtmlXGrid.css rel=stylesheet type=text/cssscript src=js/dhtmlXCommon.js type=text/javascript/scriptscript src=js/dhtmlXGrid.js type=text/javascript/scriptscript src=js/dhtmlXGridCell.js type=text/javascript/scriptscript src=js/dhtmlXGrid_excell_link.js/script!--对列“link”属性的支持--script_css_prefix=styles/; _js_prefix=js/; /script!--对列“calendar”属性的支持--scriptsrc=js/dhtmlXGrid_excell_calendar.js/script!--对列“calendar”属性的支持—b.基本信息设定代码script// 需修改部分1开始// 设置获取初始数据的urlvarloadDataURL = ./usersgrid.action?req.type=getUsers;// 设置用于处理添加、删除、修改数据的url。类型会以req.type参数给出varactionURL = ./usersgrid.action;varmandFields = [1,1]; //设置必填列，1－必填vardefaultValue=,,1,不能操作; //设置添加新行时的默认值，列与列之间以“,”分隔，空值直接留空，单选、复选选中状态为1// 需修改部分1结束varmygrid;……c.表格初始化页面加载完毕时，由body onload=doOnLoad()指定执行doOnLoad函数，初始化gird对象，并获取第一页的值。// 初始化grid，此方法由body标签的onload事件调用functiondoOnLoad(){mygrid = new dhtmlXGridObject(gridbox);mygrid.setImagePath(images/); // 需修改部分2开始// 设置列属性mygrid.setHeader(用户名,密码,复选,操作,日历);mygrid.setColTypes(ed,ed,ch,link,calendar);mygrid.setColSorting(str,str,,,date);mygrid.setInitWidths(150,150,50,150,80);//设置初始列宽mygrid.setColAlign(center,center,center,left,center);//设置对齐方式mygrid.setColumnColor(#f7f6f0,#ffffff,#ffffff,#ffffff);//设置列的背景色// 需修改部分2结束// 基本不再需要修改别的部分。剩下需要注意的问题是现在本页面