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久的摸索,终于搞定了,期间出现了多处困难,下面说些解决办法的流程. 我实现的表格在页面加载时是不显示数据,只有通过表单像服 ...
随机推荐
- 2017-2018-2 20165228 实验四《Android程序设计》实验报告
一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:苏祚堃 学号:20165228 指导教师:娄嘉鹏 实验日期:2018年5月14日 实验时间:13:45 - 3:25 实验序号:实验四 ...
- Jaxb对xml报文头的小修小改
前言: 也是在实际工作中, 借助jaxb来实现xml到java对象的映射转换. 在实际应用中, 也遇到了一些有趣好玩的东西, 权当记录下来. 本文主要讲解jaxb如何生成约定的xml报文头的实现思路, ...
- jupyter notebook远程服务器终端连接
如下图
- 阿里云-centos7.2-LNMP-编译安装-记录
1. 需要使用yum源自动安装的软件: yum -y install autoconf bzip2 bzip2-devel curl curl-devel e2fsprogs e2fsprogs-de ...
- 向指定URL发送GET、POST方法的请求
/** * 向指定URL发送GET方法的请求 * * @param url * 发送请求的URL * @param param * 请求参数,请求参数应该是 name1=value1&name ...
- Web应用 布局
asp.net core系列 44 Web应用 布局 一.概述 MVC的视图与Razor页面经常共享视觉和程序元素,通过使用布局来完成,布局还可减少重复代码.本章演示了以下内容的操作方法:(1)使用通 ...
- mvc core2.1 Identity.EntityFramework Core 实例配置 (四）
https://docs.microsoft.com/zh-cn/aspnet/core/security/authentication/customize_identity_model?view=a ...
- EasyUI datagrid 数据加载
网上找了好多人的方法发现都有问题发一个可用方便的 主要分三种情况 加载1,loaddata 加载2,datagrid 加载3, url 加载 第一部分,datagrid加载 第二部分,点击 datag ...
- MySQL安装配置错误\日常使用错误
1.出现报错---应用程序无法正常启动0xc000007b 安装direct 9.0 安装vc++ 2005 安装vc++ 2008 安装vc++ 2012(x64和x86都要装) 安装 .NET4. ...
- hibernate--DetachedCriteria（离线条件查询）
一.叙述 离线条件查询的好处,可以在非dao层封装查询参数,封装完成后,将对象传递到dao层,关联到session后,再去查询数据,这样做dao层可以极大的简化代码.下面通过一个小案例,一起来感受一下 ...