datagrid中實現時間調節

時間調節器擴展

//時間調節器擴展
    $.extend($.fn.datagrid.defaults.editors, {
        timespinner : {
            init : function(container, options) {
                var input = $('<input />').appendTo(
                        container);
                input.timespinner(options);
                return input;
            },
            destroy : function(target) {
                $(target).remove();
            },
            getValue : function(target) {
                var timVal = $(target).timespinner('getValue');//此處是對獲取的時間的轉化，個人需要的時間形式不同，轉化方法也不一樣
                var arr = timVal.split(":");
                return parseInt(arr[0]) * 60 + parseInt(arr[1]);
            },
            setValue : function(target, value) {
                var fmtVal=cgHour(value);//此處是我對時間的轉化，個人傳入的時間形式不同，轉化方法也不一樣
                $(target).timespinner('setValue', fmtVal);
            },
            resize : function(target, width) {
                $(target)._outerWidth(width);
            }
        }
    });
$(function() {
        $('#dg2').edatagrid({
            autoSave : true,
            updateUrl :'後臺保存地址',
            onSuccess : function(index, row) {
                $.messager.show({
                    title : '提示',
                    msg : '保存成功',
                    timeout : 3000,
                    showType : 'slide'
                });
            },
            onError : function(index, row) {
                showError(row.msg);
            }
        });
    });

<table id="dg2" class="easyui-datagrid"
    style="width: 100%; height: auto;"
    data-options="
        onBeforeEdit:test,
        url:'${ctx }/system/listWorkHourByWeek',
        pagination:false,
        fitColumns:true,
        remoteSort:false,
        singleSelect:true,
        border:false">
    thead>
    <tr>
        <th field="weekName" width="10%" align="center">星期</th>
        <th field="workAMStart" width="20%" align="center" formatter="cgHour" editor="{type : 'timespinner',options : {
                valueField:'workAMStart',
                showSeconds:false,
                required : true
                }
                         }">上午上班時間</th>
    <th field="workAMEnd" width="20%" align="center"
        formatter="cgHour" editor="{type : 'timespinner',options : {
                valueField:'workAMEnd',
                showSeconds:false,
                required : true
                 }
                ">上午下班時間</th>
     </tr>
</thead>
</table>