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添加删除功能(不和数据库交互)的更多相关文章

  1. NGUI-为Popuplist的下拉选项添加删除功能

    NGUI例子里的popuplist是这样的:,但有时我们希望下拉选项都有删除功能,也就是这样:,一种方法是改popuplist的源码,我想这个实现起来不难,但现在我想说的是用反射来实现此功能,以及其他 ...

  2. 实现antd下拉框动态添加内容（与数据库交互）

    antd下拉控件的动态内容添加(与数据库交互) antd这个框架给开发带来了极大的方便,但同时,我认为还有一些不方便的地方:常用的逻辑在文档中没有体现.需要前端开发经验的人才能快速上手,而我刚刚接触这 ...

  3. ajax中网页传输（一）TEXT——带有删除功能的数据库表格显示练习

    网页之间传输的三种方式:TEXT.JSON.XML. 本章将讲解带有TEXT形势的ajax网页传输 第一:body部分代码 <title>ajax中TEXT讲解并且带有删除功能的表格< ...

  4. javascript--select标签的添加删除功能的使用

    在网页开发中,常常遇见这种问题,给定两个框,A和B,和几个图片按钮,A中存在几个操作,点击图片按钮,填加至B中,或者从B中移除等,这种效果如何实现,本文加以总结. 几种效果图如下: 原始图:      ...

  5. Vue 实现todolist的添加删除功能

    直接上代码 vm.$emit( eventName, [-args] ) 触发当前实例上的事件 可选附加参数 传给监听器回调. <style> #app{ margin: 100px; } ...

  6. tableView删除功能小记

    由于项目需要,做一个UITableView来实现删除功能. 效果如图: 功能思路其实不难: 交代一下,我自己要实现的效果: 1.TableView是分组的. 2.点击删除按钮后,某行被删除.   写完 ...

  7. [vs2008]Visual Studio 2008 SP1添加或删除功能提示查找SQLSysClrTypes.msi文件

    前言 今天接到领导布置的一个任务,是之前同事负责的项目.离职了,现在客户有些地方需要修改,由于我之前参与过,就落在我的头上了. 然后我就把代码弄了过来,打开发现其中需要用到水晶报表.(我觉得不好用,不 ...

  8. WPF下的Richtextbox中实现表格合并，添加删除行列等功能

    .Net中已有现在的方法实现这些功能,不过可能是由于未完善,未把方法公开出来.只能用反射的方法去调用它. 详细信息可以查看.Net Framework 的源代码 http://referencesou ...

  9. java 12-3 StringBuffer的添加和删除功能

    1. StringBuffer的添加功能: public StringBuffer append(String str):可以把任意类型数据添加到字符串缓冲区里面,并返回字符串缓冲区本身 public ...

随机推荐

  1. 将字符串序列化Object格式

    using Newtonsoft.Json; 首先引用  Newtonsoft.Json; 定义一个字符串 string str = "[{'ID':8.0,'PAGEID':201.0,' ...

  2. POJ 1414 暴搜

    题意比较复杂 (但是很好理解) 大概意思是给你等边三角形(详见题目中的图). 最后一行有n个数,下一次要填的数是c. 里面预先已经填好了数字.(0为未填) 得分的标准是这个分数的连通块周围没有空的地方 ...

  3. 淘宝druid报错：javax.management.InstanceNotFoundException: com.alibaba.druid:type=DruidDataSourceStat

    问题: 启动tomcat报错: Tomat报出一下异常:ERROR [com.alibaba.druid.stat.DruidDataSourceStatManager] – unregister m ...

  4. 微信小程序，canvas绘图，样式错乱

    问题1:文字样式错乱 使用以下方式分模块绘制, ctx.save()//...ctx.restore() 绘制完后,定时500毫秒再保存图片 ctx.draw(false, () => { se ...

  5. vue2.x directive - 限制input只能输入正整数

    onlyNum.js import Vue from 'vue' //只对input生效 export default function (el) { var input = el; input.on ...

  6. SSH三个主流框架环境的搭建

    part 1  Hibernate环境的搭建 part2  struts2环境的搭建 第一步:从struts2官网下载需要的各种资料和jar包 第二步:在ecplise里面创建web项目,然后在web ...

  7. What is the difference between arguments and parameters?

    What is the difference between arguments and parameters? Parameters are defined by the names that ap ...

  8. runloop源代码

    https://github.com/zzf073/runloopDemo /** *  调度例程 *  当将输入源安装到run loop后,调用这个协调调度例程,将源注册到客户端(可以理解为其他线程 ...

  9. 第三章 Python函数

    函数 如果在开发程序时,需要某块代码多次,但是为了提⾼编写的效率以及代码的重⽤,所以把具有独⽴功能的代码块组织为⼀个⼩模块,这就是函数 函数的定义 函数定义的三种方式:无参函数,有参函数,空函数 #无 ...

  10. Java压缩图片

    阅读目录 前言 压缩的要求 实现 优点 其他功能 前言 作为靠谱的java服务端程序员,图片这个事情一直是个头疼的事情. 现在很多网站上,都有上传图片这个功能,而图片对于现在的很多手机来说,拍摄出来的 ...