jqgrid 编辑组合列并绑定数据答案

【问题标题】：jqgrid edit combined columns and bind datajqgrid 编辑组合列并绑定数据
【发布时间】：2017-12-21 05:56:32
【问题描述】：

我有一个 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。我怎样才能做到这一点？

【问题讨论】：

Opps，edittype: 'custom' not text 在问题中。
您能否更详细地说明您的意思：“在编辑模式下将值绑定到此 PDTime 对象”.. 使用什么编辑模块 - 内联，formedit 的单元格？
我正在使用内联编辑。绑定我的意思是，当我输入 PDTime 的值时，我希望能够将其分配给 PDTime.hours 和 minutes。例如，如果在两个下拉列表中我选择了两个值，一个绑定到 PDTimr.hours，另一个绑定到分钟，这样当我在保存时回发时，我可以访问 PDTimr 对象。
您能否发布完整的 jqGrid 设置和演示数据？ - 即我需要一个例子。您可以为此目的使用 jsfiddle.net（或其他）。谢谢。

标签： jquery jqgrid jqgrid-asp.net jqgrid-formatter

【解决方案1】：

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

这里的技巧是这个事件应该在操作被获取时返回对象。下面是一个例子：

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};
    }
},

请注意，当数据发布到服务器时，PDTime 是一个对象。您可以使用 serializeRowData 事件 (look here) 简化返回一个或多个值的帖子。此事件是 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;
    },
...

【讨论】：