dhtmlXGrid表格显示控件简介
dhtmlxGrid 功能简介 优美的表格化数据显示，用户可用鼠标拖动方便地改变 各列的宽度 支持客户端表格排序，只需单击要排序列的表头。并且 支持设置列的数据类型（数字、字符串、日期），按类 型排序 页面所有数据操作全部采用Ajax技术后台处理，整个页面 只会加载一次，所有操作均仅更新页面相应区域，页面 不会整体刷新。 支持原位编辑，双击要编辑的单元格即可进入编辑模式， 编辑完成，按回车自动后台提交。并可在提交前设置客 户端数据验证。 可以动态添加新行、删除选中行。 日期格式提供日历可供选择 支持分页。
示例页面实现的功能 从后台Oracle数据库中读取users表，分页显示在 客户端，并且实现了对这张表的增、删、改操作。 显示时附加了“复选”、“操作”和“日历”三 列，输出固定的“1”、“点击执行页面dd函数 ^javascript:dd();”、“5/3/2007”三列，用于演示如 何在页面使用复选框、超级链接（此处用链接调 用了页面上的dd函数）、日期。 添加、修改时做了数据验证，确保第0列和第1列 的值不为空（此表格列号从0开始）。 对第1列（列号从0开始）的修改会弹出一个标签， 加载getval.html页面，获取用户的值，并传回主页 面。实际开发中此页面中可以用来完成更多的功 能 带分页。切换码面同样不刷新整个页面。
文件列表及功能简介 / usersgrid.html dhtmlXGrid数据显示及修改示例 getval.html 对第1列修改时弹出的页面 /js dhtmlXCommon.js dhtmlXGrid基本js文件（必需） dhtmlXGrid.js dhtmlXGridObject对象的定义（必需） dhtmlXGridCell.js 单元格操作定义（必需） dhtmlXGrid_excell_link.js 对link（超链接）列类型的支持（可按需载入） dhtmlXGrid_excell_calendar.js 对calendar列类型的支持（可按需载入） calendar\ 对calendar列类型的支持（与dhtmlXGrid_excell_calendar.js协同工作，同时载入） styles dhtmlXGrid.css 样式表 images blanc.gif 表格显示所需空白图片 blank.gif item_chk0.gif 复选框未选中 item_chk0_dis.gif 复选框被禁用 item_chk1.gif 复选框选中 item_chk1_dis.gif 复选框选中时被禁用 sort_asc.gif 正序排序` sort_desc.gif 逆序排序
后台加载的实现原理 采用Ajax技术
同步模式 异步模式
XMLHttpRequest Ajax的核心是浏览器提供的 XMLHttpRequest对象。该对象可以在后台 异步实现所有传统的页面form提交、接收 返回值的操作。 本表格控件中的dhtmlXCommon.js已对 XMLHttpRequest进行了良好的封装。因此 使用本控件时基本不需要了解该对象的具 体使用方法。 参考读物：《Ajax基础教程（Foundations of Ajax）》、《Ajax实战（Ajax in Action）》等。
页面数据加载 必需导入的文件： <link href="styles/dhtmlXGrid.css" rel="stylesheet" type="text/css"> <script src="js/dhtmlXCommon.js" type="text/javascript"></script> <script src="js/dhtmlXGrid.js" type="text/javascript"></script> <script src="js/dhtmlXGridCell.js" type="text/javascript"></script> <script src="js/dhtmlXGrid_excell_link.js"></script><!--对列“link”属性的支持--> <script>_css_prefix="styles/"; _js_prefix="js/"; </script><!--对列“calendar”属性的支持--> <script src="js/dhtmlXGrid_excell_calendar.js"></script><!--对列“calendar”属性的支持-->
基本信息设定代码 <script> // 需修改部分1开始 // 设置获取初始数据的url var loadDataURL = "./usersgrid.action?req.type=getUsers"; // 设置用于处理添加、删除、修改数据的url。类型会以req.type参数给出 var actionURL = "./usersgrid.action"; var mandFields = [1,1]; //设置必填列，1－必填 var defaultValue=",,1,不能操作"; //设置添加新行时的默认值，列与列之间以“,”分隔，空值直接留空，单选、复选选中状态为1 // 需修改部分1结束 var mygrid; ……
表格初始化 页面加载完毕时，由<body onload="doOnLoad()">指定执行doOnLoad函数，初始化gird对象，并获取第一页的值。 // 初始化grid，此方法由<body>标签的onload事件调用 function doOnLoad(){ 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结束 // 基本不再需要修改别的部分。剩下需要注意的问题是现在本页面为WebWork框架修改过，参数的名称为req.type、req.id、req.values。这几个值还在sendServerUpdateRequest、deleteRow中出现。如需修改请注意这两处地方 // 设置grid单元格编辑事件的处理函数为doOnCellEdit： mygrid.setOnEditCellHandler(doOnCellEdit) // 加载内容，完成后调用pageLoaded函数 mygrid.loadXML(loadDataURL,pageLoaded); mygrid.init() // 初始化两个工具对象，在列更新和删除时使用 rowUpdater = new dtmlXMLLoaderObject(doUpdateRow,window); rowEraser = new dtmlXMLLoaderObject(doDeleteRow,window); }
setColTypes支持的列类型 ro 只读 ed 少量文本，双击原位编辑 txt 大量文本，双击弹出一个文本区域进行编辑 ch 复选框，选中值为1，未选值为0 ra 单选框，一列中只能有一个被选中，选中值为1 coro 下拉列表，用户只能选择列表中已有的值 co 复合下拉列表，用户可以选择，也可以自行输入 img 图片，只读，值为图片的url link 链接，值的格式为“链接文字^链接地址”，非正常超链接写法。（需加载dhtmlXGrid_excell_link.js文件对其支持） calendar 日期，双击弹出日历。日期格式为MM/DD/YYYY。需加载dhtmlXGrid_excell_calendar.js文件对其支持，且加载此文件前需定义全局变量_css_prefix、_js_prefix如下：<script>_css_prefix="styles/"; _js_prefix="js/"; </script>
setColSorting支持的排序类型 int 整型 str 字符串 date 日期 只有设置了该属性才能启用客户端排序 setColAlign支持的列对齐方式： left 左对齐（默认） center 居中对齐 right 右对齐
loadXML (loadDataURL,pageLoaded)，加载loadDataURL中返回的xml，并在xml返回后调用pageLoaded函数进行处理。 <?xml version="1.0" encoding="UTF-8"?> <rows> <userdata name="pageNum">3</userdata> <userdata name="currPage">1</userdata> <row id="1"> <cell>A Time to Kill</cell> <cell>John Grisham</cell> <cell>12.99</cell> <cell>1</cell> <cell>05/01/1998</cell> </row> …… </rows> userdata表示返回数据中附加的信息，写到rows下为整个表的附加信息，写到row下为该行的附加信息，可通过getUserData方法取得这些信息。此处为整个表的附加信息，返回总页数（pageNum）与当前页码（currPage）。 row的id属性对应于该数据表在数据库中的id，以唯一标识该行。此属性不会被显示，但在更新和删除数据时作为传给服务器的关键参数使用。
分页及页码显示 doOnLoad函数取得第一页数据后，调用pageLoaded函数 function pageLoaded(){//数据加载完成后调用的函数，现用于显示页码 currPage=mygrid.getUserData("","currPage"); document.getElementById("pageInfoDiv").innerHTML="页："+currPage+" / " + mygrid.getUserData("","pageNum"); } 通过mygrid.getUserData("","currPage")获得当前页码（第一个参数为空，表示取得整个表的附加信息。并将页码信息写入pageInfoDiv层的innerHTML属性中。 pageInfoDiv定义在gridbox层之下： <div id="pageInfoDiv"></div><br />
链接“前一页”、“后一页”分别调用prePage与nextPage函数： <a href="javascript:void(0);" onclick="prePage();">前一页</a> <a href="javascript:void(0);" onclick="nextPage();">后一页</a> nextPage函数如下： function nextPage(){//下一页按钮的处理 if(currPage<mygrid.getUserData("","pageNum")){ toPage=Number(currPage)+1; mygrid.clearAll(); mygrid.loadXML(loadDataURL+"&req.page="+toPage,pageLoaded); } 判断当前页码小于总页数，则先清除已经加载的所有行，再加载loadDataURL + "&req.page=" + toPage（req.page表示要加载的页码）。 prePage函数如下： function prePage(){//上一页按钮的处理 if(currPage>1){ toPage=Number(currPage)-1; 判断当前页码，先清除已经加载的所有行，再加载loadDataURL + "&req.page=" + toPage（req.page表示要加载的页码）。
原位编辑 双击属性为非“ro”的单元格便会进入编辑模式，编辑完成按回车即可将编辑的结果发回服务器端。 进入编辑模式时，由doOnLoad函数中的定义： mygrid.setOnEditCellHandler(doOnCellEdit); 会调用doOnCellEdit函数进行处理： //onCellEdit event handler (mark row updated and send update to server) function doOnCellEdit(state, rowId, cellInd) { //just clear timeout and allow editting, when editor is going to be opened if (state == 0){ clearTimeout(timeoutHandler) if(cellInd==1){//增加的语句，处理第1列被编辑时的事件，如有其他列也需自定义处理，可增加类似的if语句块 popupEdit(rowId,cellInd);//调用处理这一列编辑的函数 return false;//取消掉进入编辑的事件，编辑完成后以上需以上函数重新调用doOnCellEdit(2,rowId,cellInd)，以完成将值的改变提交到服务器的操作。 } return true; ………… 对弹出标签页修改数据的支持 省略掉的部分有检测行的数据是否发生改变的代码。如发生改变则调用sendServerUpdateRequest函数将改变通知服务器。
红色代码检测单元格是否为空，如为空将单元格边框设为红色、标志fl设为false，取消提交并提示用户 function sendServerUpdateRequest(rId){ var rowValuesAr = new Array(); var fl = true;//proceed with server request for(var i=0;i<mygrid.getColumnCount();i++){ var val = mygrid.cells(rId,i).getValue(); if(mandFields[i]==true){//if mandatory field is not filled - do not proceed if(val==""){ mygrid.cells(rId,i).cell.style.borderColor = "red"; fl = false; }else{ mygrid.cells(rId,i).cell.style.borderColor = ""; } rowValuesAr[rowValuesAr.length] = val if(!fl) return; if(mygrid.getUserData(rId,"new")=="1"){ var action = "add"; var url = actionURL + "?req.type="+(!action?"update":action) + "&req.id=" + rId + "&req.values=" + encodeURIComponent(rowValuesAr.join("\u0007")); //alert(url); mygrid.setEditable(false); rowUpdater.loadXML(url); unUpdated=false; 红色代码检测单元格是否为空，如为空将单元格边框设为红色、标志fl设为false，取消提交并提示用户
与服务器通信 sendServerUpdateRequest会根据变化的内容生成类似这样的url: usersgrid.action?req.type=update&req.id=3&req.values=单元格1·单元格2·单元格3 req.type表示更改的类型，对已有行的编辑为update req.id为被更改行的id，该id为加载xml时<row id=””>指定。 req.values为被更改行的新值，以“\u0007”作为分隔符，连接成一个字符串。需要服务器端手动分割这个字符串。 服务器端正常处理完成需返回操作成功的xml表示： <status value='OK' oldid='5' rowid='5'/> 如发生错误，可返回以下xml表示： <status value='error' message='错误信息'/> 这些信息将由页面的doUpdateRow函数解析并处理。此函数将在“添加新行”部分解释。
对弹出标签页修改数据的支持 doOnEdit函数中红色部分为增加的语句，拦截了对第1列（列号从0开始）的编辑事件，将其交给popupEdit函数进行处理。 function popupEdit(rId,cellInd){//增加的函数，拦截对第2列的编辑，可在此处调用js代码对单元格的值进行修改 tabFrame.location="getval.html#"+rId; tabDiv.style.display="block"; } 该函数修改了页面中隐藏层tabDiv中的iframe：tabFrame的location属性，将其定位到getval.html文件，并通过url的hash字符串（即“#”后跟的字符串）将被修改行的id传过去。并将tabDiv的属性变为显示。tabDiv在页面下方定义如下： <div id="tabDiv" style="width=500px; height=400px; position:absolute; top:50px; left:20px; display:none;"> <iframe id="tabFrame" name="tabFrame" style="width:100%;height:100%;"></iframe> </div> 这个层显示的位置可由top和left两个属性设定。
getval.html文件中只有一个textbox和两个按钮。点击“发送回表格”，将调用sendVal函数： function sendVal(){ var rId=document.location.hash.substr(1); var msg=document.getElementById("msgBox").value; document.getElementById("msgBox").value=""; parent.valBack(rId,msg); } 其中parent.valBack(rId,msg);调用父窗口的valBack函数，将值传回。parent为JavaScript内置对象，指此窗口的父窗口。 “取消”按钮调用cancelInput函数： function cancelInput(){ parent.tabDiv.style.display="none"; 将父窗口的tabDiv隐藏，即隐藏自身。起到关闭对话框的效果。
添加新行 页面中<a href="javascript:void(0);" onclick="addNewRow();">添加一行</a>调用addNewRow函数： //Add row into grid function addNewRow() { if(unUpdated!=true){ var newId = Date.parse(new Date()); mygrid.addRow(newId,defaultValue);//add a new row mygrid.setUserData(newId,"new","1");//mark row as NEW mygrid.selectCell(mygrid.getRowIndex(newId),0,true,false,true)//选中新加行的第0列 unUpdated=true; } 此函数为表格增加了一个行。并由当前时间生成了一个临时的id，通过页面最初定义的defaultValue值设定该行的初始值。然后选中新加行的第0列。
对新行的编辑同样调用doOnEdit函数。只是在提交时req 对新行的编辑同样调用doOnEdit函数。只是在提交时req.type会被设为add。提交后，对服务器返回的信息调用doUpdateRow函数处理： //update clinet side after row was saved on server function doUpdateRow() { var root = rowUpdater.getXMLTopNode("status"); if(root.getAttribute("value")=="OK"){ var oldId = root.getAttribute("oldid") var rowId = root.getAttribute("rowid") mygrid.setRowId(mygrid.getRowIndex(oldId),rowId)//set new row id (if it was chnaged for new row) mygrid.setRowTextNormal(rowId); mygrid.setUserData(rowId,"changed","0") mygrid.setUserData(rowId,"new","0") mygrid.setEditable(true) }else{ var msg=root.getAttribute("message"); alert("服务器端处理发生错误，请尝试重新加载本页面。\n错误信息："+msg); }
添加成功时服务器端应返回： <status value='OK' oldid='25154' rowid='6'/> oldid为数据提交时，javascript为其生成的临时id。 rowid为将数据插入数据库时，由数据库生成的新行的id。doUpdateRow函数会接收此参数，并将临时id更新为数据库生成的永久id。 如发生错误，可返回以下xml表示： <status value='error' message='错误信息'/> 该函数会弹出错误信息。
删除已有行 页面<a href="javascript:void(0);" onclick="deleteRow();">删除选中行</a>调用deleteRow函数。 //Mark row for deletion and send request to server function deleteRow() { var rId = mygrid.getSelectedId(); mygrid.setRowTextBold(rId); mygrid.setRowTextStyle(rId, "text-decoration: line-through;"); var url = actionURL+"?req.type=delete&req.id="+rId; rowEraser.loadXML(url);//send request for deletion } 该函数构造URL： usersgrid.action?req.type=delete&req.id=5 使用rowEraser对象，将要删除行的id传给服务器。
服务器的返回值由doDeleteRow函数处理： //delete row from grid after it was delete on server function doDeleteRow() { var root = rowEraser.getXMLTopNode("status"); if(root.getAttribute("value")=="OK"){ var oldId = root.getAttribute("oldid") mygrid.deleteRow(oldId); }else{ var msg=root.getAttribute("message"); alert("服务器端处理发生错误，请尝试重新加载本页面。\n错误信息："+msg); } 删除成功时服务器端应返回： <status value='OK' oldid='5'/> doDeleteRow将删除id为5的行。 如发生错误，可返回以下xml表示： <status value='error' message='错误信息'/> 该函数会弹出错误信息。
使用链接类型列 dhtmlXGridObject“link”类型列链接写法： 链接文字^链接 如：到Google的链接应写为： 本例中，使用链接“点击执行页面dd函数^javascript:dd();”调用了页面中的dd函数，显示该行进行提交时会发送的URL。 提示：dhtmlXGridObject会自动过滤掉链接中的所有引号。因此调用页面函数时不能加参数。如想获得被点击的链接所在的行，在被调用函数中使用以下语句： var rId=mygrid.getSelectedId();
加载下拉列表 dhtmlXgrid支持下拉列表（coro）与复 合式下拉列表（co） 用法详见doc版文档
服务器端简介 本示例服务器端采用WebWork框架实现，采用了分层架构，用到了proxool数据库连接池、log4j进行log记录，数据库使用的是Oracle。 但实际上实现的也是传统的接收url，返回数据的操作。
服务器端文件 WebWork框架下，表现层的实现，需要xwork.xml配置 包com.framework.action UsersGridAction 对应usersgrid.action的处理，初始化一个针对users表的GridTable对象，并根据客户端传来的参数，调用其对应方法 包com.framework.model GridTableRequest 对usersgrid.action客户端传来参数的封装 /tools/ xmlWrapper.jsp 对usersgrid.action处理完成生成的xml的包装显示 业务逻辑层 包com.util.UI GridTable 对应于dhtmlXGrid所需各种业务处理的通用类，接收参数，返回处理结果的xml表示 数据访问层 包com.framework.DAO GridTableDAO 对应GridTable，针对Oracle的数据库访问类。封装了对数据库的各种操作
实现简介 前台gridtable.html是一个静态页面，获取及修改数据全部是通过使用 javascript后台调用usersgrid.action并处理这个Action返回的xml实现。 在WebWork的配置文件xwork.xml中配置，将usersgrid.action映射到 com.framework.action 包中的UsersGridAction类进行处理： <action name="usersgrid" class="com.framework.action.UsersGridAction"> <result name="success" type="dispatcher">/tools/xmlWrapper.jsp</result> </action> UsersGridAction类有一个com.framework.model.GridTableRequest 包下 的GridTableRequest类型的私有成员req，并为其增加get和set方法，用 以接收用户传来的参数。 一个String类型的xmlContent成员，用以存储对生成的xml。并传送给 xmlWapper.jsp。将其发送到客户端。 一个com.util.UI.GridTable类型的grid对象，用于对gridetable的业务处理 com.util.UI.GridTable类调用com.framework.DAO.GridTableDAO进行数 据访问处理。
整体结构图示 javascript后台调用 usersgrid.action usersgrid.html WebWork框架下的实现 com.framework.action.UsersGridAction GridTableRequest xmlWapper.jsp com.util.UI.GridTable com.framework.DAO.GridTableDAO WebWork框架下的实现 对于普通的调用，该jsp就应该是展现给用户的界面了。 但此处usergird.html需要接收服务器端返回的xml，所以这个jsp返回的是xml信息 数据库