浏览 1994 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
最后更新时间：2007-05-25
看了 daoger 写的 dhtmlXGrid应用简介，我也尝试使用dhtmlxGrid + Struts 2以表格的方式向用户展现数据
jsp页面代码如下： <%@page pageEncoding="GBK" contentType="text/html; charset=GBK" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>编辑商品</title>
</head>
<body>
<link rel="STYLESHEET" type="text/css" href="../css/dhtmlXGrid.css">
<script src="../js/dhtmlXCommon.js"></script>
<script src="../js/dhtmlXGrid.js"></script>
<script src="../js/dhtmlXGridCell.js"></script>
<s:action name="getUnitsXMLString" id="unitAction" namespace="/unit"/>
<s:form name="editForm" action="save" validate="true">
<!-- 其它代码略 -->
<div id="gridbox" width="100%" height="250px" style="background-color:white"></div>
<script type="text/javascript">
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../images/");
mygrid.loadXML("/unit/getUnitsXMLString.action?productId=${productId}");
</script>
</s:form>
</body>
</html>
Action getUnitsXMLString在struts.xml中配置如下： <action name="getUnitsXMLString" class="unitAction" method="getUnitsXMLString"> <result>/jsp/sysinfo/product.jsp</result> </action> unitAction的代码如下： public class UnitAction extends ActionSupport implements ServletResponseAware {
private HttpServletResponse response;
public void setServletResponse(HttpServletResponse response) {
this. response = response;
}
public String doGetUnitsXMLString() {
//其它代码略
//dhtmlxGrid的loadXML方法所需要的字符串由gridMapper.getMappedXMLString()返回
String mappedXMLString = gridMapper.getMappedXMLString();
//将生成的XML字符串发往客户端
response.setContentType("text/xml; charset=GBK");
response.setHeader("Cache-Control", "no-cache");
try {
response.getWriter().write(mappedXMLString);
response.getWriter().flush();
}
catch (IOException e) {
//异常处理代码略
}
return SUCCESS;
}
}
gridMapper.getMappedXMLString()返回的字符串内容如下： <?xml version="1.0" encoding="GBK"?> <rows> <head> <column type="ed" width="100" align="left" sort="str" >Code</column> <column type="ed" width="100" align="left" sort="str" >Name</column> <column type="price" width="80" align="right" sort="int" >Scale</column> <column type="ch" width="80" align="center" sort="str" >Basic unit</column> <settings> <colwidth>px</colwidth> </settings> </head> <row id="1" > <cell>BOX</cell> <cell>box</cell> <cell>1.0</cell> <cell>1</cell> </row> </rows> 运行我的jsp页面，浏览器报如下错误： Error type: LoadXML Description: Incorrect XML 将gridMapper.getMappedXMLString()返回的字符串保存到unit.xml中，保存在本地，并根据jsp页面改写一个html页面如下： <%@page pageEncoding="GBK" contentType="text/html; charset=GBK" %>
<html>
<head>
<title>编辑商品</title>
</head>
<body>
<link rel="STYLESHEET" type="text/css" href="../css/dhtmlXGrid.css">
<script src="../js/dhtmlXCommon.js"></script>
<script src="../js/dhtmlXGrid.js"></script>
<script src="../js/dhtmlXGridCell.js"></script>
<form name="editForm">
<!-- 其它代码略 -->
<div id="gridbox" width="100%" height="250px" style="background-color:white"></div>
<script type="text/javascript">
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../images/");
mygrid.loadXML("unit.xml");
</script>
<form>
</body>
</html>
运行该html页面，能正常loadXML并显示网格。这是为什么呢？ 声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
|
| 返回顶楼 | |
|
最后更新时间：2007-05-25
又阅读了源代码中出错的位置，在dhtmlXCommon.js中：
dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
if(this.xmlDoc.responseXML){
var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName);
alert(this.xmlDoc.responseXML.xml); //这一行是我添加的
var z=temp[0];
}else {
var z=this.xmlDoc.documentElement;
}
if(z){
this._retry=false;
return z;
}
if((_isIE)&&(!this._retry)){
var xmlString=this.xmlDoc.responseText;
alert(this.xmlDoc.responseText); //这一行是我添加的
this._retry=true;
this.xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
this.xmlDoc.async=false;
this.xmlDoc.loadXML(xmlString);
return this.getXMLTopNode(tagName);
}
dhtmlxError.throwError("LoadXML","Incorrect XML",[this.xmlDoc,this.mainObject]);
return document.createElement("DIV");
};
执行时alert显示this.xmlDoc.responseXML.xml为空！而this.xmlDoc.responseText为输出的XML字符串的内容与/jsp/sysinfo/product.jsp的内容。为了说得更清楚一些，我截了张图片，请见附件 这样responseXML.xml为空，responseText也不正确，所以grid就无法初始化了。可是我应该怎样解决/避免这个问题呢？
|
| 返回顶楼 | |
|
最后更新时间：2007-05-26
客户端接收到的responseText的内容错误的问题用如下偏方解决了：
将getUnitsXMLString.action在struts.xml中配置修改为如下： <action name="getUnitsXMLString" class="unitAction" method="getUnitsXMLString">
<result>/jsp/sysinfo/dummy.txt</result>
</action>
其中dummy.txt是一个无内容（0字节）的文件。这样客户端仅会收到XML字符串的内容了 重新运行jsp页面，表格显示仍不正确。浏览器状态栏左下角的黄色三角形图标显示页面执行过程中出错了。双击该图标，错误如下： 引用 行： 1743
字符：7 错误：未知的运行时错误 代码：0 URL：http://localhost:8080/PowerMedical/unit/getUnitsXMLString.action?productId=1 查看dhtmlXGrid.js中出错的代码： this.setHeaderCol=function(col,label){
var z=this.hdr.rows[1];
var col=(z._childIndexes?z._childIndexes[col]:col);
if(!this.useImagesInHeader){
var hdrHTML="<div class='hdrcell'>";
if(label.indexOf("img:[")!=-1){
var imUrl=label.replace(/.*\[([^>]+)\].*/,"$1");
label=label.substr(label.indexOf("]")+1,label.length);
hdrHTML+="<img width='18px' height='18px' align='absmiddle' src='"+imUrl+"' hspace='2'>";
}
hdrHTML+=label;
hdrHTML+="</div>";
alert(hdrHTML); <!-- 这一行是我调试时加入的 -->
z.cells[col].innerHTML=hdrHTML; <!-- 第1742行 -->
alert(hdrHTML); <!-- 这一行是我调试时加入的 -->
if(this._hstyles[col]){ <!-- 第1743行 -->
z.cells[col].style.cssText=this._hstyles[col];
}
}else {
z.cells[col].style.textAlign="left";
z.cells[col].innerHTML="<img src='"+this.imgURL+""+label+"' onerror='this.src = \""+this.imgURL+"imageloaderror.gif\"'>";
var a=new Image();
a.src=this.imgURL+""+label.replace(/(\.[a-z]+)/,".desc$1");
this.preloadImagesAr[this.preloadImagesAr.length]=a;
var b=new Image();
b.src=this.imgURL+""+label.replace(/(\.[a-z]+)/,".asc$1");
this.preloadImagesAr[this.preloadImagesAr.length]=b;
}
};
经过跟踪，发现出错的实际上是第1742行，因为加入的两条alert语句只有第一条执行了。在第1742行前加入alert调试，发现： z.cells.length的值为1 col的值为0 z.cells[col].innerHTML为空 hdrHTML的内容为 <div class='hdrcell'>Code</div> 看起来这几个变量都很正常，第1742行应该不会出错啊~~~我又迷惑了~~~ |
| 返回顶楼 | |
|
最后更新时间：2007-05-28
查看jsp页面解析后生成的客户端页面源码，大致如下：
<html>
<head>
<title>编辑商品</title>
</head>
<body>
<link rel="STYLESHEET" type="text/css" href="/PowerMedical/css/dhtmlXGrid.css">
<script language=javascript src="/PowerMedical/js/dhtmlXCommon.js"></script>
<script language=javascript src="/PowerMedical/js/dhtmlXGrid.js"></script>
<script language=javascript src="/PowerMedical/js/dhtmlXGridCell.js"></script>
<h2>
编辑
</h2>
<script src="/PowerMedical/struts/xhtml/validation.js"></script>
<form namespace="/product" id="save" name="editForm" onsubmit="return validateForm_save();" action="/PowerMedical/product/save.action" method="POST">
<table class="wwFormTable"> <!-- 第17行 -->
<div id="gridbox" width="100%" height="250px" style="background-color:white"></div>
<script type="text/javascript">
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../images/");
mygrid.loadXML("/PowerMedical/unit/getUnitsXMLString.action?productId=1");
</script>
</table> <!-- 第24行 -->
</form>
<script type="text/javascript">
function validateForm_save() {
form = document.getElementById("save");
clearErrorMessages(form);
clearErrorLabels(form);
var errors = false;
return !errors;
}
</script>
</body>
</html>
gridbox的父元素是一个table（第17行、第24行）。而顶楼的帖子里根据jsp页面改写的html页面没有这两行。尝试将这两行加入到改写的html页面中，运行，果然也出错了！再次编辑顶楼的jsp页面，将<s:form></s:form>中的内容移到外面，重新运行，这次表格终于正常显示出来了！ 看来，结论就是：dhtmlxGrid不能放在一个table中。由于Struts 2的<s:form>标签会自动生成一个table，所以它不能包含dhtmlxGrid。 至此问题的原因算是找到了，我还得花些功夫修改我的jsp页面。。。 |
| 返回顶楼 | |
