2014-10-30 27 views
0

因此,我使用JQGrid生成表。数据从数据库中读取,表格通过JSON填充。一旦表格被渲染,所有的排序和编辑都在本地完成,直到数据被保存到数据库中。我正在使用sortableRows函数,以便我可以拖放和重新排序行;它正在按预期工作,除了我还希望根据新订单来更改特定列的值。我一直在关注这个例子here,正如我正在做的那样,但是看着源代码并没有给我带来太多的好处。我相信它与update()函数有关。JQGrid sortableRows更改排序列值以匹配新订单

我希望显示顺序列的值从0开始重新编号,依次取决于行的新顺序。就像在我的例子enter image description here

任何人都可以给我一些正确的方向的见解吗?

这里是我的jqGrid代码:

$(function() { 
    $("#grid").jqGrid({ 
     url:'/WEB_META_CONFIG/meta/record?meta_type=${meta_type}&plan_id=${plan_id}', 
     datatype: 'json', 
     mtype: 'GET', 
     colNames:[ 
        'Display Order', 
        'Field Name', 
        'Field Label', 
        'Meta Type', 
        'Display Control', 
        'plan id', 
        'lov', 
        'rounding formula', 
        'units', 
        'hrms data type', 
        'conversion data type', 
        'modified by', 
        'capability', 
        'field width', 
        'field validation message', 
        'field null string', 
        'field ineligibility tag', 
        'hard validation logic', 
        'hard validation message', 
        'soft validation logic', 
        'soft validation message', 
        'attribute1', 
        'attribute2', 
        'attribute3', 
        'attribute4', 
        'attribute5', 
        'field required', 
        'field length', 
        'field format', 
        //'calculation', 
       ], 
     colModel:[ 
      {name:'display_order',index:'display_order', align:'center', width:'100',sorttype:'int'}, 
      {name:'field_name',index:'field_name', align:'left', editable:true}, 
      {name:'field_label',index:'field_label', align:'left', editable:true}, 
      {name:'meta_type',index:'meta_type', align:'center', width:'60'}, 
      {name:'display_control',index:'display_control', align:'left',editable:true}, 
      {name:'plan_id',index:'plan_id', align:'left',hidden:true}, 
      {name:'lov', index:'lov', align:'left',hidden:true}, 
      {name:'rounding_formula', index:'rounding_formula', align:'left',hidden:true}, 
      {name:'units', index:'units', align:'left',hidden:true}, 
      {name:'hrms_data_type', index:'hrms_data_type', align:'left',hidden:true}, 
      {name:'conversion_data_type', index:'conversion_data_type', align:'left',hidden:true}, 
      {name:'modified_by', index:'modified_by', align:'left',hidden:true}, 
      {name:'capability', index:'capability', align:'left',hidden:true}, 
      {name:'field_width', index:'field_width', align:'left',hidden:true}, 
      {name:'field_validation_message', index:'field_validation_message', align:'left',hidden:true}, 
      {name:'field_null_string', index:'field_null_string', align:'left',hidden:true}, 
      {name:'field_ineligibility_tag', index:'field_ineligibility_tag', align:'left',hidden:true}, 
      {name:'hard_validation_logic', index:'hard_validation_logic', align:'left',hidden:true}, 
      {name:'hard_validation_message', index:'hard_validation_message', align:'left',hidden:true}, 
      {name:'soft_validation_logic', index:'soft_validation_logic', align:'left',hidden:true}, 
      {name:'soft_validation_message', index:'soft_validation_message', align:'left',hidden:true}, 
      {name:'attribute1', index:'attribute1', align:'left',hidden:true}, 
      {name:'attribute2', index:'attribute2', align:'left',hidden:true}, 
      {name:'attribute3', index:'attribute3', align:'left',hidden:true}, 
      {name:'attribute4', index:'attribute4', align:'left',hidden:true}, 
      {name:'attribute5', index:'attribute5', align:'left',hidden:true}, 
      {name:'field_required', index:'field_required', align:'left',hidden:true}, 
      {name:'field_length', index:'field_length', align:'left',hidden:true}, 
      {name:'field_format', index:'field_format', align:'left',hidden:true}, 
      //{name:'calculation', index:'calculation', align:'left',hidden:true}, 
      ], 
     rowNum:10, 
     rowList:[10,20,40], 
     shrinkToFit : true, 
     loadonce: true, 
     gridview: true, 
     //editurl:'/WEB_META_CONFIG/meta/record', 
     cellEdit: true, 
     cellsubmit:'clientArray', 
     height: 'auto', 
     autowidth: true, 
     rownumbers: false, 
     pager: '#pager', 
     sortname: 'display_order', 
     viewrecords: true, 
     sortorder: "asc", 
     caption:"${plan_id} - ${meta_type}", 
     emptyrecords: "Empty records", 
     sortable:true, 
     jsonReader : { 
      repeatitems: false, 

     }, 
     beforeSelectRow : function(rowid) {return false;}, 
     ondblClickRow: function(rowid, iRow,iCol){ 
      $('#grid').editCell(iRow, iCol, true); 
     }, 
    }); 

    $("#grid").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false}); 
    $('#grid').jqGrid('sortableRows', { 
     update:function(ev, ui){ 
      var item = ui.item[0], ri = item.rowIndex, itemId = item.id; 
     } 
    }); 

    $("#grid").navButtonAdd('#pager', 
      { caption:"Save", 
       buttonicon:"ui-icon-disk", 
       onClickButton: save, 
       position: "last", 
       title:"", 
       cursor: "pointer" 
      } 
    ); 

    function save(){ 

     //var data = $('#grid').jqGrid('getRowData'); 
     var data = $('#grid').jqGrid('getGridParam', 'data'); 

     for(var i = 0; i < data.length; i++){ 
      delete data[i]["_id_"]; 
     } 


     $.ajax({ 
      type :"POST", 
      url : "/WEB_META_CONFIG/meta/record/save", 
      contentType: "application/json; charset=utf-8", 
      dataType:"json", 
      data: JSON.stringify(data, function(key, value){ 
            return (value == null) ? "" : value; 
            } 
      ), 
      success: function(){ 
       alert('Save Successfully'); 
      } 
     }); 

    } 

}); 

回答

0

我想你会需要调用函数remapColumns要做到这一点为您更新调用的一部分。棘手的部分是根据您所描述的用户更改来查找新订单的内容。作为调用的第一部分,这个新订单被传递到数组中。见jqgrid documentation

$("#grid").remapColumns([1,3,2],true,false);