Question

所以我正在使用JQGrid来生成一个表。从数据库读取数据，并通过JSON填充表。呈现表后，所有排序和编辑都在本地完成，直到数据保存到数据库中。我正在使用sortableRows函数，以便我可以拖放和重新排序行;它正在按预期工作，除了我还希望特定列的值根据新订单进行更改。我一直在关注这个例子here，正如我正在尝试做的那样，但是查看源代码并不是很好。我认为它与update()函数有关。

我希望显示顺序列的值从0开始重新编号，以10的倍数为基础，具体取决于行的新顺序。就像在我的例子 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');
            }
        });

    }

});

Answer 1

我认为您需要调用remapColumns函数来执行此操作，作为更新调用的一部分。棘手的部分是根据您描述的用户更改找到新订单的内容。这个新订单作为调用的第一部分传递给数组。见jqgrid documentation

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

JQGrid sortableRows更改排序列值以匹配新订单

1 个答案: