jqgrid 编辑组合列和绑定数据

Question

我有一个 jqgrid，我在其中使用 custom_element 来格式化显示。

 {
            name: 'PDTime', index: 'PDTime', width: 60, editable: true, formatter: timeSpanHMFormatter, edittype: 'text', editoptions: {
                custom_element: function (value, options) {
                    var elemStr = '<div> <select id="UTTime" name="UTTime" >'

                    for (var i = 0; i < 24; i++) {
                        elemStr = elemStr + '<option value="' + i + '">' + i + '</option>'
                    }
                    elemStr = elemStr + "</select> </div>";
                    return $(elemStr)[0];
                },
                custom_value: function (elem, operation, value) {
                    console.log(elem);

                }
            }
        },

格式化程序是一个显示小时和分钟的时间跨度显示。值 'PDTime' 是一个具有属性 Hours 和 Minutes 的对象。

function timeSpanHMFormatter(cellvalue, options, rowObject) {        
    if (cellvalue.Hours == 0 && cellvalue.Minutes == 0)
        return "";
    var value = "00:00";

    if ( cellvalue.Hours.toString().length == 1 )
        value = "0" + cellvalue.Hours
    else
        value = cellvalue.Hours

    if (cellvalue.Minutes.toString().length == 1)
        value = value + ":0" + cellvalue.Minutes
    else
        value = value + ":" + cellvalue.Minutes

    return value;
}

在查看模式下，单元格看起来像 02:30 等，具体取决于值。我想在编辑模式下将值绑定到这个 PDTime 对象，但我不知道该怎么做。

custom_element 现在创建一个小时下拉列表，我正在尝试将下拉列表选定值绑定到 PDTime.Hours。我怎样才能做到这一点？

Answer 1

从 Guriddo Documentation here 中可以看出，对于自定义元素，需要定义一个 custom_value 函数，并将操作设置为 get。

这里的诀窍是这个事件应该 return 在操作被获取时对象。下面是一个例子：

custom_value: function (elem, oper) {
    if(oper==='get') {
        var hour = $("#UTTime", elem).val();
        // get the minutes according to your definition
        var time = $("#UTTime", elem).val(); 
        return {"Hours" : hour,  "Minutes": time};
    }
},

请注意，当数据posted 到服务器时，PDTime 是一个对象。您可以使用 serializeRowData 事件 (look here) 简化 post returning 一个或多个值。此事件是 jqGrid 事件，您可以这样做：

...jqGrid({
....
    serializeRowData : function( postdata ) {
        var hours = postdata.PDTime.Hours;
        var minutes postdata.PDTime.Minutes;
        posdata.PDTime = hours+":"+minutes;
        // or what you want data combination
        return postdata;
    },
...

jqgrid 编辑组合列和绑定数据

jqgrid edit combined columns and bind data

jquery

jqgrid

jqgrid-asp.net

jqgrid-formatter