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久的摸索,终于搞定了,期间出现了多处困难,下面说些解决办法的流程. 我实现的表格在页面加载时是不显示数据,只有通过表单像服 ...
随机推荐
- 2019-03-14-day010-函数进阶
昨日回顾 1.函数: 函数的定义 函数的参数 位置参数 关键字参数 混合参数 形参的位置上(默认参数) 实参的位置上(关键字参数) 位置参数 > 默认参数 三元运算符: c = a if a&g ...
- 【转载】 【caffe转向pytorch】caffe的BN层+scale层=pytorch的BN层
原文地址: https://blog.csdn.net/u011668104/article/details/81532592 ------------------------------------ ...
- Win2003可用序列号(标准版与企业版)
通用性好的win2003序列号: (推荐先用这个里面的)FJ8DH-TQPYG-9KFHQ-88CB2-Y7V3Y GRD4P-FTQQF-JCDM8-4P6JK-PFG7M JD7JX-KCDTH- ...
- linux测试系统使用expdp迁移数据到windos系统,11.2.0.4版本测试
测试,使用linux 系统,迁移至windos测试系统,迁移用户scott 1.源端导出(linux) 2.传输 3.目标端导入(windows) 1.源端导出,本次使用expdp 1)创建操作系统转 ...
- EtherNet/IP 基本信息
/********************************************************************************* * EtherNet/IP 基本信 ...
- 复杂的动态布尔表达式性能评估(2)--Groovy实现
前言: 规则引擎中, 往往涉及到多个条件构成了复杂布尔表达式的计算. 对于这类布尔表达式, 一是动态可变的(取决于运营人员的设定), 二是其表达式往往很复杂. 如何快速的计算其表达式的值, 该系列文章 ...
- cat命令合并多个txt文件
cat是concatenate的缩写,意为串联,之前经常看到别人在用cat命令,没有细究 cat命令两个常用的用法是: cat file.txt能够将txt中的内容显示出来 cat file1.txt ...
- 九度OJ1450题-产生冠军-MAP的使用
题目1450:产生冠军 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:2839 解决:1161 题目描述: 有一群人,打乒乓球比赛,两两捉对撕杀,每两个人之间最多打一场比赛.球赛的规则如 ...
- K - FatMouse and Cheese
最近一直在写dp,然后别的就啥也不管了(wtcl),很明显的最简单的搜索题竟然卡了,一开始的思路是每一个格子都只能是从四周的格子转化过来的,只要找到四周最大的那个那么dp[i][j]=max+a[i] ...
- Javascript 标准参考教程
http://javascript.ruanyifeng.com/grammar/array.html