JAVA—咖啡館

——歡迎訪問rogerfan的博客，常來《JAVA——咖啡館》坐坐，喝杯濃香的咖啡，彼此探討一下JAVA技術(shù)，交流工作經(jīng)驗，分享JAVA帶來的快樂！本網(wǎng)站部分轉(zhuǎn)載文章，如果有版權(quán)問題請與我聯(lián)系。

BlogJava

管理

447 Posts :: 145 Stories :: 368 Comments :: 0 Trackbacks

dhtmlXGrid應(yīng)用簡介

前端時間在論壇里回了fins的一個帖子(http://daoger.javaeye.com/blog/40310)后，有幾個網(wǎng)友想看我的例子代碼，由于搞自己的一個小系統(tǒng)比較忙，在這里簡單說一下dhtmlXGrid的使用心得！
我現(xiàn)在使用的版本是1.2(免費版),我的實現(xiàn)也大部分基于這個免費版,有哪位老兄能提供一份專業(yè)版的話更好了！
1.2免費版中的一些功能其實是1.1專業(yè)版中的！廢話少說，切入正題！

1. 基本使用方法

dhtmlXGrid使用起來

還是比較簡單的，下面是一段它自帶例子中的代碼：
class="code_title">代碼

class="dp-highlighter"> class="bar">

class="alt"> class=""><script> class="alt"> mygrid = new dhtmlXGridObject('gridbox'); class=""> mygrid.setImagePath("../imgs/"); class="alt"> mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication"); class=""> mygrid.setInitWidths("50,150,100,80,80,80,80,200") class="alt"> mygrid.setColAlign("right,left,left,right,center,left,center,center") class=""> mygrid.setColTypes("dyn,ed,ed,price,ch,co,ra,ro"); class="alt"> mygrid.getCombo(5).put(2,2); class=""> mygrid.setColSorting("int,str,str,int,str,str,str,date") class="alt"> //mygrid.setColumnColor("white,#d5f1ff,#d5f1ff") class=""> mygrid.setSkin("xp"); class="alt"> mygrid.init(); class=""> mygrid.loadXML("../grid.xml"); class="alt"></script> class="">

先說一下數(shù)據(jù)的取得，上面

代碼

mygrid.loadXML("../grid.xml");

是從一個xml文件中取得數(shù)據(jù)，這個方法的實現(xiàn)基于ajax，下面是dhtmlXCommon.js中的發(fā)送請求的實現(xiàn)：

代碼

dtmlXMLLoaderObject.prototype.loadXML = function (filePath, postMode, postVars) {
this.filePath = filePath;
try {
this.xmlDoc = new XMLHttpRequest();
this.xmlDoc.open(postMode ? "POST" : "GET", filePath, this.async);
if (postMode) {
this.xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}
this.xmlDoc.onreadystatechange = new this.waitLoadFunction(this);
this.xmlDoc.send(null || postVars);
}
catch (e) {
if (document.implementation && document.implementation.createDocument) {
this.xmlDoc = document.implementation.createDocument("", "", null);
this.xmlDoc.onload = new this.waitLoadFunction(this);
this.xmlDoc.load(filePath);
} else {
this.xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
this.xmlDoc.open(postMode ? "POST" : "GET", filePath, this.async);
if (postMode) {
this.xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}
this.xmlDoc.onreadystatechange = new this.waitLoadFunction(this);
this.xmlDoc.send(null || postVars);
}
}
};

這樣你就可以通過這個loadXML()方法向服務(wù)器端發(fā)送請求，如：

代碼

mygrid.loadXML("aaaa.do?para1=para1&2=para2");

服務(wù)器端可以有多種方式處理請求，我使用的java來處理的,接收請求后根據(jù)需要構(gòu)建返回客戶端的數(shù)據(jù)，我采用的是用Jdom生成XML文件流的方式；然后用XMLOutputter將生成的數(shù)據(jù)文件發(fā)送給客戶端，dhtmlXGrid 會自己解析數(shù)據(jù)，顯示數(shù)據(jù)！
下面是發(fā)送數(shù)據(jù)的代碼：

代碼

xmlDocument = new Document(rowsElement);
XMLOutputter outputter = new XMLOutputter();
try
{
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
outputter.output(xmlDocument, response.getWriter());
// outputter.output(xmlDocument, System.out);//在控制臺輸出，查看構(gòu)建的xml文件是否正確規(guī)范
} catch (IOException e)
{
log.error(e);
try
{
response.getWriter().write("<flag>0</flag>");
} catch (Exception fe)
{
}
}

2. 數(shù)據(jù)保存及信息反饋

由于版本限制，免費版中沒有提供數(shù)據(jù)保存的api，在專業(yè)版中還有用.net和php實現(xiàn)的服務(wù)器端實例代碼；這一功能我是根據(jù)dhtmlXGrid提供的api自己用ajax實現(xiàn)的：

代碼

//deal with data from mygrid
document.write("<script type='text/javascript' src='script/prototype/infodialog.js'></script>");
function mydataProcessorObject() {
var imagesurl = "script/dhtmlXGrid/images/";
var xmlHttp;//request and response
var mygrid = new dhtmlXGridObject("gridbox");
this.dealServer = "";//
this.querycondithon = "";
this.dataXml = "";
this.checkFlag = "";//whether check the cell is null
this.header = "";
var newcell;//new record eg."","","","", and so on
var alertInfotimeout = 3;//alert info show time
var haveSaved = false;
this.setDealServer = function (server) {
this.dealServer = server;
};
this.setQueryCondition = function (condition) {
this.querycondithon = condition;
};
/////////////////////////////////////////////////////////
this.init = function (para) {
if (para == "query") {
if (this.querycondithon.length === 0 || this.querycondithon == "" || this.querycondithon == null) {
mygrid.setImagePath(imagesurl);
mygrid.enableLightMouseNavigation(true);
mygrid.loadXML(this.dealServer + "?action=query&ts=" + new Date().getTime());
} else {
mygrid.clearAll();
mygrid.loadXML(this.dealServer + "?action=query&ts=" + new Date().getTime() + "&" + this.querycondithon);
}
} else {
if (para == "add") {
if (this.readyingAdd()) {
//mygrid.addRow("A"+(new Date()).valueOf(),['','','','','','','',''],0);
mygrid.addRow("A" + (new Date()).valueOf(), newcell, 0);
} else {
//alert("Exist null cell!");
openinfodialog("\u5b58\u5728\u7a7a\u5355\u5143\u683c\uff01", 150, 40);
}
} else {
if (para == "save" && !haveSaved) {
this.readyingSave();
} else {
if (para == "delete") {
var iddel = mygrid.getSelectedId();
//just whether the record has saved or not
if (iddel.indexOf("A") === 0) {
mygrid.deleteSelectedItem();
openinfodialog("\u6570\u636e\u5df2\u5220\u9664\uff01", 150, 40);
} else {
this.loadDelete(iddel);
}
}
}
}
}
};
/////////////////////////////////////////////////////////
this.createXMLHttpRequest = function () {
if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
}
}
} else {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
};
/////////////////////////////////////////////////////////
this.readyingAdd = function () {
var allitemid = new Array(0);
allitemid = mygrid.getAllItemIds().split(",");
var cc = mygrid.getColumnCount();
newnewcell = new Array(cc + 1);
var addflag = true;
if (allitemid.length > 0) {
for (var i = 0; i < allitemid.length; i++) {
for (var j = 0; j < cc; j++) {
var cellValue = mygrid.cells(allitemid[i], j).getValue();
if (cellValue == null || cellValue.length == 0 || cellValue == "") {
addflag = false;
}
}
}
}
if (addflag) {
for (var n = 0; n < cc; n++) {
newcell[n] = "";
}
}
return addflag;
};
/////////////////////////////////////////////////////////
this.readyingSave = function () {
var allitemid = new Array(0);
var modiitemid = new Array(0);
allitemid = mygrid.getAllItemIds().split(",");
var cc = mygrid.getColumnCount();
var saveflag = false;
var blankflag = false;
var a = 0;
for (var i = 0; i < allitemid.length; i++) {
var modiflag = false;
for (var j = 0; j < cc; j++) {
if (mygrid.cells(allitemid[i], j).wasChanged()) {
modiflag = true;
}
var cellValue = mygrid.cells(allitemid[i], j).getValue();
if (cellValue == "" || cellValue.length == 0 || cellValue == null) {
blankflag = true;
}
}
if (modiflag && !blankflag) {
modiitemid[a++] = allitemid[i];
}
}
if (this.dealServer.length > 0 && modiitemid.length > 0) {
this.dataXml = "<?xml version='1.0' encoding='UTF-8'?><data>";
for (var i = 0; i < modiitemid.length; i++) {
if (modiitemid[i].length > 0) {
this.dataXml += "<row id='" + modiitemid[i] + "'>";
for (var j = 0; j < cc; j++) {
this.dataXml += "<cell>";
var mycell = mygrid.cells(modiitemid[i], j).getValue();
if (mycell.indexOf("<") != -1) {
this.dataXml += mycell.substring(mycell.indexOf(">") + 1, mycell.indexOf("</"));
} else {
this.dataXml += mycell;
}
this.dataXml += "</cell>";
}
this.dataXml += "</row>";
}
}
this.dataXml += "</data>";
alert(this.dataXml);
this.loadSave();
this.init("query");
} else {
if (blankflag) {
openinfodialog("\u5b58\u5728\u7a7a\u503c\uff01", 100, 40);
} else {
//alert("u5df2u7ecfu5b58u50a8u6216u6ca1u6709u6570u636eu6539u52a8uff01");
openinfodialog("\u5df2\u4fdd\u5b58\u6216\u6ca1\u6709\u53ef\u4fdd\u5b58\u7684\u6570\u636e\uff01", 200, 40);
}
}
};
/////////////////////////////////////////////////////////
this.loadSave = function () {
this.createXMLHttpRequest();
var url = this.dealServer + "?action=save&ts=" + new Date().getTime();
xmlHttp.open("POST", url, false);
xmlHttp.onreadystatechange = this.goCallBackSave;
xmlHttp.setRequestHeader("Content-Type", "text/xml");
xmlHttp.setRequestHeader("charset", "UTF-8");
xmlHttp.send(this.dataXml);
};
/////////////////////////////////////////////////////////
this.goCallBackSave = function () {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var returnFlag = xmlHttp.responseXML.getElementsByTagName("flag");
var saveflag = returnFlag[0].firstChild.nodeValue;
if (saveflag == "1") {
//alert("u4fddu5b58u6210u529fuff01");
openinfodialog("\u4fdd\u5b58\u6210\u529f\uff01", 120, 40);
} else {
if (saveflag == "0") {
//alert("u4fddu5b58u5931u8d25!");
openinfodialog("\u4fdd\u5b58\u5931\u8d25\uff01", 120, 40);
}
}
}
}
};
/////////////////////////////////////////////////////////
this.loadDelete = function (id) {
this.createXMLHttpRequest();
var url = this.dealServer + "?action=delete&id=" + id + "&ts=" + new Date().getTime();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = this.goCallBackDelete;
xmlHttp.send();
};
/////////////////////////////////////////////////////////
this.goCallBackDelete = function () {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var returnFlag = xmlHttp.responseXML.getElementsByTagName("flag");
var delflag = returnFlag[0].firstChild.nodeValue;
if (delflag == "1") {
mygrid.deleteSelectedItem();
//alert("ddddddddd");
openinfodialog("\u8bb0\u5f55\u5df2\u5220\u9664\uff01", 140, 40);
} else {
if (delflag == "0") {
//alert("u5220u9664u5931u8d25!");
openinfodialog("\u8bb0\u5f55\u672a\u80fd\u5220\u9664\uff0c\u8bf7\u68c0\u67e5\u539f\u56e0\uff01", 170, 40);
}
}
}
}
};
}

