집 > 기사 > 웹 프론트엔드 > 간단한 한 줄 편집 기능을 구현한 jqgrid의 자세한 예

간단한 한 줄 편집 기능을 구현한 jqgrid의 자세한 예

小云云원래의: 2017-12-27 09:42:212509검색

이 글은 주로 jqgrid의 간단한 한 줄 편집 기능을 소개하는데, 관심 있는 친구들이 참고하면 도움이 될 것입니다.

이 기사의 예제는 참조용으로 간단한 한 줄 편집 기능을 구현하기 위한 jqgrid의 특정 코드를 공유합니다. 구체적인 내용은 다음과 같습니다

1.html code

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

2.script code

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

간단한 한 줄 편집 기능을 구현한 jqgrid의 자세한 예

관련 기사