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久的摸索,终于搞定了,期间出现了多处困难,下面说些解决办法的流程. 我实现的表格在页面加载时是不显示数据,只有通过表单像服 ...
随机推荐
- oracle中有关初始化参数文件的几个视图对比
涉及oracle中有关初始化参数文件的几个视图主要有:v$paraemter,v$parameter2,v$system_parameter,v$system_parameter2,v$spparam ...
- 【python】pandas display选项
import pandas as pd 1.pd.set_option('expand_frame_repr', False) True就是可以换行显示.设置成False的时候不允许换行 2.pd.s ...
- idea打包 - 可执行jar包
需求:有一个基于SpringBoot的socket服务端程序,实现了对消息的接收.发送并行操作.此时想要将其构建成可执行的Jar包,执行 java -jar xx.jar后能够进行消息的收发. 分析: ...
- python基础举例应用
将下述两个变量的值交换s1='alex's2='SB's1,s2=s2,s1print(s1,s2) 判断下述结果msg1='alex say my name is alex,my age is 73 ...
- JAVA自动补全代码
打开eclipse(对myeclipse同样适用) 找到窗口(windows)菜单,打开最后一项首选项(Preferences)找到下属菜单java打开,打开里边的编辑器(Editor)菜单,点击内容 ...
- 匿名函数lambda,过滤函数filter,映射类型map
匿名函数lambda, 作用是不用定义函数,用完之后会自动被删掉,在使用执行脚本的时候,使用lambda就可以省下定义函数的过程,简化代码的可读性. 格式是 例子g=lambda x,y:x+y g( ...
- PAT 乙级 1056. 组合数的和(15)
给定N个非0的个位数字,用其中任意2个数字都可以组合成1个2位的数字.要求所有可能组合出来的2位数字的和.例如给定2.5.8,则可以组合出:25.28.52.58.82.85,它们的和为330. 输入 ...
- FZU 2272 Frog 第八届福建省赛 （鸡兔同笼水题）
Problem Description Therearex frogs and y chicken in a garden. Kim found there are n heads and m leg ...
- 2.11 alert\confirm\prompt
2.11 alert\confirm\prompt 前言 不是所有的弹出框都叫alert,在使用alert方法前,先要识别出到底是不是alert.先认清楚alert长什么样子,下次碰到了,就可以用 ...
- Ajax的简单介绍与使用
1.什么是Ajax? Ajax(Asynchronous JavaScript and XML),简单说就是不需要刷新当前页面而实现javaScript和和后台服务器交换数据以更新网页中的部分内容. ...