easy_UI datagrid view数据格式化
从数据库中提取的信息,有时候需要后期处理一下,easy_ui给了我们很好的一个方法,根据easy_ui生成datagridview的两种方式,下面用两种方式来格式化显示数据信息
1,通过脚本生成的datagridview,这个时候在制定列属性的时候,我们可以添加formatter方法,如下所示
$('#gridTable').datagrid({ title: '系统通知及广告管理', loadMsg:'数据加载中,请稍后……', rownumbers: true, pagination: true, singleSelect: false, pageSize: 10, pageList: [5, 10, 15, 20], fitColumns: true, fit: true, striped: true, nowrap: false, url: 'list.do', idField:'mediaId', columns:[[ {field:'id',checkbox:true}, {field:'system',title:'适用系统'}, {field:'infoType',title:'消息类型', formatter: function(value, row, index){ if(value==1) return "文本"; if(value==2) return "图片"; if(value==3) return "视频"; else return "<span style=\"color:red\" >未知</span>"; }}, {field:'title',title:'标题'}, {field:'content',title:'内容',width:140}, {field:'issueTime',title:'生效时间', formatter:function(value,row,index){ var unixTimestamp = new Date(value); return unixTimestamp.toLocaleString(); } }, {field:'disabledTime',title:'失效时间'}, {field:'userId',title:'用户ID'}, {field:'userName',title:'操作员'} ]],
用这样的方式生成格式化时间和显示内容,
第二种方法,直接生成table,然后给formatter制定方法
<table id="dg" title="用户信息管理" class="easyui-datagrid" style="width:100%;height:95%" url="/sysuser/queryAllUser" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="userId" width="50">用户编号</th> <th field="unitName" width="50">用户单位</th> <th field="userName" width="50">用户名字</th> <th field="lastLoginDate" formatter="jsonTimeStamp" width="50">上次登录时间</th> <th field="isLocked" width="50" formatter="formatlock">是否锁定</th> </tr> </thead> </table>
此时的jsonTimeStamp和formatlock方法如下,将其放入html的scrpits下或者单独做一个common.js
/** * @param value 将用户的状态信息解析为汉字状态信息 * @author lyy * @desc 0-未锁定 1-锁定 */ function formatlock(value){ if(value==0) return "<span style=\"color:green\" >未锁定</span>"; else return "<span style=\"color:red\" >锁定</span>"; } /** * @param milliseconds 要转换的时间豪秒数 * @author lyy * @desc 将毫秒时间转换为2010-1-1 1:1:1这样的格式 */ function jsonTimeStamp(milliseconds) { if (milliseconds != "" && milliseconds != null && milliseconds != "null") { var datetime = new Date(); datetime.setTime(milliseconds); var year = datetime.getFullYear(); var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1; var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate(); var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours(); var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes(); var second = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds(); return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second; } else { return ""; } }