在官网上看见的DataGrid编辑非常简单,但我实现的时候总是出现问题。经过N久的摸索,终于搞定了,期间出现了多处困难,下面说些解决办法的流程。

我实现的表格在页面加载时是不显示数据,只有通过表单像服务器提交查询数据后才刷新表格。

首先新建DataGrid:

                gridLayout =[{
defaultCell: { editable: true, type: cells._Widget, styles: 'text-align: center;' },
cells: [
{ name: "WBS", field: "wbs", width: "60px"},
/* { name: "ID", field: "configId", width: "240px",editable:false}, */
{ name:"系统/设备/部件",field:"equipName",width:"120px"},
{ name: "配置项名称", field: "configName", width: "100px" },
{ name: "位置名称", field: "locationName", width: "80px" },
{ name: "设备所属部门", field: "deptName", width: "120px" },
{ name: "状态", field: "status", width: "40px" },
{ name: "删除", field: "inc_number", width:"60px",formatter: getDeleteButton },
{ name: "保存", field: "saveButton", width:"60px",formatter: getSaveButton },
{ name: "详细", field:"updateLink", width:"60px",formatter:getUpdateLink}
]
}]; grid = new DataGrid({
structure: gridLayout,
"class": "grid",
escapeHTMLInData: false,
noDataMessage: "没有配置数据"
}, "gridDiv"
);
grid.startup();

然后为提交按钮添加事件处理程序,向服务器端发送请求

                    //查询按钮的点击事件处理程序
var queryButton=dom.byId("queryButton");
on(queryButton, "click",
function(evt){
equipName = dom.byId("equipName").value;
wbsId = dom.byId("wbsId").value;
populateDataGrid(equipName,wbsId);
}); //通过设备名和wbs向服务器段查询数据后填充grid表格
function populateDataGrid(equipName,wbsId)
{
if((equipName=="")&&(wbsId==""))
return;
request.get("configurationMaintainingQueryAction.action?configurationMaintaining.equipName="+equipName+"&configurationMaintaining.wbsId="+wbsId,{handleAs : "json"})
.then(function(data)
{
store = new Memory({data : data , idProperty: "configId" });
dataStore = new ObjectStore({objectStore : store});
grid.store = dataStore;
grid._refresh();
});
}

显示数据没问题的,但是就是不能编辑。网上查到的资料也少。感觉用DOJO的远没有JQUERY的多,至少查中文资料是这样的。

后来发现是在DataGrid新建时,必须有store属性才能EDIT。但是我在页面初始加载时,并不希望表格显示数据,所以给DataGrid设置一个空的ObjectStore就可以,修改新建表格代码:

                    store=new Memory();
dataStore=new ObjectStore({objectStore : store});
grid = new DataGrid({
structure: gridLayout,
store:dataStore,
"class": "grid",
escapeHTMLInData: false,
noDataMessage: "没有配置数据"
}, "gridDiv"
);
grid.startup();

这步完成了,表格就可以编辑了。但是发现和官网上的例子不同的时,此时表格的数据编辑之后在客户端就无法保存,会出现空白的显示情况。

解决办法是实现编辑完成的事件处理程序:

                    var configIds=new Array();

                    grid.on("ApplyEdit",function(rowIndex)
{
grid.update();
var rowdata = grid.getItem(rowIndex);
var configId = rowdata["configId"];
for(i=0;i<configIds.length;i++)
{
if(configIds[i].rowIndex==rowIndex)
return;
}
configIds.push({rowIndex:rowIndex,configId:configId});
});

添加grid.update()既可以解决问题,同时可以在这里获取表格编辑数据准备下一步向服务器端发送。

到这里在客户端网页已经能够实现表格数据的编辑了,和官网的例子一样。

