使用过JQuery easyUI的datagrid组件的朋友都知道,datagrid可以从服务器端加载集合数组显示到页面上。但java.util.Date日期类型的数据却不能像我们期待的那样,显示如‘2016-4-12’等类型的数据,只会显示‘[object]’。那么日期格式转换为指定格式的字符串的问题就需要解决了。
我接触easyUI越深,就越被它的优秀方便快捷而迷倒。当我遇到这个问题的时候,我多次百度寻求答案。然而网上的答案都‘不约而同’的一致。
比如:
easyui datagrid 中序列化后的日期格式化
我以前也是用的链接里的方法,感觉挺繁琐的。
但我今天给查看网络的时候,发现了个新大陆:远程加载集合时,对象的日期类型的属性也是一个对象。我在前台接收到的数据格式如下:
{"rows":[{
"cal_date":{ "date":13,"day":3,"hours":0,"minutes":0,"month":2, "nanos":0, "seconds":0,"time":1363104000000, "timezoneOffset":-480, "year":113 },
"deal_flag_id":"3",
"e_cost":45.9,
"user_id":"010006712"
},{
"cal_date":{"date":12, "day":2,"hours":0,"minutes":0,"month":2,"nanos":0,
"seconds":0,"time":1363017600000,"timezoneOffset":-480,"year":113},
"deal_flag_id":"3",
"e_cost":-46,
"user_id":"010006712"
}],
"total":2
}
在集合里我的cal_date是java.util.Date类型的数据,返回到前台就成了这样的json类型↓
{"date":12,"day":2,"hours":0,"minutes":0,"month":2,"nanos":0,"seconds":0,"time":1363017600000,"timezoneOffset":-480,"year":113}
接下来就简单了啊!
只需要给cal_date字段加formatter属性:
{field : 'cal_date',title : '计费日期',width : 80,align : 'center',
formatter:function(value,rowData,rowIndex){
if(value!=null)
return (value.year+1900)+'-'+(value.month+1)+'-'+(value.date);
else
return "";
}
}
就没问题啦!
O(∩_∩)O哈哈~
PS:根据这个原理,我们可以构建出不同格式的日期来显示,比如:
return (value.year+1900)+'年'+(value.month+1)+'月'+(value.date)+'日';
这个就看自己咯~
分享到:
相关推荐
9. **loadMsg**:当加载数据时显示的提示信息。 10. **pagination**:分页功能的开关,开启后会在底部显示分页工具栏。 11. **rowNumbers**:显示行号的选项,开启后每行前面会有编号。 12. **singleSelect**:...
- **loadMsg**:当从远程站点加载数据时显示的提示信息。默认为“处理中,请稍候…”。这不仅提供了加载状态的反馈,还增强了用户体验。 - **pagination**:布尔值,用于控制是否显示分页工具栏。默认为`false`。...
13. `loadMsg`:字符串类型,当从远程加载数据时,显示的提示信息。默认值为 "Processing, please wait…"。 14. `pagination`:布尔类型,如果设置为 true,会在 DataGrid 底部显示分页工具栏。默认值为 false。 ...
- **loadMsg**:加载数据时显示的提示信息。 - **pagination**:是否启用分页功能。 - **rowNumbers**:是否显示行号。 - **singleSelect**:是否只允许选择一行。 - **pageNumber**:初始化分页的页码。 - **...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它为开发者提供了一系列可轻松使用的UI组件,以实现Web界面的快速开发。其中DataGrid组件是一个用于展示表格数据的强大控件,支持分页、排序、过滤、编辑等多种功能。...
其中,assoc参数为TRUE时,返回结果为关联数组,否则返回对象。 需要注意的是,文件描述中也提到通用数据库操作类的前端功能不是很完善,按钮之间的逻辑存在一些问题。这可能是由于在实际应用中,开发者需要根据...
Datagrid 提供了一系列的事件,如 `onLoadSuccess`(数据加载成功时触发)、`onClickRow`(点击行时触发)、`onDblClickRow`(双击行时触发)等,开发者可以通过监听这些事件来实现自定义功能。 6. **自定义模板**...
### jQuery + EasyUI知识点概述 #### 一、Accordion(可折叠标签) Accordion 是一个非常实用的界面组件,常用于创建可折叠的面板区域,能够帮助用户更好地管理网页上的信息展示,提升用户体验。 **1.1 实例** ...
此外,EasyUI的Combobox还支持更多的功能,如加载远程数据、设置默认值、触发事件等,使得下拉框组件更具灵活性和实用性。 例如,通过设置`url`属性,我们可以从服务器动态获取数据: ```html ...
EasyUI 是一个基于 jQuery 的 UI 框架,它提供了丰富的组件和易于使用的 API,使得开发者能够快速构建具有专业外观的 Web 应用程序。在Java环境中,EasyUI 被广泛用于后端数据的展示和交互,尤其适用于构建管理系统...
- loadMsg:当远程数据正在加载时显示的信息。 - mode:定义当文本改变时如何加载数据,可以设置为'remote'或'local'。 - filter:当mode设置为'local'时,用来定义如何筛选本地数据的函数。 ComboGrid组件的事件与...
- **easyui**: 引入版本为`jquery.easyui.1.3.1`及自定义扩展JS。 - **DatePicker**: 引入版本为`My97DatePicker4.8Beta2`。 - **jqueryui**: 引入版本为`jquery-ui-1.9.2`。 - **prohibit**: 常用浏览器操作JS...