第三方控件获取值问题的解决(附转载的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
这样符合格式规范的时间格式就没有问题了
参考文章:
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
引用参考文档