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 ...
随机推荐
- 浅谈for循环
for循环 <script> /* ** (1) 是执行代码块之前 ** (2) 运行代码块的条件 ** (3) 需要执行的代码块 ** (4) 代码块执行后执行 ** 执行顺序是(1)( ...
- extjs 与html相结合 自定义
http://skirtlesden.com/articles/html-and-extjs-components
- 网易NAPM Andorid SDK实现原理--转
原文地址:https://neyoufan.github.io/2017/03/10/android/NAPM%20Android%20SDK/ NAPM 是网易的应用性能管理平台,采用非侵入的方式获 ...
- IIS之虚拟目录学习
从刚实习开始就了解到虚拟目录这个词,但是一直没去研究过什么意思,而且也没实际用过.一晃两年过去了,今天正好趁休息,补补脑学习下. 通过百度了解到,虚拟目录创建的目的是为了应对磁盘容量爆满,部署的网站不 ...
- onTouchEvent事件
@Override public boolean onTouchEvent(MotionEvent event) { if(event.getAction() == MotionEvent.ACTIO ...
- swift使用查阅资料备份3
自主学习之RxSwift(二) -----flatMap https://blog.csdn.net/chelongfei/article/details/50995603 RxSwift 系列(九) ...
- Day73-CMDB（资产管理采集）的三种实现方式
# 采集数据 import subprocess import requests ret = subprocess.getoutput('ipconfig') # print(ret) # 正则处理获 ...
- Lumen5.5，使用laravel excel 下载 、导入excel文件
1.安装 首先是安装laravel excel,使用composer安装 composer require maatwebsite/excel ~2.1.0 2.配置 在bootstrap/app.p ...
- zTree -- jQuery 树插件实现点击文字展开子节点
新版本的zTree是单击+号展开子项,点击文字选中该项,双击文字展开子项 项目用的是3.5版本的,如果要点击文字展开子项暂时没查到资料,自己琢磨了下 项目用的是jquery.ztree.core-3. ...
- docker images镜像无法删除
删除所有容器: docker rm $(docker ps -aq) 删除镜像: docker rmi $(docker images -q) 如果有镜像无法删除,有可能更改了名字,用docker r ...