本人做一个名为“安徽中控”项目时，为快速开发基础数据增删改模块，遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中，并且所有增删改查操作都集中于泛型对象，从而不必为每个表写具体的增删改查代码。而在做时间编辑时，因为EasyUI DataGrid本身没有或者缺失时间控件编辑功能(有可能easyui版本低)，需要另外为其扩展。这个过程中出现了一些问题：

1.行进入编辑状态，但时间控件却没有显示出来。

2.行数据是通过后台对象序列化传到前台，因此时间数据格式为"\/Date(1460008088000)\/"，使得时间显示和编辑出现问题。

为了实现行编辑中嵌入时间控件编辑，首先我在网络上查找了一段扩展代码如下：

<script type="text/javascript">//datagrid 时间控件编辑器扩展
$.extend($.fn.datagrid.defaults.editors, {timespinner: {init: function (container, options) {var input = $('<input/>').appendTo(container);input.timespinner(options);return input},getValue: function (target) {var val = $(target).timespinner('getValue');},setValue: function (target, value) {$(target).timespinner('setValue', value);},resize: function (target, width) {var input = $(target);if ($.boxModel == true) {input.resize('resize', width - (input.outerWidth() - input.width()));} else {input.resize('resize', width);}}}
});
//datagrid 时间控件编辑器扩展
$.extend($.fn.datagrid.defaults.editors, {datetimebox: {// datetimebox就是你要自定义editor的名称init: function (container, options) {var input = $('<input class="easyuidatetimebox">').appendTo(container);return input.datetimebox({formatter: function (date) {return new Date(date).format("yyyy-MM-dd hh:mm:ss");}});},getValue: function (target) {return $(target).parent().find('input.combo-value').val();},setValue: function (target, value) {$(target).datetimebox("setValue", value);},resize: function (target, width) {var input = $(target);if ($.boxModel == true) {input.width(width - (input.outerWidth() - input.width()));} else {input.width(width);}}}
});
// 时间格式化
Date.prototype.format = function (format) {/** eg:format="yyyy-MM-dd hh:mm:ss";*/if (!format) {format = "yyyy-MM-dd hh:mm:ss";}var o = {"M+": this.getMonth() + 1, // month"d+": this.getDate(), // day"h+": this.getHours(), // hour"m+": this.getMinutes(), // minute"s+": this.getSeconds(), // second"q+": Math.floor((this.getMonth() + 3) / 3), // quarter"S": this.getMilliseconds()// millisecond};if (/(y+)/.test(format)) {format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));}for (var k in o) {if (new RegExp("(" + k + ")").test(format)) {format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));}}return format;
}; </script>

在扩展之后，我就引入EasyUI插件进行前台编写后进行测试发现时间控件居然显示不出来，我研究很久发现问题在于列宽太小，将原本显示的时间控件按钮遮挡住，于是这个问题通过调整列宽和设置fitColumns: false解决了。 而后发现后台传过来的时间数据格式是"\/Date(1460008088000)\/"不能正常显示，又通过在列初始化中的格式化函数中进行相应的处理(引入了datapattern.js，附加在文章最后)进行处理如下。此处应注意是列的格式化函数而不是列时间控件编辑器的格式化函数里进行处理！

 {field: 'START_TIME', title: '开始时间', width: 150,formatter: function (value, row, index) {var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;//时间格式验证yyyy-M-d h:m:svar r = value.match(reg);if (r == null) {return (eval(value.replace(/\/Date\((\d+)\)\//gi,"new Date($1)"))).pattern("yyyy-MM-dd hh:mm:ss");} else {return value;}},editor: 'datetimebox'//注意此控件只能这么调用否则有大问题,并注意列宽够大并且fitColumns: false}

其中BaseTableHeard.js文件里是公共的对表格初始化设置(附加在文章最后)

<head id="Head1" runat="server"><title></title><link href="../JS/jquery-easyui-1.3.5/themes/default/easyui.css" rel="stylesheet"        type="text/css" />    <link href="../JS/jquery-easyui-1.3.5/themes/icon.css" rel="stylesheet" type="text/css" />    <link href="../Common/BaseTableStyle.css" rel="stylesheet" type="text/css" />    <script src="../JS/jquery-1.8.2.min.js" type="text/javascript"></script>    <script src="../JS/jquery-easyui-1.3.5/jquery.easyui.min.js" type="text/javascript"></script>    <script src="../JS/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>    <script src="../JS/jquery.json.js" type="text/javascript"></script>    <script src="../JS/datapattern.js" type="text/javascript"></script>    <script src="../JS/jquery-easyui-1.3.5/easyExtend.js" type="text/javascript"></script>    <script src="../JS/BaseTableHeard.js" type="text/javascript"></script>    <script type="text/javascript">//初始化查询条件beginfunction initSearch() {$('#btSearch').click(function () {var txtName = $('#txtNM').val();var whereT; //查询条件对象if (txtNM) {whereT = { NM: txtName };}loadGridData(whereT);});}//初始化查询条件end//initGridData方法beginfunction initGridData() {//初始化Grid表格begin$('#gridList').datagrid({fitColumns: false,columns: [[{ field: 'ID', title: '主键', width: 100, hidden: true },{ field: 'NM', title: '班次名称', width: 100, editor: { type: 'validatebox', options: { required: true}} },{ field: 'CD', title: 'CD', width: 100, editor: 'text', hidden: true },{ field: 'CTRL', title: 'CTRL', width: 100, editor: 'text', hidden: true },{ field: 'USED', title: '状态', width: 100,formatter: function (value, row, index) {switch (value) {case 'Y':return '在用'break;case 'N':return '停用'break;default:return '在用'break;}},editor: { type: 'combobox', options: {panelHeight: "auto",valueField: 'key',textField: 'value',data: [{ key: 'Y', value: '在用' }, { key: 'N', value: '停用'}],required: true}}},{field: 'START_TIME', title: '开始时间', width: 150,formatter: function (value, row, index) {var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;//时间格式验证yyyy-M-d h:m:svar r = value.match(reg);if (r == null) {return (eval(value.replace(/\/Date\((\d+)\)\//gi,"new Date($1)"))).pattern("yyyy-MM-dd hh:mm:ss");} else {return value;}},//                                editor: 'datetimebox'//注意此控件只能这么调用否则有大问题,并注意列宽够大并且fitColumns: falseeditor: 'datetimebox'//注意此控件只能这么调用否则有大问题},{field: 'END_TIME', title: '结束时间', width: 150,formatter: function (value, row, index) {if(value!=null){var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;//时间格式验证yyyy-M-d h:m:svar r = value.match(reg);if (r == null) {return (eval(value.replace(/\/Date\((\d+)\)\//gi,"new Date($1)"))).pattern("yyyy-MM-dd hh:mm:ss");} else {return value;}}},editor: 'datetimebox'//注意此控件只能这么调用否则有大问题},{ field: 'SHIFT_NUM', title: 'SHIFT_NUM', width: 100, editor: 'text',hidden:true },{ field: 'ISSEND', title: 'ISSEND', width: 100, editor: 'text' ,hidden:true}]]});//initGridData方法end//加载数据loadGridData(null);}//initialGrid方法end</script></head><body><div class="context"><div class="search">班次名称：<input type="text" id="txtNM" /><a id="btSearch" οnclick="javascript:void(0);" >查询</a></div><div class="list" style="margin: 0px"><table id="gridList"></table><div id="pager"></div></div></div></body>
</html>

附件1：

BaseTableHeard.js

var url = window.location.href;
$(function () {initGridHeader();initGridData();initSearch();});
function initGridHeader() {//初始化Grid表格beginvar tableHeight = $(document).height() - 100;var lastIndex;var editFlag = false;$('#gridList').datagrid({//                url: '/GetPosList.ashx',singleSelect: true,striped: true,height: tableHeight,width: window.document.width,rownumbers: true,checkOnSelect: false,selectOnCheck: false,fitColumns: true,showFooter: true,//      frozenColumns: [[//      { field: 'ck', checkbox: true },//        ]],toolbar: [{text: '新增',iconCls: 'icon-add',handler: function () {$('#gridList').datagrid('endEdit', lastIndex);var rows = $('#gridList').datagrid('getRows'); //获取所有当前加载的数据行var row = rows[rows.length - 1];//不使用原行对象否则会产生关联var newRow = cloneRow(row);newRow.ID = -1;newRow.NM = '';$('#gridList').datagrid('appendRow', newRow);lastIndex = $('#gridList').datagrid('getRows').length - 1;$('#gridList').datagrid('selectRow', lastIndex);$('#gridList').datagrid('beginEdit', lastIndex);
//                var grid = document.getElementById('gridList');
//                grid.scrollBottom = 0;$("#gridList").scrollBottom(0);}}, '-', {text: '删除',iconCls: 'icon-remove',handler: function () {var rows = $('#gridList').datagrid('getSelections');// var checkedRow = $('#gridList').datagrid('getChecked');if (rows.length <= 0) {alert('请选择要删除的记录！');return false;}if (confirm('你确定要删除所选记录吗？')) {if (rows) {for (var i = 0; i < rows.length; i++) {var index = $('#gridList').datagrid('getRowIndex', rows[i]);$('#gridList').datagrid('deleteRow', index);}}var deleteRows = $('#gridList').datagrid('getChanges', 'deleted');var saveArray = [null, deleteRows, null];var saveArrayJson = JSON.stringify(saveArray);$.post(url, { Action: 'save', SaveArray: saveArrayJson }, function (data) {if (data) {loadGridData();alert("删除成功！");} else {alert("删除失败！");}});$('#gridList').datagrid('acceptChanges'); //在前端保存使操作不能回滚}}}, '-', {text: '编辑',iconCls: 'icon-edit',handler: function () {if (editFlag) {//当验证未通过则上一个编辑行不能结束编辑，则editFlag=true$('#gridList').datagrid('selectRow', lastIndex);return;}var seleRow = $('#gridList').datagrid('getSelected');if (seleRow) {var rowIndex = $('#gridList').datagrid('getRowIndex', seleRow);if (lastIndex != rowIndex) {$('#gridList').datagrid('endEdit', lastIndex);$('#gridList').datagrid('beginEdit', rowIndex);}lastIndex = rowIndex;} else {alert('请选择要编辑的记录！');}}}, '-', {text: '保存',iconCls: 'icon-save',handler: function () {var rows = $('#gridList').datagrid('getRows');for (var i = 0; i < rows.length; i++) {$('#gridList').datagrid('endEdit', i); //强制所有行结束编辑}$('#gridList').datagrid('endEdit', lastIndex); //强制结束编辑if (editFlag) {//当验证未通过则上一个编辑行不能结束编辑，则editFlag=true$('#gridList').datagrid('selectRow', lastIndex);return;}debugger;if (isRepeatNM(lastIndex)) {alert('已经存在同名记录!');return false;}var insertRows = $('#gridList').datagrid('getChanges', 'inserted');var deleteRows = $('#gridList').datagrid('getChanges', 'deleted');var updateRows = $('#gridList').datagrid('getChanges', 'updated');var saveArray = [insertRows, deleteRows, updateRows];var saveArrayJson = JSON.stringify(saveArray);$.post(url, { Action: 'save', SaveArray: saveArrayJson }, function (data) {if (data) {alert("保存成功！");loadGridData();//                                window.location.reload();}});$('#gridList').datagrid('acceptChanges'); //在前端保存使操作不能回滚}//        }, '-', {//            text: '撤销',//            iconCls: 'icon-undo',//            handler: function () {//                $('#gridList').datagrid('rejectChanges');//            }}, '-', {text: '刷新',iconCls: 'icon-reload',handler: function () {loadGridData();}}],onBeforeLoad: function () {$(this).datagrid('rejectChanges');},onClickRow: function (rowIndex) {//如非当前编辑行则结束编辑if (lastIndex != rowIndex) {$('#gridList').datagrid('endEdit', lastIndex);}debugger;if (lastIndex && isRepeatNM(lastIndex)) {alert('已经存在同名记录!');}},onBeforeEdit: function (rowIndex, rowData) {editFlag = true;},onAfterEdit: function (rowIndex, rowData, changes) {editFlag = false;}//        ,//        onDblClickRow: function (rowIndex) {//            //如并编辑行则使得编辑行结束编辑(此逻辑已在单击事件处理)//            //双击选中复选框//            var row = $('#gridList').datagrid('getRows')[rowIndex];//            var checkedRow = $('#gridList').datagrid('getChecked');//            var isChecked = false;//            for (var i = 0; i < checkedRow.length; i++) {//                var index = $('#gridList').datagrid('getRowIndex', checkedRow[i]);//                if (index == rowIndex) {//                    isChecked = true;//                }//            }//            if (isChecked) {//                $('#gridList').datagrid('uncheckRow', rowIndex);//            } else {//                $('#gridList').datagrid('checkRow', rowIndex);//            }//        }});
}//loadGridData方法begin
function loadGridData(whereT) {//加载数据var whereTStr = JSON.stringify(whereT);$.post(url, { Action: 'getGridData', Parameters: whereTStr }, function (data) {var json = $.parseJSON(data);$('#gridList').datagrid('loadData', json); //将数据绑定到datagrid   });
}
//loadGridData方法end//判断是否重名begin
function isRepeatNM(lastIndex) {//如名称重复则alert并退回上条进行编辑$('#gridList').datagrid('endEdit', lastIndex);var rows = $('#gridList').datagrid('getRows');var lastRow = rows[lastIndex];//此处lastRow有bug初次加载是lastRow为nullvar isRepeat = false;for (var i = 0; i < rows.length; i++) {if (rows[i].NM && i != lastIndex && rows[i].NM == rows[lastIndex].NM) {isRepeat = true;}}if (isRepeat) {$('#gridList').datagrid('selectRow', lastIndex);$('#gridList').datagrid('beginEdit', lastIndex);}return isRepeat;
}
//判断是否重名end//构造新行对象begin，不使用原型拷贝
function cloneRow(modelRow) {var newRow = {};for (var p in modelRow) {var name = p; //属性名称 var value = modelRow[p]; //属性对应的值 newRow[name] = modelRow[p];}return newRow;
}
//构造新行对象end

附件2：

datapattern.js

/**     * 对Date的扩展，将 Date 转化为指定格式的String     * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符     * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)     * eg:     * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423     * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04     * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04     * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04     * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18     */
Date.prototype.pattern=function(fmt) {        var o = {        "M+" : this.getMonth()+1, //月份        "d+" : this.getDate(), //日        "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时        "H+" : this.getHours(), //小时        "m+" : this.getMinutes(), //分        "s+" : this.getSeconds(), //秒        "q+" : Math.floor((this.getMonth()+3)/3), //季度        "S" : this.getMilliseconds() //毫秒        };        var week = {        "0" : "/u65e5",        "1" : "/u4e00",        "2" : "/u4e8c",        "3" : "/u4e09",        "4" : "/u56db",        "5" : "/u4e94",        "6" : "/u516d"       };        if(/(y+)/.test(fmt)){        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));        }        if(/(E+)/.test(fmt)){        fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);        }        for(var k in o){        if(new RegExp("("+ k +")").test(fmt)){        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));        }        }        return fmt;
}

转载于:https://www.cnblogs.com/menyiin/p/5363707.html

关于EasyUI DataGrid行编辑时嵌入时间控件相关推荐

  1. jqGrid中时间控件input的值赋给点开后的laydate控件

    可以看到上课时间的值是8点-10点 点击时间控件选择时间时,时间控件不会根据已有的时间数据显示默认值,而是显示当前时间? Q:为什么会显示当前时间,怎么解决这个问题? A: 代码如下: getTime ...

  2. elementui时间控件限制可选时间范围(精确到时分秒)

    elementui时间控件限制可选时间范围(精确到时分秒) 我们在开发web端项目时,时间控件用的非常多,限制可选时间也是比较常见的需求,比如已经过去时间不能选,或这未来的时间不可选等,如果仅仅只是限 ...

  3. EasyUI年-月日期格式的日期时间控件+行内编辑的年-月日期格式的日期时间控件

    一.input标签下的easyui-datebox的年月时间格式 1.标签代码 <label style="font-size: 14px;font-family: Microsoft ...

  4. easyui datebox时间控件改为年月视图,值也为年月

    效果图 <span>聘任年度:</span><input id="search-prnd" class="easyui-datebox&qu ...

  5. 给echarts添加筛选时间控件时，控件不显示，并设置数据库无数据时echarts模块显示暂无数据

    给echarts模块添加时间控件时,控件无效,经检查发现,控件被画布遮盖了,需要用一个form标签包括时间控件,否则时间控件不生效.另外,如果echarts从后台获取到的数据为空,需要提示暂无信息.这 ...

  6. VB6.0中，DTPicker日期、时间控件不允许为空时，采用文本框与日期、时间控件相互替换赋值（解决方案）...

    VB6.0中,日期.时间控件不允许为空时,采用文本框与日期.时间控件相互替换赋值,或许是一个不错的选择. 实现效果如下图: 文本框txtStopTime1 时间框DTStopTime1(DTPicke ...

  7. VB6.0中，DTPicker日期、时间控件不允许为空时，采用文本框与日期、时间控件相互替换赋值（解决方案）

    VB6.0中,DTPicker日期.时间控件不允许为空时,采用文本框与日期.时间控件相互替换赋值(解决方案) 参考文章: (1)VB6.0中,DTPicker日期.时间控件不允许为空时,采用文本框与日 ...

  8. Vue elementui时间控件编辑时报错：date.getHours is not a function

    时间控件,这里用了type="datetime",并且设置了格式化, value-format="yyyy-MM-dd HH:mm:ss" <el-for ...

  9. 时间控件-时分秒／分秒／年月日

    做项目的时候,很多时候我们会遇到使用时间控件的部分,下面介绍一个时间控件,---calendar.js,,这个控件是晚上照的,根据需要,把它修改的更加完善了. 首先我们需要引入这些文件: 这个日期控件 ...

最新文章

  1. 496. Next Greater Element I - LeetCode
  2. linux文件给另一用户名和密码错误,linux重命名root后，使用su命令切换新用户时，提示密码错误...
  3. a 标签中调用js的几种方法
  4. linux 下安装部署mq,RocketMQ在linux下安装部署
  5. [转载] pandas将Series变成键值对
  6. Spring学习总结（2）- AOP
  7. 带叉叉的GridView
  8. 图像中有关位图、色位图、以及所占字节数
  9. 软件开发项目人员配置
  10. python量化交易策略实例_Python写一个量化股票提醒系统实例
  11. 腾讯2018秋招笔试真题——安排机器
  12. （混沌系统）图像加密之Logistic混沌映射matlab仿真
  13. 2016年终总结——学生时代的结束、北漂生活的开始
  14. 2012情人节语录1
  15. MyEclipse打不开项目下的jsp文件，或是打开jsp文件报错！
  16. NYOJ - 239 - 月老的难题 ( 二分图最大匹配 匈牙利算法 )
  17. 支付核心研发部 | POS支付系统技术架构解密
  18. Netty关于黏包和半包的处理
  19. pip命令下载第三方依赖的彩色进度条的具体实现
  20. Java代码操作win后台进程

热门文章

  1. 《麦肯锡方法》读完后的千字感悟
  2. 小米网络信号测试软件,小米11信号怎么样_小米11信号测试
  3. 抖音短视频零基础能做到百万粉丝吗？国仁楠哥
  4. 工业人工智能与机器学习_机器学习与第四次工业革命
  5. WebStorm快捷键（附官方pdf）
  6. axure切换焦点文本框样式
  7. 一篇文章带你详细了解注册会计师CPA  财管篇
  8. 杰理AC690X系列---入门（1）
  9. 5 年经验年薪百万，一位阿里 P8 分享自己的成长干货
  10. 电脑数据恢复软件怎么操作呢