`
想听王力宏的演唱会_萍
  • 浏览: 10514 次
  • 性别: Icon_minigender_2
  • 来自: 宜宾
社区版块
存档分类
最新评论

JQuery easyUI datagrid 远程加载数组时日期对象显示的问题

阅读更多
使用过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)+'日';

这个就看自己咯~
分享到:
评论

相关推荐

    easyui帮助手册datagrid

    9. **loadMsg**:当加载数据时显示的提示信息。 10. **pagination**:分页功能的开关,开启后会在底部显示分页工具栏。 11. **rowNumbers**:显示行号的选项,开启后每行前面会有编号。 12. **singleSelect**:...

    Jquery-easyui的datagrid中文文档

    - **loadMsg**:当从远程站点加载数据时显示的提示信息。默认为“处理中,请稍候…”。这不仅提供了加载状态的反馈,还增强了用户体验。 - **pagination**:布尔值,用于控制是否显示分页工具栏。默认为`false`。...

    JQuery_EasyUI_DataGrid_中文文档

    13. `loadMsg`:字符串类型,当从远程加载数据时,显示的提示信息。默认值为 "Processing, please wait…"。 14. `pagination`:布尔类型,如果设置为 true,会在 DataGrid 底部显示分页工具栏。默认值为 false。 ...

    jquery easyUI datagrit详细说明

    - **loadMsg**:加载数据时显示的提示信息。 - **pagination**:是否启用分页功能。 - **rowNumbers**:是否显示行号。 - **singleSelect**:是否只允许选择一行。 - **pageNumber**:初始化分页的页码。 - **...

    jQuery EasyUI API 中文文档 - DataGrid数据表格

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它为开发者提供了一系列可轻松使用的UI组件,以实现Web界面的快速开发。其中DataGrid组件是一个用于展示表格数据的强大控件,支持分页、排序、过滤、编辑等多种功能。...

    初识通用数据库操作类——前端easyui-datagrid,form(php)

    其中,assoc参数为TRUE时,返回结果为关联数组,否则返回对象。 需要注意的是,文件描述中也提到通用数据库操作类的前端功能不是很完善,按钮之间的逻辑存在一些问题。这可能是由于在实际应用中,开发者需要根据...

    EasyUI-1.Datagrid 数据网格

    Datagrid 提供了一系列的事件,如 `onLoadSuccess`(数据加载成功时触发)、`onClickRow`(点击行时触发)、`onDblClickRow`(双击行时触发)等,开发者可以通过监听这些事件来实现自定义功能。 6. **自定义模板**...

    jquery+easyui文档

    ### jQuery + EasyUI知识点概述 #### 一、Accordion(可折叠标签) Accordion 是一个非常实用的界面组件,常用于创建可折叠的面板区域,能够帮助用户更好地管理网页上的信息展示,提升用户体验。 **1.1 实例** ...

    jQuery+easyui中的combobox实现下拉框特效

    此外,EasyUI的Combobox还支持更多的功能,如加载远程数据、设置默认值、触发事件等,使得下拉框组件更具灵活性和实用性。 例如,通过设置`url`属性,我们可以从服务器动态获取数据: ```html ...

    easyui java系统

    EasyUI 是一个基于 jQuery 的 UI 框架,它提供了丰富的组件和易于使用的 API,使得开发者能够快速构建具有专业外观的 Web 应用程序。在Java环境中,EasyUI 被广泛用于后端数据的展示和交互,尤其适用于构建管理系统...

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    - loadMsg:当远程数据正在加载时显示的信息。 - mode:定义当文本改变时如何加载数据,可以设置为'remote'或'local'。 - filter:当mode设置为'local'时,用来定义如何筛选本地数据的函数。 ComboGrid组件的事件与...

    JEECG UI标签库帮助文档v3.3

    - **easyui**: 引入版本为`jquery.easyui.1.3.1`及自定义扩展JS。 - **DatePicker**: 引入版本为`My97DatePicker4.8Beta2`。 - **jqueryui**: 引入版本为`jquery-ui-1.9.2`。 - **prohibit**: 常用浏览器操作JS...

Global site tag (gtag.js) - Google Analytics