分享

JQgrid要实现在jqGrid表格上动态的加行、删行,最后点击“保存”按钮,与后台交互,保存数据

 quasiceo 2017-08-18


var lastFlag ;
   $gridTable = $("#gridTable").jqGrid( {
        datatype : 'json',
        colNames : ['age', 'sex' ],
        colModel : [ 
                   {name : 'age',index : 'age',width : 80,editable:true,edittype:'text',editrules:{required:true}}, 
                   {name : 'sex',index : 'sex',width : 160,editable:true,edittype:'text',editrules:{required:true}} 
                   ],
        rowNum : 10,
        pager : "#tablePager",
        multiselect : false,
        viewrecords : true,
        sortorder : "desc",
        jsonReader : {
            root : "dataRows",
            repeatitems : false
        },
        caption : "数据列表",
        height : "auto",
        rownumbers : true,
      onSelectRow : function(id){
        if(id && id!=lastFlag){
         $('#gridTable').jqGrid('saveRow',lastFlag);      
         lastFlag=id;
        }
        $('#gridTable').jqGrid('editRow',id,true); 

      },   
     editurl : "../propManage.do?method=doNothing"        
    })

  

    /** 设置增行按钮的click事件处理 */
    $("#addButton").bind("click", function() {
     var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); 
        var dataRow = {  
            age: "",
            sex: ""
        };    
        var ids = jQuery("#gridTable").jqGrid('getDataIDs');
        var rowid = getMaxId(ids) + 1;
        if (selectedId) {         
            $("#gridTable").jqGrid("addRowData", rowid, dataRow, "after", selectedId);
        } else {  
            $("#gridTable").jqGrid("addRowData", rowid, dataRow, "last");     
        }       
    })
   

    /** 设置删行按钮的click事件处理 */
    $("#removeButton").bind("click", function() {
     var selectedId = $("#gridTable").jqGrid("getGridParam","selrow"); 
     if(!selectedId){
        alert("请选择要删除的行");
        return;
     }else{           
         $("#gridTable").jqGrid("delRowData", selectedId);      
     } 
    })

  

问题1:JQGRID  编辑模式下怎样取行数据?

  用户操作模拟:用户新增一行,鼠标点进去,该行进入编辑状态,填写数据,点击保存。

  问题出现了: 点击保存以后,需要通过getRowData()获取表格里的数据传回后台,但是当行在编辑状态下时,getRowData()取得的值为类似<input ....></input> 的html标签,不是编辑框中输入的值。

  解决途径:

  alert getRowData()获取出的数据,你会发现<input>标签的id是5_age, 6_age之类的,也就是行id+“_colModel name”,这就好办了,

  做法就是找到编辑行的单元格的id,然后得到单元格里的内容,通过"setRowData"将其保存起来,然后再通过getRowData()取值。

  示例:

     var selectedId = $('#gridTable').jqGrid("getGridParam", "selrow");
     var ageId = selectedId + "_age";
     var sexId = selectedId + "_sex";    
     var age= $('#'+ageId).val();
     var sex= $('#'+sexId).val();    
   $('#gridTable').jqGrid('setRowData',selectedId,{age:age,sex:sex},'');  

  再通过getRowData()取值,结果正确。


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多