下一步实现真正的服务器端数据修改,这里的思路是收集所有编辑过的单元行数据,然后一起POST到服务器端。代码如下:

                    function getSaveButton(col, rowIndex) {
var new_button = new dijit.form.Button(
{
label : '保存',
showLabel : false,
iconClass : "dijitEditorIcon dijitEditorIconSave",
'class' : 'gridButton',
onClick : saveClick
}); function saveClick(evt) {//删除按钮的删除事件处理程序 if (confirm("确定保存修改?"))
{ evt.stopPropagation();
evt.preventDefault(); var configurationMaintainings=[];
for(i=0;i<configIds.length;i++)
{
var rowdata = grid.getItem(configIds[i].rowIndex); var temp=new Object();
temp.configId=rowdata["configId"];
temp.wbs=rowdata["wbs"];
temp.equipName=rowdata["equipName"];
temp.configName=rowdata["configName"];
temp.locationName=rowdata["locationName"];
temp.deptName=rowdata["deptName"]; configurationMaintainings.push(temp);
} request.post("configurationMaintainingAction.action?mode=update",{data : jsonString});//先服务器提交删除参数 populateDataGrid(equipName,wbsId);//刷新DataGrid
configIds=new Array();//清空
}
}
new_button._destroyOnRemove = true;
return new_button;
}

但是这是发现在服务器端无法接受到request的数据。后来在CHROME调试中发现在Network面板中观察到提交的数据是[[object Object],[object Object],[object Object]]这样的形式。也没有太在意(实际上是不懂)。

网上说数据也弄成JSON就可以了,我一直以为自己提交的就是JSON,总以为是服务器端的事情。后来看了别人的例子才知道在JS中必须要做这样的转换,还好DOJO提供了JSON类,加一句代码就可以。将request.post语句修改如下:

                                var jsonString = JSON.stringify(configurationMaintainings);
request.post("configurationMaintainingAction.action?mode=update",{data : jsonString});//先服务器提交删除参数

顺便说一句,CHROME真心好用。

然后在服务器端接受就可以,这里用了谷歌的GSON包。非常简单,部分代码如下:

            cms.clear();
ActionContext ac=ActionContext.getContext();
Map<String, Object> map=ac.getParameters();
String jsonStr=""; for(Map.Entry<String, Object> entry:map.entrySet()){
System.out.println(entry.getKey()+"--->"+entry.getValue());
jsonStr=entry.getKey();
break;
} //创建一个Gson对象
Gson gson = new Gson();
//创建一个JsonParser
JsonParser parser = new JsonParser();
//通过JsonParser对象可以把json格式的字符串解析成一个JsonElement对象
JsonElement el = parser.parse(jsonStr);
//把JsonElement对象转换成JsonObject
JsonObject jsonObj = null;
if(el.isJsonObject()){
jsonObj = el.getAsJsonObject();
} //把JsonElement对象转换成JsonArray
JsonArray jsonArray = null;
if(el.isJsonArray()){
jsonArray = el.getAsJsonArray();
} ConfigurationMaintaining cm=new ConfigurationMaintaining();
Iterator it = jsonArray.iterator();
while(it.hasNext()){
JsonElement e = (JsonElement)it.next();
//JsonElement转换为JavaBean对象
cm=gson.fromJson(e, ConfigurationMaintaining.class);
cms.add(cm);
} configurationMaintaining.update(cms);

到这里工作基本完了,但是运行后又发现一个问题

即表格编辑后,去点击保存按钮,最后一个编辑的cell,系统不是默认为ApplyEdit状态,所以该单元格数据不会被修改。

本来想在saveButton的事件处理程序中,添加grid的update方法,但是也不起作用。

