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


Posted in Javascript onSeptember 30, 2017

本文实例为大家分享了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>

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

Javascript 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 #Javascript
js实现数组和对象的深浅拷贝
Sep 30 #Javascript
node通过express搭建自己的服务器
Sep 30 #Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 #Javascript
详解在Vue中有条件地使用CSS类
Sep 30 #Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 #Javascript
vue按需引入element Transfer 穿梭框
Sep 30 #Javascript
You might like
example2.php
2006/10/09 PHP
php基础知识:类与对象(5) static
2006/12/13 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
matplotlib绘制动画代码示例
2018/01/02 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python实现文件的分割与合并
2019/08/29 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
解决python运行启动报错问题
2020/06/01 Python
哪些是python中web开发框架
2020/06/17 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
解除劳动合同协议书范本
2014/09/13 职场文书
首席执行官观后感
2015/06/03 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA