您的位置: 首页  >  IT文章  >  easyui datagrid中datetime字段的显示和增删改查问题

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

分类: IT文章 • 2022-03-27 23:37:21

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

datagrid中datetime字段的异常显示：

使用过easyui datagrid的应该都知道，如果数据库中的字段是datetime类型，绑定在datagrid显式的时候会不正常显示，一般需要借助于formatter来格式化时间格式

                  {
                    title: '活动开始时间', field: 'BeginTime',  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");
    }
};
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',  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',  200, editor: {
                        type: 'numberbox', options: { required: true }
                    }
                },
                { title: '活动开始时间', field: 'BeginTimeStr',  300, editor: { type: 'datetimebox', options: { required: true } } },
                {
                    title: '活动结束时间', field: 'EndTimeStr',  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

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

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

第四步：检测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;
    }
}
View Code

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

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

相关推荐