jqgrid实现简单的单行编辑功能

本文实例为大家分享了jqgrid实现简单的单行编辑功能的具体代码,供大家参考,具体内容如下

1.html代码

<table id="tableList" style="text-align:center;"></table>
<div id=tablePager></div>

2.script代码

<script type="text/javascript">
   var lastId;//行编辑时用来存放行的id
   $(function(){
    showTable(); //显示jqgrid表格
    $('.btn-update').click(updateRowData);//编辑按钮
    $('.btn-save').click(saveRowData);//保存按钮添加事件,默认不可用
    $('.btn-cancel').click(cancelRowData);//取消按钮,取消编辑操作
   });

   function showTable(){
    layer.load(2);
    $("#tableList").jqGrid({
     url:'myList.action',
     mtype: "POST",
     styleUI : 'AmazeUI',
     datatype: "json",
     height:"auto",
     autowidth:true,
     rownumbers: true,
     multiselect: true,
     colNames:['id','数量'],
     colModel:[
        {name:'id',index:'id',hidden:true},
        /*实现行编辑功能需要添加属性editable:true,edittype:'text',其中'text'与input中的type属性对应,
        比如checkbox,radio,password等*/
        {name:'num',index:'num',align: "center",editable: true, edittype: 'text'}
        ],
       sortable:true,
       sortname:'bc.serialNumber',
       sortorder:'asc',
       rowNum:10,
     rowList:[10,20,30,90],
     //显示记录数的格式
     recordtext : "记录 {0} - {1} 总记录数 {2}",
     //页数显示格式
     pgtext : "第 {0}页  共 {1} 页",

     viewrecords:true,
     jsonReader: {
       // 数据行(默认为:rows)
       root:"rows",
       repeatitems : false,
       page: "page",   // 当前页
       records:"records", // 总记录数
       total: "total"
     },
     onSelectRow: function(id){

      },
      onSelectAll:function(id){
      },
      //加载完成(初始加载),回调函数
      loadComplete: function(){
       layer.closeAll('loading');
       var page = $('#tableList').getGridParam('page');
       layer.msg('第'+page+'页', {
       time: 1000, //1s后自动关闭
       });
     },
     /*编辑提交时用来对提交的数据进行序列化,如果不添加此属
     性,默认提交的是各个可编辑的字段名值对,后台需要有多个同名
     字段来对应,序列化后,可以只用一个包含各个字段的对象即可接
     收*/
     serializeRowData: function(postdata) {
  return {'entity.id':postdata.id,'entity.num':postdata.num};
       },
     prmNames:
     {rows:"pageInfo.pageSize",page:"pageInfo.page",
     sort:"pageInfo.sidx",order:"pageInfo.sord",
     search: "pageInfo._search"},
     pager:"#tablePager"
    });
   }

   /*编辑行的函数*/
   function updateRowData()
   {
    //获取选中行的id
    var id=$('#tableList').jqGrid('getGridParam','selrow');
    if(id==null)
     {
      return;
     }
    lastId=id; //存放编辑的id
    //调用此方法,使当前行变为可编辑
    $("#tableList").jqGrid('editRow', id); 

    $('.btn-update').attr("disabled",true);//编辑按钮变为不可用
    //保存和取消按钮变为可用
    $('.btn-save').attr("disabled",false);
    $('.btn-cancel').attr("disabled",false);
   }

   /*保存编辑后的数据函数*/
   function saveRowData()
   {
    $("#tableList").jqGrid(
      'saveRow',
      lastId,//获取编辑行的id
      {
       /*成功提交到后台的回调函数*/
       successfunc: function(response) {
         //返回到前台的json字符串

    var data =
    eval('(' + response.responseText + ')');
         if(data.resultCode==0)
          {
         layer.msg("保存成功!",{icon:1});
         //返回true,对前台数据进行更新
           return true;
          }
         else
         {
         layer.msg("保存失败!",{icon:2});
         //返回false,对前台数据不更新
           return false;
         }
        },
        /*提交的请求地址*/
       url:'recoveryTokenUpdate.action',
       /*系统发生异常时的回调函数*/
       errorfunc:function(){

       layer.msg('系统异常!', {time: 2000});
       },
       /*请求类型post*/
       "mtype" : "POST"
      });
    $('.btn-updateToken').attr('disabled',false);
    $('.btn-saveToken').attr('disabled',true);
    $('.btn-cancelToken').attr('disabled',true);
   }

   /*取消编辑函数*/
   function cancelRowData()
   {
    //取消所编辑的行的操作
    $('#tableList').jqGrid('restoreRow', lastId);
    $('.btn-updateToken').attr('disabled',false);
    $('.btn-saveToken').attr('disabled',true);
    $('.btn-cancelToken').attr('disabled',true);
   }

  </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JQGrid的用法解析(列编辑,添加行,删除行)

    复制代码 代码如下: <script> $(document).ready(function(){ initPlsfList();});//初始化grid列表function initPlsfList(){ //缓存表列数组,key 为页面元素的name ,value 对应数据库中的字段 var cellArray = new Array(); cellArray["zoneID"] ="ZONE_ID";  cellArray["factor

  • jqgrid实现简单的单行编辑功能

    本文实例为大家分享了jqgrid实现简单的单行编辑功能的具体代码,供大家参考,具体内容如下 1.html代码 <table id="tableList" style="text-align:center;"></table> <div id=tablePager></div> 2.script代码 <script type="text/javascript"> var lastId;//

  • JavaScript简单表格编辑功能实现方法

    本文实例讲述了JavaScript简单表格编辑功能实现方法.分享给大家供大家参考.具体如下: <html> <head> <script type="text/javascript"> function getInnerHTML() { alert(document.getElementById("tr2").innerHTML); } function insCell() { var x=document.getElementB

  • vue.js实现会动的简历(包含底部导航功能,编辑功能)

    在网上看到一个这样的网站,STRML它的效果看着十分有趣,如下图所示: 这个网站是用 react.js 来写的,于是,我就想着用 vue.js 也来写一版,开始撸代码. 首先要分析打字的原理实现,假设我们定义一个字符串 str ,它等于一长串注释加 CSS 代码,并且我们看到,当 css 代码写完一个分号的时候,它写的样式就会生效.我们知道要想让一段 CSS 代码在页面生效,只需要将其放在一对 <style> 标签对中即可.比如: <!DOCTYPE html> <html&

  • easyui-edatagrid.js实现回车键结束编辑功能的实例

    easyui的可编辑表格并不具备回车事件.这让edatagrid在结束编辑时的操作很麻烦,除非你点击其他行,或者点出表格否则不会取消编辑行. 为了让结束编辑操作更简单些,我为每个单元格添加了回车事件,当回车时结束本行编辑,具体做法是重写edatagrid的onDblClickCell事件,如下: onDblClickCell : function(index, field, value) { if (opts.editing) { $(this).edatagrid('editRow', ind

  • Python简单读取json文件功能示例

    本文实例讲述了Python简单读取json文件功能.分享给大家供大家参考,具体如下: read_json.json: { "rule":{ "namespace":"strategy", "name":"test_exp_1496234234223400", "version":0, "last_modify_time":1434234236819000, "

  • python实现文本进度条 程序进度条 加载进度条 单行刷新功能

    python实现文本进度条 程序进度条 加载进度条 单行刷新功能,具体内容如下所示: 利用time库来替代某个程序 的进行过程,做实例, 思路是,简单打印出来程序进度 单行刷新关键是\r, python默认是print后换行,所以加一个\r是光标回退到之前位置 import time tm=10 print('{:-^18}'.format('开始')) for i in range(tm+1): a='#'*i b='.'*(tm-i) c=(i/tm)*100 print('\r{:^3.0

  • C#实现的简单随机数产生器功能示例

    本文实例讲述了C#实现的简单随机数产生器功能.分享给大家供大家参考,具体如下: 运行效果如下: 具体代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace Math { public parti

  • C#实现的简单整数四则运算计算器功能示例

    本文实例讲述了C#实现的简单整数四则运算计算器功能.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace 计算器 { public pa

  • vue项目中做编辑功能传递数据时遇到问题的解决方法

    在项目中完成编辑功能时,遇到了这样一个问题:编辑的功能使用的是一个子组件作为弹出框,如图 这里涉及到从父组件向子组件传递数据的问题,这个项目使用的是v1.0,问题是当点击了编辑以后,弹出的子组件中没有获取到父组件传过来的数据,检查后没有发现代码错误,最后解决的方法就是在父组件中,把传递的数据中的每一项都初始化了一遍就好了 creatIssue (type,list,id){ this.modelIssue=true; this.modeltype=type; if(type=='creat'){

  • JavaScript基于DOM操作实现简单的数学运算功能示例

    本文实例讲述了JavaScript基于DOM操作实现简单的数学运算功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

随机推荐