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.页面数据加载(必需导入的文件)_css_prefix=styles/; _js_prefix=js/; b.基本信息设定代码/ 需修改部分1开始/ 设置获取初始数据的urlvar 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;c.表格初始化页面加载完毕时，由指定执行doOnLoad函数，初始化gird对象，并获取第一页的值。/ 初始化grid，此方法由标签的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);d.页面加载loadXMLloadXML (loadDataURL,pageLoaded)，加载loadDataURL中返回的xml，并在xml返回后调用pageLoaded函数进行处理。31A Time to KillJohn Grisham12.99105/01/1998 ?userdata表示返回数据中附加的信息，写到rows下为整个表的附加信息，写到row下为该行的附加信息，可通过getUserData方法取得这些信息。此处为整个表的附加信息，返回总页数（pageNum）与当前页码（currPage）。?row的id属性对应于该数据表在数据库中的id，以唯一标识该行。此属性不会被显示，但在更新和删除数据时作为传给服务器的关键参数使用。e.原位编辑双击属性为非“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 openedif (state = 0) clearTimeout(timeoutHandler)if(cellInd=1)/增加的语句，处理第1列被编辑时的事件，如有其他列也需自定义处理，可增加类似的if语句块popupEdit(rowId,cellInd);/调用处理这一列编辑的函数return false;/取消掉进入编辑的事件，编辑完成后以上需以上函数重新调用doOnCellEdit(2,rowId,cellInd)，以完成将值的改变提交到服务器的操作。return true;省略掉的部分有检测行的数据是否发生改变的代码。如发生改变则调用sendServerUpdateRequest函数将改变通知服务器。function sendServerUpdateRequest(rId)var rowValuesAr = new Array();var fl = true;/proceed with server requestfor(var i=0;imygrid.getColumnCount();i+)var val = mygrid.cells(rId,i).getValue();if(mandFieldsi=true)/if mandatory field is not filled - do not proceedif(val=)mygrid.cells(rId,i).cell.style.borderColor = red;fl = false;elsemygrid.cells(rId,i).cell.style.borderColor = ;rowValuesArrowValuesAr.length = valif(!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;f.与服务器通信sendServerUpdateRequest会根据变化的内容生成类似这样的url:usersgrid.action?req.type=update&req.id=3&req.values=单元格1单元格2单元格3?req.type表示更改的类型，对已有行的编辑为update?req.id为被更改行的id，该id为加载xml时指定。?req.values为被更改行的新值，以“u0007”作为分隔符，连接成一个字符串。需要服务器端手动分割这个字符串。服务器端正常处理完成需返回操作成功的xml表示：如发生错误，可返回以下xml表示：这些信息将由页面的doUpdateRow函数解析并处理。此函数将在“添加新行”部分解释。g.对弹出标签页修改数据的支持h.添加新行页面中添加一行调用addNewRow函数：/Add row into gridfunction addNewRow() if(unUpdated!=true)var newId = Date.parse(new Date();mygrid.addRow(newId,defaultValue);/add a new rowmygrid.setUserData(newId,new,1);/mark row as NEWmygrid.selectCell(mygrid.getRowIndex(newId),0,true,false,true)/选中新加行的第0列unUpdated=true;此函数为表格增加了一个行。并由当前时间生成了一个临时的id，通过页面最初定义的defaultValue值设定该行的初始值。然后选中新加行的第0列。对新行的编辑同样调用doOnEdit函数。只是在提交时req.type会被设为add。提交后，对服务器返回的信息调用doUpdateRow函数处理：/update clinet side after row was saved on serverfunction 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)elsevar msg=root.getAttribute(message);alert(服务器端处理发生错误，请尝试重新加载本页面。n错误信息：+msg);添加成功时服务器端应返回：?oldid为数据提交时，javascript为其生成的临时id。?rowid为将数据插入数据库时，由数据库生成的新行的id。doUpdateRow函数会接收此参数，并将临时id更新为数据库生成的永久id。如发生错误，可返回以下xml表示：该函数会弹出错误信息。i.删除已有行页面删除选中行调用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 serverfunction