DataGrid实现数据动态刷新功能见前一个帖子：http://www.cnblogs.com/qq552048250/p/4447103.html

实现数据删除只需要向表格中动态添加按钮，并为按钮的点击事件添加代码，向服务器端的删除代码发出请求，服务器删除后，再向服务器发出显示数据的请求。

Action中添加删除代码。

JSP的代码如下：

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%@ taglib prefix="s" uri="/struts-tags" %>
  3.  
  4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  5. <html>
  6.   <head>   
  7.  
  8.     <title>My JSP 'configurationMaintaining.jsp' starting page</title>
  9.     <meta http-equiv="pragma" content="no-cache">
  10.     <meta http-equiv="cache-control" content="no-cache">
  11.     <meta http-equiv="expires" content="0">
  12.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  13.     <meta http-equiv="description" content="This is my page">
  14.  
  15.      <style type="text/css">
  16.         @import "/dojoroot/dijit/themes/tundra/tundra.css";
  17.         @import "/dojoroot/dojox/grid/resources/tundraGrid.css";
  18.     </style>  
  19.  
  20.     <script src="/dojoroot/dojo/dojo.js" ></script>
  21.  
  22.     <script>
  23.  
  24.         var myData;
  25.         var equipName,wbs;
  26.         var grid, dataStore, store;
  27.         require(["dojo/dom",
  28.                  "dojo/on",
  29.                  "dojo/request",
  30.                  "dojo/dom-form",
  31.                  "dojox/grid/DataGrid",
  32.                  "dojo/store/Memory",
  33.                  "dojo/data/ObjectStore",
  34.                  "dijit/form/Button",
  35.                  "dojo/domReady!"],
  36.                  function(dom, on, request, domForm,DataGrid,Memory, ObjectStore){
  37.                     var form = dom.byId('formNode');
  38.                     grid = new DataGrid({
  39.                         query: { id: "*" },
  40.                         id:"dataGrid1",
  41.                         structure: [
  42.                             { name: "WBS", field: "wbs", width: "80px" },
  43.                             { name: "配置项名称", field: "configName", width: "120px" },
  44.                             { name: "位置名称", field: "locationName", width: "100px" },
  45.                             { name: "设备所属部门", field: "deptName", width: "120px" },
  46.                             { name: "状态", field: "status", width: "100px" },
  47.                             { name: "删除", field: "inc_number", width:"80px",formatter: getDeleteButton }
  48.                         ],
  49.                         noDataMessage: "没有配置数据"
  50.                      }, "gridDiv"
  51.                     );
  52.                     grid.startup(); 
  53.  
  54.                     function getDeleteButton(col, rowIndex){
  55.                            var new_button = new dijit.form.Button({
  56.                                 label: '删除', showLabel: false,
  57.                                 iconClass: "dijitEditorIcon dijitEditorIconRemoveFormat",
  58.                                 'class': 'gridButton',
  59.                                 onClick: deleteClick
  60.                            });
  61.  
  62.                            function deleteClick(evt) {
  63.                                 if (confirm("确定删除该配置项吗？")){
  64.                                     store=null;
  65.                                     dataStore=null;
  66.                                     var rowdata = grid.getItem(rowIndex);
  67.                                     var configName = rowdata["configName"];
  68.                                     evt.stopPropagation();
  69.                                     evt.preventDefault();
  70.                                     request.post("configurationMaintainingAction.action", {
  71.                                          data: {
  72.                                              configName:configName
  73.                                              } ,
  74.                                         handleAs: "json"
  75.                                         });
  76.                                     request.post("configurationMaintainingAction.action", {
  77.                                         data: {
  78.                                              equipName:equipName,
  79.                                              wbs:wbs
  80.                                              } ,
  81.                                         handleAs: "json"
  82.                                         }
  83.                                     ).
  84.                                       then(function(data){
  85.                                                              store = new Memory({ data: data.items });
  86.                                                             dataStore = new ObjectStore({ objectStore: store });
  87.                                                             grid.store = dataStore;
  88.                                                             grid._refresh();
  89.                                                             alert("数据删除成功");
  90.                                                         }
  91.                                       );
  92.                                 }
  93.                             }
  94.                            new_button._destroyOnRemove = true;
  95.                            return new_button;
  96.                            }
  97.  
  98.                     on(form, "submit", function(evt){
  99.                         store=null;
  100.                         dataStore=null;
  101.                         equipName=dom.byId("equipName").value;
  102.                         wbs=dom.byId("wbs").value;
  103.                         evt.stopPropagation();
  104.                         evt.preventDefault();
  105.                         request.post("configurationMaintainingAction.action", {
  106.                             data: domForm.toObject("formNode"),
  107.                             handleAs: "json"
  108.                             }
  109.                         ).
  110.                           then(function(data){
  111.                                                  store = new Memory({ data: data.items });
  112.                                                 dataStore = new ObjectStore({ objectStore: store });
  113.                                                 grid.store = dataStore;
  114.                                                 grid._refresh();
  115.                                             }
  116.                           );
  117.                     }
  118.                    );
  119.                 }
  120.             );
  121.         </script>
  122.  
  123.   </head>
  124.  
  125.   <body bgcolor="#bae87c" class="tundra">
  126.       <br />
  127.     <table width="800px" align="center">
  128.         <tr><td>
  129. <!--             <form id="formNode" action="configurationMaintainingAction.action" method="post" id="form1" > -->
  130.         <form id="formNode"  >
  131.                 <fieldset >
  132.                     <legend><font color="red"><b>查询</b></font></legend>
  133.                     <table  width="100%">
  134.                         <tr><td align="center" >系统/设备/部件 <input type="text" name="equipName" id="equipName"/></td>
  135.                             <td align="center">WBS    <select style="width:156px;"  name="wbs" id="wbs">
  136.                                                         <option value="">———————————</option>
  137.                                                         <s:iterator value="wbsNames" var="wbsName">
  138.                                                             <option value="${wbsName}"><s:property value="wbsName" /></option>
  139.                                                         </s:iterator>
  140.                                                     </select>
  141.                             </td>
  142.                         </tr>
  143.                         <tr><td></td><td align="center"><button type="submit"  id="submitButton">查询</button><input type="submit" value="调试查询" /></td>
  144.                     </table>
  145.                 </fieldset>
  146.             </form>
  147.             <br />
  148.             <form>
  149.                 <fieldset >
  150.                     <legend><font color="red"><b>配置信息</b></font></legend>
  151.                      <div id="gridDiv" style="width:100%;height: 200px;" >
  152.                     </div>
  153.                 </fieldset>
  154.             </form>
  155.         </td></tr>
  156.     </table>
  157.   </body>
  158. </html>

效果如下

dojo Datagrid 实现数据删除功能的更多相关文章

  1. Windows服务器的重复数据删除功能

    自从Windows server 2012开始,微软在系统层面提供了重复数据删除功能.重复数据删除是为了文件服务器.虚拟化服务器等设计的.其实只要是存放的文件有大部分内容是相同的就可以发挥很好的效果. ...

  2. 实例：SSH结合Easyui实现Datagrid的批量删除功能

    在我先前的基础上面添加批量删除功能.实现的效果如下 删除成功 通常情况下删除不应该真正删除,而是应该有一个标志flag,但flag=true表示状态可见,但flag=false表示状态不可见,为删除状 ...

  3. 【php增删改查实例】第十二节 - 数据删除功能

    1.单条数据删除 思路:首先,需要也只能允许用户勾选一条数据,然后弹出一个确认框,问用户是否真的要删除?如果是,就把ID传递到PHP,然后写一个delete语句,通过ID去删除即可. 画好了按钮之后, ...

  4. 禁用Windows重复数据删除

    重复数据删除,可以减少磁盘占用,但使用不当也有可能增加IO,另外,也为此功能会将硬盘分块,所以当硬盘占用较高时,进行碎片整理也比较困难,所以有时需要禁用掉重复数据删除功能,并解除重复数据的优化,可以通 ...

  5. Easyui datagrid绑定数据，新增，修改，删除方法(一)

    @{ ViewBag.Title = "UsersList"; } <script type="text/javascript"> $(functi ...

  6. ajax对数据删除、查看详情功能

    运用bootstrap,jquery和ajax显示一些数据,附加删除功能并且点击能弹出模态框详情功能 主页面main.php <!DOCTYPE html PUBLIC "-//W3C ...

  7. Silverlight实例教程 – Datagrid,Dataform数据验证和ValidationSummary（转载）

    Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...

  8. 使用EasyUI实现加入和删除功能

    增删该查是不论什么一个项目都少不了的功能操作.这篇博文主要简单介绍一下怎样使用EasyUI实现加入和删除功能. 首先.导入EasyUI的js代码: <link href="~/Easy ...

  9. dojo DataGrid实现表格数据编辑的解决方案

    在官网上看见的DataGrid编辑非常简单,但我实现的时候总是出现问题.经过N久的摸索,终于搞定了,期间出现了多处困难,下面说些解决办法的流程. 我实现的表格在页面加载时是不显示数据,只有通过表单像服 ...

随机推荐

  1. 解决Detected problems with API compatibility...

    如果是10.3.0那么targetsdk改28.

  2. ubuntu安装nodejs，npm live-server

    sudo apt-get install curl 先安装的是curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/in ...

  3. DOM中offsetLeft与style.left的区别

    offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relat ...

  4. linux 基础命令使用

    Centos中查看系统信息的常用命令 系统日志文件(可以通过cat或tail命令来查看) /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一  ...

  5. ubuntu ssh 与 Samba安装

    ssh 安装:sudo apt-get install openssh-server 确认sshserver是否启动:ps -aux | grep ssh(/etc/init.d/ssh start, ...

  6. JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...

  7. 一道DP

    也是校赛学长出的一道题~想穿了很简单..但我还是听了学长讲才明白. 观察力有待提高. Problem D: YaoBIG’s extra homeworkTime LimitMemory Limit1 ...

  8. The repository 'http://cdn.debian.net/debian stretch Release' is not signed.

    /********************************************************************************* * The repository ...

  9. 【linux基础】使用命令行编译运行c++程序

    前言 在linux系统运行程序,小鹅知道的有3种编译方式,一种是直接命令行编译,一种是使用Cmake,一种是使用脚本文件(*.sh).本文介绍的是使用命令行编译. 使用过程 注意不同系统的编译器版本可 ...

  10. unity 实现调用Windows窗口/对话框交互

    Unity调用Window窗口 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分 ...