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 "";
    }
}

 

posted @ 2017-02-14 13:32  凝荷  阅读(706)  评论(0编辑  收藏  举报