dojo Datagrid 实现数据删除功能
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 实现数据删除功能的更多相关文章
- Windows服务器的重复数据删除功能
自从Windows server 2012开始,微软在系统层面提供了重复数据删除功能.重复数据删除是为了文件服务器.虚拟化服务器等设计的.其实只要是存放的文件有大部分内容是相同的就可以发挥很好的效果. ...
- 实例：SSH结合Easyui实现Datagrid的批量删除功能
在我先前的基础上面添加批量删除功能.实现的效果如下 删除成功 通常情况下删除不应该真正删除,而是应该有一个标志flag,但flag=true表示状态可见,但flag=false表示状态不可见,为删除状 ...
- 【php增删改查实例】第十二节 - 数据删除功能
1.单条数据删除 思路:首先,需要也只能允许用户勾选一条数据,然后弹出一个确认框,问用户是否真的要删除?如果是,就把ID传递到PHP,然后写一个delete语句,通过ID去删除即可. 画好了按钮之后, ...
- 禁用Windows重复数据删除
重复数据删除,可以减少磁盘占用,但使用不当也有可能增加IO,另外,也为此功能会将硬盘分块,所以当硬盘占用较高时,进行碎片整理也比较困难,所以有时需要禁用掉重复数据删除功能,并解除重复数据的优化,可以通 ...
- Easyui datagrid绑定数据，新增，修改，删除方法(一)
@{ ViewBag.Title = "UsersList"; } <script type="text/javascript"> $(functi ...
- ajax对数据删除、查看详情功能
运用bootstrap,jquery和ajax显示一些数据,附加删除功能并且点击能弹出模态框详情功能 主页面main.php <!DOCTYPE html PUBLIC "-//W3C ...
- Silverlight实例教程 – Datagrid,Dataform数据验证和ValidationSummary（转载）
Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...
- 使用EasyUI实现加入和删除功能
增删该查是不论什么一个项目都少不了的功能操作.这篇博文主要简单介绍一下怎样使用EasyUI实现加入和删除功能. 首先.导入EasyUI的js代码: <link href="~/Easy ...
- dojo DataGrid实现表格数据编辑的解决方案
在官网上看见的DataGrid编辑非常简单,但我实现的时候总是出现问题.经过N久的摸索,终于搞定了,期间出现了多处困难,下面说些解决办法的流程. 我实现的表格在页面加载时是不显示数据,只有通过表单像服 ...
随机推荐
- 20165326 java第八周学习笔记
第八周学习笔记 知识点总结 1.进程与线程 进程:程序的一次动态执行过程 区别:进程和线程的区别? 进程是资源的分配和调度的一个独立单元,而线程是CPU调度的基本单元 同一个进程中可以包括多个线程,并 ...
- xampp 忘记密码的处理方式.
网上看到一些方法: 大部分是第一种: 方法一 这个方法, 我使用的时候没有生效. -------------- 后来看到另外一种方法 . 直接替换user表的三个文件. 这个方法成功了. xam ...
- for&while循环
流程控制: 1. if 2. while 3. for if判断 什么是if判断 判断一个条件成立则做...不成了则做... 为何要有if判断 让计算机像人一样具有判断的能力 什么是循环 循环指的是一 ...
- python第二天 python介绍与变量
编程语言的分类: 分别为 机器语言,汇编语言,高级语言 所以按照翻译方式又被分为两种 编译型:在代码执行时,需要先进行编译成二进制文件之后,才能够被执行 代表如:c语言,执行速度快,但是调试麻烦 解释 ...
- python day09作业答案
2. def lst(input): lst2=[] count=0 for i in range(0,len(input)): if i %2!=0: lst2.append(input[i]) r ...
- SQL注入之Sqli-labs系列第七篇（基于root权限读写注入）
开始挑战第一关(Error Based- String) 开始之前,先介绍这关需要用到的几个函数,如下图 继续访问我们的地址,输入' “ 一些测试语句发现都没有反应 查看源码,是采用了单引号和双括号 ...
- 数据结构中的列表、元组、字典、集合 ，深浅copy
数据结构:数据结构是计算机存储数据和组织数据的方式.数据结构是指相互之间存在一种或多种特定关系的数据元素的集合.在python中主要的数据类型统称为容器. 而序列(如列表.元组).映射(如字典).集合 ...
- npm 包管理器的使用
1. 权限问题 Warning "root" does not have permission to access the dev dir · Issue #454 · nodej ...
- PHP设计模式之工厂模式（转）
概念 工厂模式是我们最常用的实例化对象模式,是用工厂方法代替new操作的一种模式. 使用工厂模式的好处是,如果你想要更改所实例化的类名等,则只需更改该工厂方法内容即可,不需逐一寻找代码中具体实例化的地 ...
- Java中的面向对象I
一.首先来了解一下Java面向对象的五个程序设计方式: 1.万物皆对象 Java以类为基本模块来将问题抽象化,在计算机中解决实际生活中的问题 2.程序为对象的集合,程序中的类通过互发消息来告知彼此要做 ...