jqGrid添加删除功能(不和数据库交互)
jqGrid添加删除功能(不和数据库交互)
一、背景需求
项目中需要在前端页面动态的添加行,删除行,上下移动行等,同时还不和数据库交互。一直在用jqGrid展示表格的我们,从没有深入的研究过它,当然看完我写的文章之后,你会发现虽然实现了,但还是不够深入具体清晰。总之,这只是我实现的一种方式,达到了我的目的,特在此记录下而已。
想要的效果图(其实有出入,这是我做的最终的效果):
二、HTML部分
<html>
<body>
<table id="jqGrid"></table>
<div id="pagerde"></div>
<div style="text-align:right;">
<input type="button" id="up" class="btn btn-primary dropdown-text" value="上移" onclick="btn_up()" />
<input type="button" id="down" class="btn btn-primary dropdown-text" value="下移" onclick="btn_down()" />
<input type="button" id="confirm" class="btn btn-primary dropdown-text" value="保存调整" onclick="btn_confirm()" />
</div>
</body>
</html>
说明:前面的<table><div>两个毋庸置疑必须要有的,最后的<div>是加了几个按钮,用来移动jqGrid的行的。本来想用jqGrid的行拖曳功能来做的,但是没搞出来,无奈只能用这种方法了。
三、添加删除功能要点
1.colModel:
colModel: [
{ label: '', name: '', width: 25, align: 'left' },
{ label: '主键', name: 'Id', hidden: true, },
{ label: '工位编码', name: 'StationCode', width: 80, editable: true, editoptions: { size: 10 } },//editable: true, editoptions: { size: 10 }
{ label: 'VIN码', name: 'VIN', width: 120, editable: true, editoptions: { size: 10 } },//editable: true, editoptions: { size: 10 }
{ label: '车型', name: 'Model', width: 80, editable: true, editoptions: { size: 10 } },//editable: true, editoptions: { size: 10 }
],
想要的效果是点击添加弹出页面,输入内容,提交请求。如下图
研究过程中发现,colModel中必须要有
editable: true, editoptions: { size: 10 }
这两个熟悉,否则虽然能弹出页面,但是没有左边的字段名称。
查询API,对editable的解释是:单元格是否可编辑;对editoptions的解释是:编辑的一系列选项。
好吧,我还是不理解。。。但就是不加就不出来,加上就出来。。。
2.导航栏中添加想要的按钮
$("#jqGrid").jqGrid('navGrid', '#pagerde', {
edit: false,
add: true,
del: true,
search: false,
addtext: "添加",
deltext: "删除",
}, { //EDIT }, {//add
closeAfterAdd: true,
reloadAfterSubmit: true,
afterSubmit: function (response, postdata) {//主要用于显示服务器状态信息(例如,数据成功保存或者被服务器端取消保存的原因)
$.currentWindow().$("#jqGrid").jqGrid('setGridParam', {
}).trigger("reloadGrid");
return [true, '']
},
}, { //DELETE
closeAfterDelete: true,
reloadAfterSubmit: true,
afterSubmit: function (response, postdata) {
$.currentWindow().$("#jqGrid").jqGrid('setGridParam', {
}).trigger("reloadGrid");
return [true, '']
},
}, {//SEARCH });
需要哪个按钮就把那个按钮设置为true,并设置按钮显示的名称,最后几个{}是分别对应上面按钮的方法:方法中我只用了三个属性,closeAfterAdd(closeAfterDelete),reloadAfterSubmit,afterSubmit,分别是添加删除后关闭页面,提交后重新加载,提交后的操作(好像有点冲突的意思,可以自己试试去掉一个)
3.添加editurl
editurl: "/PM/QueueAdjustment/EditQO_T2_ListRow",
说明:前端就这三个要点
四、后台控制层部分
1.首先页面要先重数据库查询出数据,由于我要做的添加删除操作是不和数据库交互的,因此,我把起始查出来的数据放到了session中,以后的添加删除都是对session中的数据做操作。
//查询QO_T2_List表
public ActionResult getQO_T2_List()
{
//1.先从session中查询是否有数据
List<Entities.QO_T2_List> list = (List<Entities.QO_T2_List>)Session["QO_T2_List"];
//2.如果没有,去数据库查询,并放到session中
if (list == null || list.Count == )
{
Session["QO_T2_List"] = this.CreateService<IQueueAdjustmentAppServices>().GetDataList();
//重新重session中获取一下数据,返回到前端页面展示
List<Entities.QO_T2_List> list2 = (List<Entities.QO_T2_List>)Session["QO_T2_List"];
return Content(list2.ToJson());
}
//如果有,直接返回到前端页面展示
else
{
return Content(list.ToJson());
}
}
//调整QO_T2_List表
[HttpPost]//这个必须要有,因为是表单请求(或者在前端指明post请求)
public ActionResult EditQO_T2_ListRow()
{
//1.从session中获取数据
List<Entities.QO_T2_List> list2 = (List<Entities.QO_T2_List>)Session["QO_T2_List"];
//2.获取请求信息
NameValueCollection forms = Request.Form;
//3.获取请求信息的oper[add,del,edit]
string strOperation = forms.Get("oper");
//4.如果为add添加操作执行以下方法
if (strOperation == "add")
{
//4.1获取请求信息中的字段值
string StationCode = forms.Get("StationCode");
string VIN = forms.Get("VIN");
string Model = forms.Get("Model");
//string ScanTime = forms.Get("ScanTime");
//4.2新建一个实体类,并给实体类各属性赋值
Entities.QO_T2_List entity = new Entities.QO_T2_List();
entity.StationCode = StationCode;
entity.VIN = VIN;
entity.Model = Model;
//entity.ScanTime = Convert.ToDateTime(ScanTime);
entity.Id = Guid.NewGuid().ToString("N");
entity.CreationTime = DateTime.Now;
entity.CreateUserId = Guid.NewGuid().ToString("N");
entity.IsDeleted = false;
entity.IsEnabled = true;
//4.3将此实体类添加到session中
list2.Add(entity);
}
//5.如果为del删除操作执行以下方法
if (strOperation == "del")//{EmpId=false&oper=del&id=3}
{
//5.1获取请求信息中要删除行的行号(id)
string id = forms.Get("id");
for (int i = ; i < list2.Count; i++)
{
if ((i+).ToString() == id)
{
//5.2先将要删除的数据放到QE_ErrorList表中
this.CreateService<IQueueAdjustmentAppServices>().SaveToErrorListTable("QO_T2_List", list2[i]);
//5.3再删除session中数据
list2.Remove(list2[i]);
}
}
}
//6.编辑完后返回session中的数据到前端展示
return Content(list2.ToJson());
}
//保存QO_T2_List调整
public ActionResult SaveQO_T2_ListRow()
{
//1.从session中获取数据
List<Entities.QO_T2_List> list2 = (List<Entities.QO_T2_List>)Session["QO_T2_List"];
//2.删除数据库中的数据
this.CreateService<IQueueAdjustmentAppServices>().DeleteTableDate("QO_T2_List");
//3.遍历session中的数据,重新添加到表QO_T2_List中
foreach (Entities.QO_T2_List item in list2)
{
this.CreateService<IQueueAdjustmentAppServices>().SaveQO_T2_ListRow(item);
}
return Success("保存成功");
}
五、后台实现层部分就是和数据库的交互了(略)。
jqGrid添加删除功能(不和数据库交互)的更多相关文章
- NGUI-为Popuplist的下拉选项添加删除功能
NGUI例子里的popuplist是这样的:,但有时我们希望下拉选项都有删除功能,也就是这样:,一种方法是改popuplist的源码,我想这个实现起来不难,但现在我想说的是用反射来实现此功能,以及其他 ...
- 实现antd下拉框动态添加内容(与数据库交互)
antd下拉控件的动态内容添加(与数据库交互) antd这个框架给开发带来了极大的方便,但同时,我认为还有一些不方便的地方:常用的逻辑在文档中没有体现.需要前端开发经验的人才能快速上手,而我刚刚接触这 ...
- ajax中网页传输(一)TEXT——带有删除功能的数据库表格显示练习
网页之间传输的三种方式:TEXT.JSON.XML. 本章将讲解带有TEXT形势的ajax网页传输 第一:body部分代码 <title>ajax中TEXT讲解并且带有删除功能的表格< ...
- javascript--select标签的添加删除功能的使用
在网页开发中,常常遇见这种问题,给定两个框,A和B,和几个图片按钮,A中存在几个操作,点击图片按钮,填加至B中,或者从B中移除等,这种效果如何实现,本文加以总结. 几种效果图如下: 原始图: ...
- Vue 实现todolist的添加删除功能
直接上代码 vm.$emit( eventName, [-args] ) 触发当前实例上的事件 可选附加参数 传给监听器回调. <style> #app{ margin: 100px; } ...
- tableView删除功能小记
由于项目需要,做一个UITableView来实现删除功能. 效果如图: 功能思路其实不难: 交代一下,我自己要实现的效果: 1.TableView是分组的. 2.点击删除按钮后,某行被删除. 写完 ...
- [vs2008]Visual Studio 2008 SP1添加或删除功能提示查找SQLSysClrTypes.msi文件
前言 今天接到领导布置的一个任务,是之前同事负责的项目.离职了,现在客户有些地方需要修改,由于我之前参与过,就落在我的头上了. 然后我就把代码弄了过来,打开发现其中需要用到水晶报表.(我觉得不好用,不 ...
- WPF下的Richtextbox中实现表格合并,添加删除行列等功能
.Net中已有现在的方法实现这些功能,不过可能是由于未完善,未把方法公开出来.只能用反射的方法去调用它. 详细信息可以查看.Net Framework 的源代码 http://referencesou ...
- java 12-3 StringBuffer的添加和删除功能
1. StringBuffer的添加功能: public StringBuffer append(String str):可以把任意类型数据添加到字符串缓冲区里面,并返回字符串缓冲区本身 public ...
随机推荐
- 由GPS坐标计算半径
在实际应用当中,一般是通过一个个体的编码来查找该编码对应的地区中心的经纬度,然后再根据这些经纬度来计算彼此的距离,从而估算出某些群体之间的大致距离范围(比如酒店旅客的分布范围-各个旅客的邮政编码对应的 ...
- c++面向对象程序设计 谭浩强 第五章答案
1: #include <iostream> using namespace std; class Student {public: void get_value() {cin>&g ...
- 如何在maven项目中使用spring
今天开始在maven项目下加入spring. 边学习边截图. 在这个过程中我新建了一个hellospring的项目.于是乎从这个项目出发开始研究如何在maven项目中使用spring.鉴于网上的学习资 ...
- Caffe solver.prototxt学习
在solver解决下面的四个问题: a.训练的记录(bookkeeping),创建用于training以及test的网络结构: b.使用前向以及反向过程对training网络参数学习的过程: c.对t ...
- C#、SQL中的事务
c#方法一: TransactionOptions transactionOption = new TransactionOptions(); //设置事务隔离级别 transactionOption ...
- java/javascript 时间操作工具类
一.java 时间操作工具类 import org.springframework.util.StringUtils; import java.text.ParseException; import ...
- JavaScript DOM编程艺术(第2版)学习笔记2(4~6章应用实例)
本书的第4章使用第3章学到的操作DOM的方法和属性写了一个展示图片的网页,并在第5,6章对代码进行了优化. 第一版,搭建网页的静态结构,包括一级标题<h1>,无序列表清单<ul> ...
- C语言“%”运算符
C语言中运算符“%”是取余运算符,而非取模运算符.(运算符“%”在C/C++, JAVA中,为取余运算,而在Python中为取模运算) 对于一个C语言取余表达式a % b,设其值为result,有如下 ...
- 01《UML大战需求分析》阅读笔记之一
在大二的时候就已经在课堂上对UML也就是统一建模语言有了初步的了解,但是却不怎么明白,虽然可以画图可以完成任务,但是有些糊里糊涂.所以特地把这门书作为精读书籍,想要更加深度地学习UML.很多内容只用语 ...
- React-setState源码的理解
首先举一个最简单的例子: this.state={ a:1 } this.setState({ a:2 }) console.log(this.state.a)//1 可以说setState()操作是 ...