簡單說一下思路：通過dhtmlXGrid提供的api wasChange()來判斷是否有單元格的數(shù)據(jù)修改過，如果有修改，在客戶端構(gòu)建要保存數(shù)據(jù)的xml后，用send方式將其發(fā)送到服務(wù)器端處理，用服務(wù)器端返回的flag標(biāo)志位提示反饋信息，在提示信息顯示的同時，頁面中的腳本再向服務(wù)器端發(fā)送一次查詢請求，刷新數(shù)據(jù)，顯示最新數(shù)據(jù)記錄！
還有一個問題是：填寫完數(shù)據(jù)保存時，焦點還在表格中，這時在取數(shù)據(jù)的時候要注意清除掉<texteare>標(biāo)簽，這樣才能取到單元格的值！
代碼中的很多方法都是來源于dhtmlXGrid的api，代碼有點亂，請盡量參考它自帶的文檔！

3. 其他問題

操作后的反饋信息我是使用的ouspec 推薦的一個小控件windows_js，現(xiàn)在的版本是1.0；這里是例子：http://prototype-window.xilinus.com/samples.html#

另外，我還使用了yui-ext組件，由于dhtmlXGrid中日期控件是基于YUI開發(fā)的，所以兩個都使用的時候會有底層方法方面的沖突；我現(xiàn)在的解決方法是把dhtmlXGrid下js文件夾中dhtmlXGrid_excell_calendar.js文件中對event.js的引用替換為YUI包中的event.js;
如果你有更好的解決辦法，還請告訴我！

