第三方控件获取值问题的解决(附转载的easyUI datagrid 时间格式化(两种))


在.net开发过程中,经常会有使用第三方控件的情况,但是在使用过程中,却有时候会获取不到使用控件的值。
那么问题是出在什么地方呢?
下面我用自己遇到的实际情况来做一下演示,希望对大家有所帮助。

我做的是一个学校卫生管理系统。使用的是easyui中的DateBox(日期输入框)控件,
1、使用标签创建日期输入框。

<input  id="dd"  type= "text" class= "easyui-datebox" required ="required"> </input>   

2.在初次加载中添加

 $('#dt').datetimebox({
            hailgn: 'center',
            align: 'center',
            width: 200,
            required: true,
            showSeconds: false
        });

3、但在修改时,却获取不到日历的值,
这里写图片描述

4、在检查前台数据和后台传输数据后,排除了获取不到值得情况。
最后检查了前台控件,发现了问题。

<input id="dt" type="text" name="C_date" class="easyui-validatebox" required="true">

后台传输将input控件变成了其他形式
这里写图片描述

5,解决方法如下:
解决前:

  url: "@Url.Action("GetOne")" + "?id=" + rows[0].C_ID,
                dataType: "json",
                type: "POST",
                success: function (data) {
                    if (data.state == "1") {
                        $("#dptdialog input[name='C_name']").val(data.data.C_name);
                        $("#dptdialog input[name='C_age']").val(data.data.C_age);
                        $("#dptdialog input[name='C_date']").val(data.data.C_date);

解决后:

success: function (data) {
                    if (data.state == "1") {
                        $("#dptdialog input[name='C_ID']").val(data.data.C_ID);
                        $("#dptdialog input[name='O_shoppname']").val(data.data.O_shoppname);
                        $("#dptdialog input[name='O_price']").val(data.data.O_price);
                        $("#dptdialog input[name='O_num']").val(data.data.O_num);
                        $("#dt").datetimebox('setValue', data.data.O_date);

具体方法:将前边的#dptdialog input[name=’C_date’],转换成了初次加载中的dt
以防止不可变的第三方控件转化
并引用了easyui中的setValue方法,来更好地获取当前值。

easyUI datagrid 时间格式化(一)

解决前台显示时间格式混乱,附有没有意思的T获取00.00等的情况,
在前端解决问题的解决方法
1,创建JavaScript文件,扩展Date的功能

Date.prototype.format = function (format) {  
    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;  
}  
function formatDatebox(value) {  
    if (value == null || value == '') {  
        return '';  
    }  
    var dt;  
    if (value instanceof Date) {  
        dt = value;  
    } else {  
        dt = new Date(value);  
    }  

    return dt.format("yyyy-MM-dd"); //扩展的Date的format方法(上述插件实现)  
}  

2、在前台使用时间显示的页面进行调用(easyUI datagrid 中)

$('#datagridDemo1').datagrid({  
    ……  
    columns: [[  
            { field: 'CreateDate', title: '创建日期', width: 120,align: 'center',formatter: formatDatebox},  
            ……  
        ]]      
});  

我使用调用的是在原有日历控件初次加载中添加formatter: formatDatebox

这样符合格式规范的时间格式就没有问题了

参考文章:

http://blog.csdn.net/leftfist/article/details/44179047

easyUI datagrid 时间格式化(二)(摘录)

1、适用的问题
适用于以下格式
这里写图片描述

2、创建JS文件

function DateTimeFormatter(value) {
    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.format("yyyy-MM-dd hh:mm:ss");
}

3、引用:field中添加 formatter: DateTimeFormatter

引用参考文档

http://www.cnblogs.com/changyou7/p/6228860.html

posted on 2017-06-27 16:59  Grant-fu  阅读(182)  评论(0编辑  收藏  举报

导航