dhtmlxgrid的JSON，xml，table封装数据格式
table格式的，完全和action脱离了，纯粹的JSP页面显示//初始表格
function gridInit(){
var mygrid = new dhtmlXGridFromTable('gridbox');
mygrid.setSkin("light");
}
//分页函数
function jumpPage(pageNo, totalPage) {
if (pageNo <= 1) {
pageNo = 1;
}
if (pageNo > totalPage) {
pageNo = totalPage;
}
var form = document.getElementById("gridForm");
document.getElementById("pageNo").value = pageNo;
form.action = "showCheckCertsForPreCheck.do";
form.method = "post";
form.submit();
}
<!--框架右边列表-->
<div gridHeight="auto" imgpath="/IBS/js/dhtmlxGrid/imgs/" border="1" lightnavigation="true">
<tr>
<td type="ro" width="60">验照年份</td>
<td type="ro" width="150">字号</td>
<td type="ro" width="80">经营者姓名</td>
<td type="ro" width="100">注册号</td>
<td type="ro" width="80">提交时间</td>
<td type="ro" width="120">状态</td>
<td type="ro" width="127">操作</td>
</tr>
<c:set var="checkCertList" value="${pagination.elementList}" />
<c:forEach items="${checkCertList}" var="checkCert" varStatus="vs">
<tr>
<td type="ro">${checkCert.fldYear}</td>
<td type="ro">${checkCert.fldStoreName}</td>
<td type="ro">${checkCert.fldManagerName}</td>
<td type="ro">${checkCert.fldRn}</td>
<td type="ro"><fmt:formatDate value="${checkCert.fldCommitTime}" pattern="yyyy-MM-dd"/></td>
<td type="ro">${applicationScope.checkCertStatusMap[checkCert.fldCheckState]}</td>
<td type="ro">
<a href="viewCheckCertsForPreCheckAction.do?certId=${checkCert.fldId}">预审</a>
<a href="viewCertAction_viewCert.do?certId=${checkCert.fldId}&sn=${checkCert.fldSn}">查看</a>
</td>
</tr>
</c:forEach>
</table>
</div>
<div name="gridForm" cssStyle="margin-bottom:0px;"
method="post" autoComplete="off">
<input type="hidden" name="pagination.currentPage" id="pageNo"
value="${pagination.currentPage}" />
<input type="hidden" name="pagination.totalPages"
value="${pagination.totalPages}" />
</s:form>
<c:if test="${!empty checkCertList}">
第${pagination.currentPage}页, 共${pagination.totalPages}页
<a href="javascript:jumpPage(1)">首页</a>
<a
href="javascript:jumpPage(${pagination.currentPage - 1}, ${pagination.totalPages})">上一页</a>
<a
href="javascript:jumpPage(${pagination.currentPage + 1}, ${pagination.totalPages})">下一页</a>
<a
href="javascript:jumpPage(<fmt:formatNumber type='number' value='${pagination.totalPages}'/>)">末页</a>
</c:if>
</div>
</div>
<!--框架右边内容结束-->
JSON格式的，下面是action里面的代码，后面是JSP页面的
// 生成JSON数据(为什么只能显示一行，难道屏蔽相同的ID)
public String getJSON1() {
List<Integer> list = this.getList();
String json = "{rows:[";
for (int i = 0; i < list.size(); i++) {
json += "{id:000,data:["" + "aaa","" + "aaaa" + "","" + "sss"
+ "","" + "oooo" + ""]}";
if (i < list.size() - 1) {
json += ",";
}
}
json += "]}";
return json;
}
//生成JSON数据
public String getJSON() {
List<Integer> list = this.getList();
String json = "{rows:[";
for (int i = 0; i < list.size(); i++) {
json += "{id:""
+ (i+1)
+ "",data:[""
+list.get(i)
+"",""
+list.get(4)
+"",""
+list.get(5)
+"",""
+list.get(i)
+""]}";
if (i < list.size() - 1) {
json += ",";
}
}
json += "]}";
return json;
}
// 把JSON数据返回给页面
public String sendJSON() {
HttpServletResponse response = ServletActionContext.getResponse();
String json = this.getJSON();
try {
response.getWriter().write(json);
response.getWriter().close();
} catch (Exception e) {
}
return NONE;
}
// 随机产生一个list
public List<Integer> getList() {
List<Integer> list = new ArrayList<Integer>();
for (int i = 0; i < 10; i++) {
int b = (int) (Math.random() * 1000);
list.add(b);
}
return list;
}
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="STYLESHEET" type="text/css"
href="<%=request.getContextPath()%>/js/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/js/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script
src="<%=request.getContextPath()%>/js/codebase/dhtmlxcommon.js"></script>
<script src="<%=request.getContextPath()%>/js/codebase/dhtmlxgrid.js"></script>
<script
src="<%=request.getContextPath()%>/js/codebase/dhtmlxgridcell.js"></script>
<style>
.hover {
background-color: navy;
}
</style>
<script type="text/javascript">
function bb(){
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("<%=request.getContextPath()%>/js/codebase/imgs/");
//设置标题
mygrid.setHeader("售价,书名, 作者,NO");
//这个要和上面对应，没个字段的初始宽度
mygrid.setInitWidths("70,250,80,*");
//中间OR左边OR右边
mygrid.setColAlign("right,left,left");
//他自己的数据类型
mygrid.setColTypes("ed,ed,ed,ed");
//对应的基本类型
mygrid.setColSorting("int,str,str");
//鼠标滑过高亮显示
mygrid.enableRowsHover(true,"hover");
//设置皮肤,可供选择的皮肤名称为xp, mt, gray, light, clear, modern, sb_dark
mygrid.setSkin("dhx_skyblue");
//单击双击F2三种可编辑模式
mygrid.enableEditEvents(false,false,true);
//初始
mygrid.init();
//取本地文件还是请求路径
//mygrid.load("<%=request.getContextPath()%>/js/common/data.json", "json");
mygrid.load("getJSON.action", "json");
}
</script>
</head>
<body>
<br>
<br>
${message}
<hr>
<input type="button" onclick="bb()" value="显示列表">
<div id="gridbox"
style="width: 500px; height: 270px; background-color: white;"></div>
<br>
</body>
</html>
XML格式的，性能问题，估计没人用了都，但是我还是写出来了，虽然可以用JSON代替，页面和JSON一样
public class getXmlAction extends ActionSupport {
private static final long serialVersionUID = 1016865575951081277L;
private static Document xmlDocument = null;
// 通过JDOM生成XML格式数据
public Document getXML() {
Element root = new Element("rows");
Document myXML = new Document(root);
Element root21 = new Element("row");
Element root22 = new Element("row");
root21.setAttribute("id", "1");
root22.setAttribute("id", "2");
root.addContent(root21);
root.addContent(root22);
Element root13_1 = new Element("cell");
root13_1.setText("小明游泳");
Element root13_2 = new Element("cell");
root13_2.setText("摔了一跤");
Element root13_3 = new Element("cell");
root13_3.setText("哈哈哈");
Element root13_4 = new Element("cell");
root13_4.setText("33");
Element root13_5 = new Element("cell");
root13_5.setText("2");
Element root13_6 = new Element("cell");
root13_6.setText("456.4564");
root21.addContent(root13_1);
root21.addContent(root13_2);
root21.addContent(root13_3);
root21.addContent(root13_4);
root21.addContent(root13_5);
root21.addContent(root13_6);
Element root23_1 = new Element("cell");
root23_1.setText("小亮吃饭");
Element root23_2 = new Element("cell");
root23_2.setText("噎着了");
Element root23_3 = new Element("cell");
root23_3.setText("嘻嘻嘻");
Element root23_4 = new Element("cell");
root23_4.setText("12");
Element root23_5 = new Element("cell");
root23_5.setText("3");
Element root23_6 = new Element("cell");
root23_6.setText("128391.123123");
root22.addContent(root23_1);
root22.addContent(root23_2);
root22.addContent(root23_3);
root22.addContent(root23_4);
root22.addContent(root23_5);
root22.addContent(root23_6);
return myXML;
}
// 把XML数据返回给页面
public String sendXML() {
// 得到三个对象
HttpServletResponse response = ServletActionContext.getResponse();
// 发送给页面
xmlDocument = this.getXML();
XMLOutputter outputter = new XMLOutputter();
/*
* 把XML写入本地硬盘 try {
* outputter.setFormat(Format.getPrettyFormat().setEncoding("GBK"));
* outputter.output(xmlDocument, new FileWriter("f://woaiwangfei.xml")); }
* catch (IOException e2) { e2.printStackTrace(); }
*/
try {
response.setContentType("text/xml; charset=utf-8");
response.setHeader("Cache-Control", "no-cache");
outputter.output(xmlDocument, response.getWriter());
} catch (IOException e) {
e.printStackTrace();
try {
response.getWriter().write("<flag>0</flag>");
} catch (Exception fe) {
e.printStackTrace();
}
}
return NONE;
}
// 把XML打印出来看看(打印的时候必须把上面三个内置对象注释掉，不管你信不信，反正我信)
public static void main(String[] args) throws IOException {
getXmlAction TheXML = new getXmlAction();
xmlDocument = TheXML.getXML();
XMLOutputter outputter = new XMLOutputter();
outputter.output(xmlDocument, System.out);
}
/*
* public String getXML() { ActionContext ctx = ActionContext.getContext();
*
* HttpServletResponse response = (HttpServletResponse) ctx
* .get(ServletActionContext.HTTP_RESPONSE); SAXBuilder sb = new
* SAXBuilder(); // Document xmlDocument=sb.build("grid.xml"); //构造文档对象
* xmlDocument = new Document(); xmlDocument = getXml1(); XMLOutputter
* outputter = new XMLOutputter(); try { response.setContentType("text/xml;
* charset=UTF-8"); response.setHeader("Cache-Control", "no-cache");
* outputter.output(xmlDocument, response.getWriter());
* //在控制台输出，查看构建的xml文件是否正确规范 outputter.output(xmlDocument, System.out); }
* catch (IOException e) { // log.error(e); try {
* response.getWriter().write("<flag>0</flag>"); } catch (Exception fe) { } }
* return NONE; }
*/
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="STYLESHEET" type="text/css"
href="<%=request.getContextPath()%>/js/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/js/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script
src="<%=request.getContextPath()%>/js/codebase/dhtmlxcommon.js"></script>
<script src="<%=request.getContextPath()%>/js/codebase/dhtmlxgrid.js"></script>
<script
src="<%=request.getContextPath()%>/js/codebase/dhtmlxgridcell.js"></script>
<script type="text/javascript">
function bb(){
//设置图片，标题，宽度，位置，
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("<%=request.getContextPath()%>/js/codebase/imgs/");//checkbox是图片
mygrid.setHeader("小文本,少量文本,大量文本,价格,复选框_图片,下拉列表,单选框,出版日期");
mygrid.setInitWidths("50,150,120,80,80,80,80,200");
mygrid.setColAlign("right,left,left,right,center,left,center,center");
mygrid.setColTypes("ed,ed,txt,price,ch,coro,ra,ro");//数字，文本，价格，选框，日历
mygrid.setColSorting("int,str,str,int,str,str,str,date");//整形字符串日期
mygrid.enableRowsHover(true,"hover");//鼠标滑过选中
mygrid.enableEditEvents(false,false,true);//单击双击F2编辑模式
//mygrid.getCombo(5).put(2, 2);//不晓得是什么
mygrid.setSkin("dhx_skyblue");//皮肤
//关键的两步，初始化，加载
mygrid.init();
//mygrid.loadXML("<%=request.getContextPath()%>/js/common/grid.xml");
//这是哥的请求
mygrid.loadXML("getXML.action");
}
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
}
//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);
}
}
</script>
<style>
.hover {
background-color: green;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
${message}
<hr>
<input type="button" onclick="bb()" value="显示列表">
<div id="gridbox"
style="width: 900px; height: 300px; background-color: white;">
</div>
<a href="javascript:void(0);" onclick="deleteRow();">还可以删除选中行</a>
</body>
</html>
