天天看點

jqGrid取值問題表格動态的加行,删除行,儲存

最近用jqGrid 做個功能,要實作在jqGrid表格上動态的加行、删行,最後點選“儲存”按鈕,與背景互動,儲存資料。例:

   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"       

    })

    $("#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");    

        }      

    })

    $("#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()取值,結果正确。