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. Day8作业及默写

    1,有如下文件,a1.txt,里面的内容为: 老男孩是最好的培训机构, 全心全意为学生服务, 只为学生未来,不为牟利. 我说的都是真的.哈哈 分别完成以下的功能: 将原文件全部读出来并打印. with ...

  2. Python 数据结构--排序

      各种排序的时间复杂度和空间复杂度   以下 冒泡排序,选择排序,插入排序,合并排序,快速排序,希尔排序   1 冒泡排序(Bubble Sort) 冒泡排序(Bubble Sort)是一种简单的排 ...

  3. [BUG]数据库日期格式, 到页面是毫秒值

    springboot 配置文件

  4. POWER BI报表服务器混合云初了解

    Power BI报表服务器 购买Power BI Premium时,你可以获取2个产品,一个是Power BI Service另外一个是Power BI Report Server. Power BI ...

  5. SSM整合框架实现ajax校验

    SSM整合框架实现ajax校验   刚学习了ssm框架,ajax校验成功,分享下 1.导入jar包

  6. spring boot项目，application.properties配置文件下中文乱码解决方案

    转自:https://blog.csdn.net/qq_40408534/article/details/79831807 如以上,application.properties文件下中文乱码.发生乱码 ...

  7. 深入理解Java中的多态

    一.什么是多态? 多态指同一个实体同时具有多种形式.它是面向对象程序设计(OOP)的一个重要特征.如果一个语言只支持类而不支持多态,只能说明它是基于对象的,而不是面向对象的. 二.多态是如何实现的? ...

  8. 运放积分电路MULTISIM

    有些需要反馈回路

  9. leetcode227. Basic CalculatorII

    这道题是只有四则运算但是没有括号的,因此可以利用stack来存储的,并且每次使得存储的值与符号有对应的关系,最后在栈中只剩下可以利用加法进行处理的数的,注意在i=n-1的时候到达最后的部分也是需要把数 ...

  10. 导出文件为excle

    handleOutPut() { const searchData=this.state.searchData; let url = commonData.baseMerchantUrl + &quo ...