首页 > 代码库 > easyui datagrid中datetime字段的显示和增删改查问题

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 =http://www.mamicode.com/= undefined) {            return "";        }        /*json格式时间转js时间格式*/        value = value.substr(1, value.length - 2);        var obj = eval(‘(‘ + "{Date: new " + value + "}" + ‘)‘);        var dateValue = http://www.mamicode.com/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 =http://www.mamicode.com/= null || value =http://www.mamicode.com/= ‘‘) {            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 =http://www.mamicode.com/= undefined) {            return "";        }        /*json格式时间转js时间格式*/        value = value.substr(1, value.length - 2);        var obj = eval(‘(‘ + "{Date: new " + value + "}" + ‘)‘);        var dateValue = http://www.mamicode.com/obj["Date"];        if (dateValue.getFullYear() < 1900) {            return "";        }        return dateValue.pattern("yyyy-MM-dd");    }};
View Code
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;}
View Code

 看着这么多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) BeginTimeStrFROM 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!‘);}
View Code

 第三步: 指定编辑行索引的时机,这里把时机和行单击事件关联

第四步:检测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 =http://www.mamicode.com/= 0) {                $.messager.alert(‘保存‘, "保存成功", ‘info‘);                mygrid.databind();            } else {                alert("保存失败,请重试");            }        });    }    else {        alert("没有检测到任何修改"); return;    }}
View Code

 

第五步:后台获取到前端Post过来的数据进行入库等相关操作

easyui datagrid中datetime字段的显示和增删改查问题