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>

效果如下

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. day 21 模块 和 包

    一.模块-----(python代码的文件) 一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 为什么需要模块? 代码的可读性差,且重复的代码多,写代码困难大 ...

  2. Arduino 串口输出LM35温度

    #include "stdlib.h" float temp = 0.0; float maxtemp = 0.0; float mintemp =100.0; // the se ...

  3. python 创建flask项目方法

    Flask是一个基于Python的web框架,它的设计目的是提供Web开发所需的最小功能子集. Flask与别的框架(尤其是采用其他编程语言的框架)的不同之处在于:它没有绑定诸如数据库查询或者表单处理 ...

  4. File类操作中的IOException异常

     代码: File file= newFile("demo"+File.separator+"HelloWorld.txt"); file.createNe ...

  5. 2--linux命令--查看磁盘空间

    du命令用来查看目录或文件所占用磁盘空间的大小.常用选项组合为:du -sh 二.du常用的选项: -h:以人类可读的方式显示 -a:显示目录占用的磁盘空间大小,还要显示其下目录和文件占用磁盘空间的大 ...

  6. XML Schema——笔记整理

    什么是 XML Schema? 定义可出现在文档中的元素 定义可出现在文档中的属性 定义哪个元素是子元素 定义子元素的次序 定义子元素的数目 定义元素是否为空,或者是否可包含文本 定义元素和属性的数据 ...

  7. mac下python安装MySQLdb模块

    参考:http://blog.csdn.net/yelyyely/article/details/41114449 1.调整到anaconda下的python 2.安装有关程序 brew instal ...

  8. Mac电脑使用：您的安全性偏好设置仅允许安装来自App Store和被认可的开发者的应用（解决方法）

    在10ms加速器上下载了MAC客户端ShadowsocksX,打开软件,提示打不开,因为来自身份不明的开发者. 以下为解决办法: Step1:打开dock栏里面的“系统偏好设置” Step2:在系统偏 ...

  9. servlet简单介绍

    什么是Servlet? servlet是一种Java编程语言类,用于扩展托管通过请求 - 响应编程模型访问的应用程序的服务器的功能.尽管servlet可以响应任何类型的请求,但它们通常用于扩展Web服 ...

  10. C5-fasterrcnn-小象cv-code

    1.# Path to Shapes trained weightsSHAPES_MODEL_PATH = os.path.join(ROOT_DIR, "mask_rcnn_shapes. ...