Detailliertes Beispiel für die Implementierung einer einfachen einzeiligen Bearbeitungsfunktion durch jqgrid

In diesem Artikel wird hauptsächlich die einfache einzeilige Bearbeitungsfunktion von jqgrid vorgestellt, die einen gewissen Referenzwert hat. Ich hoffe, sie kann jedem helfen.

Das Beispiel in diesem Artikel teilt den spezifischen Code für jqgrid, um eine einfache einzeilige Bearbeitungsfunktion als Referenz zu implementieren. Der spezifische Inhalt lautet wie folgt:

1.html-Code

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

2.Skriptcode

<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>

Verwandte Empfehlungen:

Anleitung Implementieren Sie die grundlegende einzeilige Bearbeitungsfunktion

So implementieren Sie die Bearbeitungsfunktion des Lehrplans,

JS-Implementierung der Point-and-Click-Bearbeitung Funktionscode_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Implementierung einer einfachen einzeiligen Bearbeitungsfunktion durch jqgrid. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!