DhtmlXGrid表格显示控件简介.

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> <script>_css_prefix="styles/"; _js_prefix="js/"; </script> <script src="js/dhtmlXGrid_excell_calendar.js"></script>

基本信息设定代码 <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信息数据库

DhtmlXGrid表格显示控件简介.

Similar presentations

Presentation on theme: "DhtmlXGrid表格显示控件简介."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

DhtmlXGrid表格显示控件简介.

Similar presentations

Presentation on theme: "DhtmlXGrid表格显示控件简介."— Presentation transcript:

Similar presentations

About project

反馈