easyui datagrid中datetime字段的显示和增删改查问题
datagrid中datetime字段的异常显示：
使用过easyui datagrid的应该都知道，如果数据库中的字段是datetime类型，绑定在datagrid显式的时候会不正常显示，一般需要借助于formatter来格式化时间格式
{ title: '活动开始时间', field: 'BeginTime', width: 300, editor: { type: 'datetimebox', options: { required: true }, formatter: function (v) { return Common.DateTimeFormatter(v); } } }
Common.DateTimeFormatter的具体实现如下：
var Common = { //EasyUI用DataGrid用日期格式化 TimeFormatter: function (value, rec, index) { if (value == undefined) { return ""; } /*json格式时间转js时间格式*/ value = value.substr(1, value.length - 2); var obj = eval('(' + "{Date: new " + value + "}" + ')'); var dateValue = obj["Date"]; if (dateValue.getFullYear() < 1900) { return ""; } var val = dateValue.pattern("yyyy-MM-dd HH:mm"); return val; }, DateTimeFormatter: function (value, rec, index) { if (value == null || value == '') { return ''; } var dt; if (value instanceof Date) { dt = value; } else { dt = new Date(value); if (isNaN(dt)) { value = value.replace(/\/Date\((-?\d+)\)\//, '$1'); //标红的这段是关键代码，将那个长字符串的日期值转换成正常的JS日期格式 dt = new Date(); dt.setTime(value); } } return dt.pattern("yyyy-MM-dd HH:mm"); }, //EasyUI用DataGrid用日期格式化 DateFormatter: function (value, rec, index) { if (value == undefined) { return ""; } /*json格式时间转js时间格式*/ value = value.substr(1, value.length - 2); var obj = eval('(' + "{Date: new " + value + "}" + ')'); var dateValue = obj["Date"]; if (dateValue.getFullYear() < 1900) { return ""; } return dateValue.pattern("yyyy-MM-dd"); } };
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; }
看着这么多js还是很繁琐的，我这里采用一个小技巧，就是把数据库里的datetime格式的字段类型转化为字符串格式 值不变，但是免去了前端格式化的过程
{ title: '活动开始时间', field: 'BeginTimeStr', width: 300, editor: { type: 'datetimebox', options: { required: true } } }
具体 datetime类型的转化可以在数据库层面或者C#代码层面实现；我这里是在数据库层面进行的转化，然后直接指定的字符串类型的BeginTimeStr作为绑定字段
SELECT ID,ActivityItemID,Created,CONVERT(varchar, EndTime , 20) EndTimeStr, CONVERT(varchar, BeginTime , 20) BeginTimeStr FROM dbo.ActivityItemIDInfo
datagrid RowEdit：
第一步：指定editor
columns: [[
{
title: '链接ID', field: 'ActivityItemID', width: 200, editor: {
type: 'numberbox', options: { required: true }
}
},
{ title: '活动开始时间', field: 'BeginTimeStr', width: 300, editor: { type: 'datetimebox', options: { required: true } } },
{
title: '活动结束时间', field: 'EndTimeStr', width: 300, editor: { type: 'datetimebox', options: { required: true } }
}
]]
第二步定义相应的操作方法：
var editIndex = undefined; function endEditing() { if (editIndex == undefined) { return true } if ($('#ActivityItemIDInfolist').datagrid('validateRow', editIndex)) { var ed = $('#ActivityItemIDInfolist').datagrid('getEditor', { index: editIndex, Field: 'ActivityItemID' }); $('#ActivityItemIDInfolist').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function onClickRow(index) { if (editIndex != index) { if (endEditing()) { $('#ActivityItemIDInfolist').datagrid('selectRow', index).datagrid('beginEdit', index); editIndex = index; } else { $('#ActivityItemIDInfolist').datagrid('selectRow', editIndex); } } } function append() { if (endEditing()) { $('#ActivityItemIDInfolist').datagrid('appendRow', { ActivityItemID: '0' }); editIndex = $('#ActivityItemIDInfolist').datagrid('getRows').length - 1; $('#ActivityItemIDInfolist').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex); } } function removeit() { if (editIndex == undefined) { return; } $('#ActivityItemIDInfolist').datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex); editIndex = undefined; } function accept() { if (endEditing()) { $('#ActivityItemIDInfolist').datagrid('acceptChanges'); } } function reject() { $('#ActivityItemIDInfolist').datagrid('rejectChanges'); editIndex = undefined; } function getChanges() { var rows = $('#ActivityItemIDInfolist').datagrid('getChanges'); alert(rows.length + ' rows are changed!'); }
第三步： 指定编辑行索引的时机，这里把时机和行单击事件关联
第四步：检测datagrid的变化，并把变化通过ajax的方式提交到后台处理
function SaveDataToServer() { endEditing(); var rows = $('#ActivityItemIDInfolist').datagrid('getChanges'); if (rows.length > 0) { var inserted = $('#ActivityItemIDInfolist').datagrid('getChanges', "inserted"); var deleted = $('#ActivityItemIDInfolist').datagrid('getChanges', "deleted"); var updated = $('#ActivityItemIDInfolist').datagrid('getChanges', "updated"); var effectRow = new Object(); if (inserted.length) { effectRow["inserted"] = JSON.stringify(inserted); } if (deleted.length) { effectRow["deleted"] = JSON.stringify(deleted); } if (updated.length) { effectRow["updated"] = JSON.stringify(updated); } $.ajaxtext('/ShopActivitys/SaveShopActivityItemsData', effectRow, function (data) { if (data == 0) { $.messager.alert('保存', "保存成功", 'info'); mygrid.databind(); } else { alert("保存失败,请重试"); } }); } else { alert("没有检测到任何修改"); return; } }
第五步：后台获取到前端Post过来的数据进行入库等相关操作
