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

    }

}