datagrid中实现时间调节

最新推荐文章于 2023-06-09 10:57:07 发布

泡泡菜叶

最新推荐文章于 2023-06-09 10:57:07 发布

阅读量1k

点赞数 1

分类专栏： easyui 文章标签： datagrid easyui 时间微调器

本文链接：https://blog.youkuaiyun.com/u014656173/article/details/53750686

版权

easyui 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在Datagrid组件中整合时间微调器，以实现更精确的时间选择功能，主要涉及EasyUI框架的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

时间调节器扩展

//时间调节器扩展
    $.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>