說得有點羅嗦，希望各位網(wǎng)友能聽的明白，用起來少走彎路！呵呵！

#################################################################################################

注釋：擴(kuò)展的ajax請求部分如果換成prototype的Ajax.Request會更簡潔一些。

posted on 2007-09-03 13:51 rogerfan 閱讀(6985) 評論(3) 編輯收藏所屬分類: 【開源技術(shù)】

Feedback

# re: dhtmlXGrid應(yīng)用簡介[未登錄] 2008-01-03 09:20 vinson

能給份擴(kuò)展完的代碼？回復(fù) 更多評論

# re: dhtmlXGrid應(yīng)用簡介[未登錄] 2008-01-03 09:27 vinson

beijing_lan@126.com
謝謝回復(fù) 更多評論

# re: dhtmlXGrid應(yīng)用簡介[未登錄] 2008-01-03 09:39 rogerfan

@vinson
非常抱歉我手頭也沒有了，這篇文章是轉(zhuǎn)載過來的。
回復(fù) 更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: 【轉(zhuǎn)】微信公眾號開發(fā)之微信模板消息【轉(zhuǎn)】微信公眾平臺開發(fā)之模板消息(Java) 【轉(zhuǎn)】Memcached-1.4.4-14 For Win32 or Win64 安裝【轉(zhuǎn)】windows+nginx+memcached+tomcat做負(fù)載均衡【轉(zhuǎn)】windows任務(wù)定時重啟tomcat 【轉(zhuǎn)】CDN緩存那些事【轉(zhuǎn)】CAS實現(xiàn)SSO單點登錄原理【轉(zhuǎn)】CAS框架配置詳解【轉(zhuǎn)】nginx1.8.1(穩(wěn)定版本) nginx.conf 配置文件詳解二【轉(zhuǎn)】nginx1.8.1(穩(wěn)定版本) ngixn.conf 配置文件詳解一

JAVA—咖啡館

公告

常用鏈接

留言簿(17)

隨筆分類(542)

隨筆檔案(438)

文章分類(182)

文章檔案(142)

新聞分類

※→ 【JAVA文檔】

※→ 【親人博客】

※→ 【休閑娛樂】

※→ 【友情鏈接】

※→ 【學(xué)習(xí)網(wǎng)站】

※→ 【服務(wù)網(wǎng)站】

※→ 【著名網(wǎng)站】

※→ 【阿里博客】

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

Feedback