标签：
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>
效果如下
标签：
原文地址：http://www.cnblogs.com/qq552048250/p/4463423.html
