关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为“安徽中控”项目时，为快速开发基础数据增删改模块，遂采用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:s
var 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">
//初始化查询条件begin
function initSearch() {
$('#btSearch').click(function () {
var txtName = $('#txtNM').val();
var whereT; //查询条件对象
if (txtNM) {
whereT = { NM: txtName };
}
loadGridData(whereT);
});
}
//初始化查询条件end
//initGridData方法begin
function 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:s
var 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
editor: '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:s
var 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" onclick="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表格begin
var 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为null
var 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;
}
关于EasyUI DataGrid行编辑时嵌入时间控件的更多相关文章
- easyui datagrid 行编辑功能
datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力. 看一个例子效果图: 代码如下: $('#tt').datag ...
- EasyUI datagrid 行编辑
一.HTML: <div class="info"> <div class="info_tt"> <span class=&quo ...
- easyui datagrid行编辑中数据联动
easyui的datagrid中行内编辑使用数据联动.即:当编辑产品编号时,该行的产品名称自动根据产品编号显示出来. 在编辑中获取当前行的索引 function getRowIndex(target) ...
- 在Gridview编辑时添加DropDownList控件并设置默认值
页面代码: <asp:GridView ID="GridView1" runat="server" AutoGenerateCol ...
- easyui datagrid 批量编辑和提交数据
easyui datagrid 行编辑和提交方,废话就不多说了,直接上代码 <div style="margin: 5px;"> <table id=" ...
- C#--DataGridView添加DateTimePicker时间控件
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Jquery easyui开启行编辑模式增删改操作
Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...
- [转]Jquery easyui开启行编辑模式增删改操作
本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...
- easyui datagrid行合并
easyui datagrid行合并 合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * 参数 colList 要合并的列 ...
随机推荐
- Go Web爬虫并发实现
题目:Exercise: Web Crawler 直接参考了 https://github.com/golang/tour/blob/master/solutions/webcrawler.go 的实 ...
- Arduino 制作截图区域
- ArcGIS Runtime SDK for Android 加载shp数据，中文乱码问题
针对ArcGIS10.2版本的解决办法(默认中文编码为OEM): 现有一个图层名称为“图层.shp”,以此为例: 1.拷贝一个cpg文件,修改名称为“图层.cpg”,并用文本打开cpg文件修改编码为“ ...
- Git 尝试
1,下载Git 2,安装GIt 3,config : git config --global user.name "mxb" git config --global user.em ...
- 基于云开发开发 Web 应用（二）：界面 UI 开发
工作量分析 在我们进行这部分开发的时候,接下来我们需要进行相应的功能安排和分类. 简单看来,我需要开发 3 个页面: 首页:首页负责用户默认访问. 列表页:列表页面则是在搜索过程中,如果有多个结果,则 ...
- 又一种获取redis cluster slots分布的小脚本
需要:昨晚学习了cluster slots命令,之前写的脚本,有可以换种方法获取到redis cluster slots 分布情况. cluster slots的结果如下: 4 5460 5.5.5. ...
- 纪中10日T1 2300. 【noip普及组第一题】模板题
2300. [noip普及组第一题]模板题 (File IO): input:template.in output:template.out 时间限制: 1000 ms 空间限制: 262144 K ...
- Python If&字典 初学者笔记
and 当俩个条件都满足时为True否为False or 任意一个条件满足时为True否为Flase not in 通常用于If语句,用来判断一个元素是否不在某个列表中 banned_user = ...
- nvm，nrm和yarn
nvm Node Version Management nvm list 查看所有已安装的 node 版本 nvm install 版本号 安装指定版本的 node nvm use 版本号 切换到指定 ...
- Ansible Tower 3.5.1 平台部署和破解
原创 Ansible Tower 3.5.1 平台部署和破解 Ansible Tower (以前叫’AWX’)是能够帮助任何IT团队更容易使用Ansible的解决方案.该方案基于web. Tower允 ...