DataGrid实现数据动态刷新功能见前一个帖子：http://www.cnblogs.com/qq552048250/p/4447103.html
实现数据删除只需要向表格中动态添加按钮，并为按钮的点击事件添加代码，向服务器端的删除代码发出请求，服务器删除后，再向服务器发出显示数据的请求。
Action中添加删除代码。
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"> <style type="text/css">
@import "/dojoroot/dijit/themes/tundra/tundra.css";
@import "/dojoroot/dojox/grid/resources/tundraGrid.css";
</style> <script src="/dojoroot/dojo/dojo.js" ></script> <script> var myData;
var equipName,wbs;
var grid, dataStore, store;
require(["dojo/dom",
"dojo/on",
"dojo/request",
"dojo/dom-form",
"dojox/grid/DataGrid",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dijit/form/Button",
"dojo/domReady!"],
function(dom, on, request, domForm,DataGrid,Memory, ObjectStore){
var form = dom.byId('formNode');
grid = new DataGrid({
query: { id: "*" },
id:"dataGrid1",
structure: [
{ name: "WBS", field: "wbs", width: "80px" },
{ name: "配置项名称", field: "configName", width: "120px" },
{ name: "位置名称", field: "locationName", width: "100px" },
{ name: "设备所属部门", field: "deptName", width: "120px" },
{ name: "状态", field: "status", width: "100px" },
{ name: "删除", field: "inc_number", width:"80px",formatter: getDeleteButton }
],
noDataMessage: "没有配置数据"
}, "gridDiv"
);
grid.startup(); 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("确定删除该配置项吗？")){
store=null;
dataStore=null;
var rowdata = grid.getItem(rowIndex);
var configName = rowdata["configName"];
evt.stopPropagation();
evt.preventDefault();
request.post("configurationMaintainingAction.action", {
data: {
configName:configName
} ,
handleAs: "json"
});
request.post("configurationMaintainingAction.action", {
data: {
equipName:equipName,
wbs:wbs
} ,
handleAs: "json"
}
).
then(function(data){
store = new Memory({ data: data.items });
dataStore = new ObjectStore({ objectStore: store });
grid.store = dataStore;
grid._refresh();
alert("数据删除成功");
}
);
}
}
new_button._destroyOnRemove = true;
return new_button;
} on(form, "submit", function(evt){
store=null;
dataStore=null;
equipName=dom.byId("equipName").value;
wbs=dom.byId("wbs").value;
evt.stopPropagation();
evt.preventDefault();
request.post("configurationMaintainingAction.action", {
data: domForm.toObject("formNode"),
handleAs: "json"
}
).
then(function(data){
store = new Memory({ data: data.items });
dataStore = new ObjectStore({ objectStore: store });
grid.store = dataStore;
grid._refresh();
}
);
}
);
}
);
</script> </head> <body bgcolor="#bae87c" class="tundra">
<br />
<table width="800px" align="center">
<tr><td>
<!-- <form id="formNode" action="configurationMaintainingAction.action" method="post" id="form1" > -->
<form id="formNode" >
<fieldset >
<legend><font color="red"><b>查询</b></font></legend>
<table width="100%">
<tr><td align="center" >系统/设备/部件 <input type="text" name="equipName" id="equipName"/></td>
<td align="center">WBS <select style="width:156px;" name="wbs" id="wbs">
<option value="">———————————</option>
<s:iterator value="wbsNames" var="wbsName">
<option value="${wbsName}"><s:property value="wbsName" /></option>
</s:iterator>
</select>
</td>
</tr>
<tr><td></td><td align="center"><button type="submit" id="submitButton">查询</button><input type="submit" value="调试查询" /></td>
</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>
效果如下
