Exemple détaillé de jqgrid implémentant une fonction d'édition simple sur une seule ligne

Cet article présente principalement la fonction d'édition simple sur une seule ligne de jqgrid, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

L'exemple de cet article partage le code spécifique pour jqgrid pour implémenter une fonction d'édition simple sur une seule ligne pour votre référence. Le contenu spécifique est le suivant

Code 1.html

<.>

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

2.code de script

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

   function showTable(){
    layer.load(2);
    $("#tableList").jqGrid({ 
     url:&#39;myList.action&#39;,
     mtype: "POST",
     styleUI : &#39;AmazeUI&#39;,
     datatype: "json",
     height:"auto", 
     autowidth:true,
     rownumbers: true,
     multiselect: true,
     colNames:[&#39;id&#39;,&#39;数量&#39;], 
     colModel:[
        {name:&#39;id&#39;,index:&#39;id&#39;,hidden:true},  
        /*实现行编辑功能需要添加属性editable:true,edittype:&#39;text&#39;,其中&#39;text&#39;与input中的type属性对应，
        比如checkbox,radio，password等*/               
        {name:&#39;num&#39;,index:&#39;num&#39;,align: "center",editable: true, edittype: &#39;text&#39;}        
        ], 
       sortable:true,
       sortname:&#39;bc.serialNumber&#39;,
       sortorder:&#39;asc&#39;,
       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(&#39;loading&#39;);
       var page = $(&#39;#tableList&#39;).getGridParam(&#39;page&#39;);
       layer.msg(&#39;第&#39;+page+&#39;页&#39;, {
       time: 1000, //1s后自动关闭
       });
     },
     /*编辑提交时用来对提交的数据进行序列化，如果不添加此属
     性，默认提交的是各个可编辑的字段名值对，后台需要有多个同名
     字段来对应，序列化后，可以只用一个包含各个字段的对象即可接
     收*/
     serializeRowData: function(postdata) {
  return {&#39;entity.id&#39;:postdata.id,&#39;entity.num&#39;: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=$(&#39;#tableList&#39;).jqGrid(&#39;getGridParam&#39;,&#39;selrow&#39;);
    if(id==null)
     {
      return;
     }
    lastId=id; //存放编辑的id
    //调用此方法，使当前行变为可编辑
    $("#tableList").jqGrid(&#39;editRow&#39;, id); 

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

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

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

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

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

  </script>

Recommandations associées :

Comment implémenter la fonction d'édition de base sur une seule ligne

Comment implémenter la fonction d'édition du programme,

Implémentation JS de l'édition pointer-cliquer compétences en code de fonction_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!