后来发现,当saveButton的事件处理程序调用完了,依然会除非该单元格的ApplyCellEdit。所以只要在这个事件中加点代码就可以,为了避免每一次ApplyCellEdit事件都触发代码,设置一个isSaveButtonClicked布尔量,在saveButton中打开,在ApplyCellEdit中判断并关闭。代码如下:

    grid.on("ApplyCellEdit",function(cell,rowIndex)
{
if(isSaveButtonClicked==true)
{ var rowdata=grid.getItem(rowIndex);
var configurationMaintainings=[];
var temp=new Object();
temp.configId=rowdata["configId"];
temp.wbs=rowdata["wbs"];
temp.equipName=rowdata["equipName"];
temp.configName=rowdata["configName"];
temp.locationName=rowdata["locationName"];
temp.deptName=rowdata["deptName"];
configurationMaintainings.push(temp);
var jsonString = JSON.stringify(configurationMaintainings);
request.post("configurationMaintainingAction.action?mode=update",{data : jsonString});//先服务器提交删除参数 configIds=new Array();//清空
isSaveButtonClicked=false;
grid.update();
populateDataGrid(equipName,wbsId);//刷新DataGrid
alert("配置修改项成功!");
} });

到这里问题完全解决。

JSP页面完整代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'configurationMaintaining.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page"> <link rel="stylesheet" href="/lss/css/lssCss.css" />
<link rel="stylesheet" href="/lss/dojoroot/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="/lss/dojoroot/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" href="/lss/dojoroot/dojox/grid/resources/claroGrid.css" /> <script src="/lss/dojoroot/dojo/dojo.js" ></script> <script>
var equipName,wbsId;
var grid, dataStore, store;
require(["dojox/grid/DataGrid",
"dojox/grid/cells",
"dojox/grid/cells/dijit",
"dojo/dom",
"dojo/on",
"dojo/request",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/json",
"dijit/form/Button",
"dojo/domReady!"],
function(DataGrid,cells,cellsDijit,dom,on,request,Memory,ObjectStore,JSON){
gridLayout =[{
defaultCell: { editable: true, type: cells._Widget, styles: 'text-align: center;' },
cells: [
{ name: "WBS", field: "wbs", width: "60px"},
{ name:"系统/设备/部件",field:"equipName",width:"120px"},
{ name: "配置项名称", field: "configName", width: "100px" },
{ name: "位置名称", field: "locationName", width: "80px" },
{ name: "设备所属部门", field: "deptName", width: "120px" },
{ name: "状态", field: "status", width: "40px" },
{ name: "删除",editable:false,field: "deleteButton", width:"60px",formatter: getDeleteButton },
{ name: "保存", editable:false,field: "saveButton", width:"60px",formatter: getSaveButton },
{ name: "详细",editable:false, field:"updateLink", width:"60px",formatter:getUpdateLink}
]
}]; store=new Memory();
dataStore=new ObjectStore({objectStore : store});
grid = new DataGrid({
structure: gridLayout,
store:dataStore,
"class": "grid",
escapeHTMLInData: false,
noDataMessage: "没有配置数据"
}, "gridDiv"
);
grid.startup(); //查询按钮的点击事件处理程序
var queryButton=dom.byId("queryButton");
on(queryButton, "click",
function(evt){
equipName = dom.byId("equipName").value;
wbsId = dom.byId("wbsId").value;
populateDataGrid(equipName,wbsId);
}); //通过设备名和wbs向服务器段查询数据后填充grid表格
function populateDataGrid(equipName,wbsId)
{
if((equipName=="")&&(wbsId==""))
return;
request.get("configurationMaintainingQueryAction.action?configurationMaintaining.equipName="+equipName+"&configurationMaintaining.wbsId="+wbsId,{handleAs : "json"})
.then(function(data)
{
store = new Memory({data : data , idProperty: "configId" });
dataStore = new ObjectStore({objectStore : store});
grid.store = dataStore;
grid._refresh();
});
} //获得DataGrid表格的更新按钮
function getUpdateLink(col, rowIndex){
var rowdata=grid.getItem(rowIndex);
var configId=rowdata["configId"];
return ("<a href=configurationInputAction.action?mode=detail&configurationInput.configId="+configId+">详细 </a>");
} //获得DataGrid表格的删除按钮
function getDeleteButton(col, rowIndex) {
var new_button = new dijit.form.Button(
{
label : '删除',
showLabel : false,
iconClass : "dijitEditorIcon dijitEditorIconRemoveFormat",
'class' : 'gridButton',
onClick : deleteClick
}); function deleteClick(evt) {//删除按钮的删除事件处理程序
if (confirm("确定删除该配置项吗?")) {
var rowdata = grid.getItem(rowIndex);
var configId = rowdata["configId"];
/* evt.stopPropagation();
evt.preventDefault(); */
request.get("configurationMaintainingAction.action?mode=delete&configurationMaintaining.configId="+configId);//先服务器提交删除参数
populateDataGrid(equipName,wbsId);//刷新DataGrid
alert("删除配置项成功!");
}
}
new_button._destroyOnRemove = true;
return new_button;
} var configIds=new Array();//存放编辑过的数据行id
var isSaveButtonClicked=false;//保存按钮是否点击过 //编辑完成事件处理
grid.on("ApplyEdit",function(rowIndex)
{
grid.update();
var rowdata = grid.getItem(rowIndex);
var configId = rowdata["configId"];
for(i=0;i<configIds.length;i++)
{
if(configIds[i].rowIndex==rowIndex)
return;
}
configIds.push({rowIndex:rowIndex,configId:configId});
}); //单元格编辑完成事件处理,在保存按钮后的事件处理程序跑完后会触发该事件
grid.on("ApplyCellEdit",function(cell,rowIndex)
{
if(isSaveButtonClicked==true)
{
var rowdata=grid.getItem(rowIndex);
var configurationMaintainings=[];
var temp=new Object();
temp.configId=rowdata["configId"];
temp.wbs=rowdata["wbs"];
temp.equipName=rowdata["equipName"];
temp.configName=rowdata["configName"];
temp.locationName=rowdata["locationName"];
temp.deptName=rowdata["deptName"];
configurationMaintainings.push(temp);
var jsonString = JSON.stringify(configurationMaintainings);
request.post("configurationMaintainingAction.action?mode=update",{data : jsonString});//先服务器提交删除参数 configIds=new Array();//清空
isSaveButtonClicked=false;
grid.update();
populateDataGrid(equipName,wbsId);//刷新DataGrid
alert("配置修改项成功!");
}
}); //获得DataGrid表格的保存按钮
function getSaveButton(col, rowIndex) {
var new_button = new dijit.form.Button(
{
label : '保存',
showLabel : false,
iconClass : "dijitEditorIcon dijitEditorIconSave",
'class' : 'gridButton',
onClick : saveClick
}); function saveClick(evt) {//删除按钮的删除事件处理程序
if (confirm("确定保存修改?"))
{
isSaveButtonClicked=true;
evt.stopPropagation();
evt.preventDefault();
var configurationMaintainings=[];
for(i=0;i<configIds.length;i++)
{
var rowdata = grid.getItem(configIds[i].rowIndex);
var temp=new Object();
temp.configId=rowdata["configId"];
temp.wbs=rowdata["wbs"];
temp.equipName=rowdata["equipName"];
temp.configName=rowdata["configName"];
temp.locationName=rowdata["locationName"];
temp.deptName=rowdata["deptName"];
configurationMaintainings.push(temp);
} var jsonString = JSON.stringify(configurationMaintainings);
request.post("configurationMaintainingAction.action?mode=update",{data : jsonString});//先服务器提交删除参数
populateDataGrid(equipName,wbsId);//刷新DataGrid
configIds=new Array();//清空
}
}
new_button._destroyOnRemove = true;
return new_button;
} });
</script> </head> <body bgcolor="#bae87c" class="claro">
<br />
<table width="800px" align="center">
<tr><td>
<!-- <form id="formNode"> -->
<fieldset >
<legend><font color="red"><b>查询</b></font></legend>
<table width="100%">
<tr><td align="right">系统/设备/部件 </td><td align="left"><input type="text" name="configurationMaintaining.equipName" id="equipName"/></td>
<td align="right">WBS</td><td align="left"><table class="selectTable"><s:select list="configurationMaintaining.wbses" listValue="wbs" listKey="wbsId" name="configurationMaintaining.wbsId" id="wbsId"/></table></td>
</tr>
<tr><td colspan="3"></td><td align="center"><input type="button" id="queryButton" value="查询"></td></tr>
</table>
</fieldset>
<!-- </form> -->
<br />
<form>
<fieldset >
<legend><font color="red"><b>配置信息</b></font></legend>
<div id="gridDiv" style="width:100%;height: 200px;" >
</div>
</fieldset>
</form>
</td></tr>
</table> </body>
</html>

dojo DataGrid实现表格数据编辑的解决方案的更多相关文章

  1. datagrid数据表格当数据为0的时候页面不显示数据

    如下图: datagrid数据表格当数据为0的时候页面不显示数据,为空的表格数据全是0,但是页面无法显示 传递的json数据也是没问题的: 所以实在想不通,为什么easyUI datagrid 不显示 ...

  2. EasyUI datagrid数据表格的函数getData返回来的是什么

    EasyUI datagrid数据表格的函数getData返回来的是什么? 他返回来的是这么一个对象: Object { rows=[10], total=15} 其中rows就是每一行的数据,是这些 ...

  3. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  4. DataGrid( 数据表格) 组件[9]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  5. DataGrid( 数据表格) 组件[8]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  6. DataGrid( 数据表格) 组件[7]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  7. DataGrid( 数据表格) 组件[6]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  8. DataGrid( 数据表格) 组件[5]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  9. DataGrid( 数据表格) 组件[4]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

随机推荐

  1. L264 how cats are psychopaths

    When Becky Evans started studying cat-human relationships, she kept hearing, over and over again, ab ...

  2. Linux:http配置

    http配置 1.挂载系统:mount /dev/cdrom /mnt/cdrom2.安装:rpm -ivh httpd-2.4.6-88.el7.centos.x86_64.rpm2.启动服务:sy ...

  3. python操作sqlite3的几项问题分析

    不同数据库还是有各自特点的,之前自以为熟悉mysql,然后全都照搬到sqlite3上,这样果然是不行的.笔者就近期在使用sqlite3时碰到的问题做了总结分析,并给出相应解决方法,供大家参考. 1.如 ...

  4. 1.Windows下使用VisualSVN Server搭建SVN服务器

    使用 VisualSVN Server来实现主要的 SVN功能则要比使用原始的 SVN和Apache相配合来实现源代码的 SVN管理简单的多,下面就看看详细的说明. VisualSVN Server的 ...

  5. web(三)html标签

    标签的层级特性 闭合的html标签内可以包含一个或多个子标签,因此html的标签是一个多叉树的数据结构,多叉树的根是html标签. 标签的属性描述 每个标签都具备一组公用或当前标签独有的属性,属性的作 ...

  6. VMware虚拟机与主机共享文件夹

    VMware也可以像docker容器那样"挂载"主机上的目录给虚拟机,在虚拟机上访问共享目录就跟访问自己的目录一样方便. 1. 虚拟机(M) -> 设置(S)-> 选项 ...

  7. HPU第四次积分赛-K :方框(水题,打印图形)

    方框 描述 用'*'打印出一个nxn的字符图形(1<=n<=100). 输入 多组输入.每行输入一个n,输入EOF结束文件. 输出 输出一个满足题意的图形. 输入样例 1  1 2 5 6 ...

  8. {"errcode":48001,"errmsg":"api unauthorized}

    微信公众号基础知识说明 网页授权获取微信用户信息:两种 scope 域 https://open.weixin.qq.com/connect/oauth2/authorize?appid={0}&am ...

  9. linux 用户配制文件 用户增加及删除 以及用户属于的更改

    1.用户密码文件 /etc/passwd root  :   x   :    0    :       0    :          root      :     /root    :    / ...

  10. ArrayList 与 LinkedList的区别

    今天查看源码,分析一下两者的异同.外加阐述内部类. 内部类参考官方文档,地址如下: https://docs.oracle.com/javase/tutorial/java/javaOO/nested ...