easyUI的formatter使用

最新推荐文章于 2024-11-26 10:39:48 发布

转载最新推荐文章于 2024-11-26 10:39:48 发布 · 202 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/xiaoxiao0314/p/6110308.html

标签

#javascript #ViewUI

本文详细介绍了如何使用EasyUI框架中的Datagrid组件进行数据格式化，特别是针对单元格显示的自定义，包括如何使用formatter函数来改变名称列的显示方式，以及具体的JS代码实现。

<table class="easyui-datagrid" style="width:400px;height:250px"   
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
    <thead>   
        <tr>   
            <th data-options="field:'code',width:100">编码</th>   
            <th data-options="field:'name',width:100">名称</th>   
            <th data-options="field:'price',width:100,align:'right'">价格</th>   
        </tr>   
    </thead>   
</table>

比如我对名称这一栏需要格式设置

<table class="easyui-datagrid" style="width:400px;height:250px"   
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
    <thead>   
        <tr>   
            <th data-options="field:'code',width:100">编码</th>   
            <th data-options="field:'name',width:100 formatter=formatLink ">名称</th>   
            <th data-options="field:'price',width:100,align:'right'">价格</th>   
        </tr>   
    </thead>   
</table>

　　2.来看一下js代码实现

单元格formatter(格式化器)函数，带3个参数：
value：字段值。
row：行记录数据。
index: 行索引。 
代码示例：

$('#dg').datagrid({
    columns:[[
        {field:'name',title:'名称', width:80,
            formatter: function(value,row,index){
                if (row.code=='1001'){
                    return val;
                } else {
                    return null;
                }
            }
        }
    ]]
});

　　3.或者直接写一个function formatLink{}

so easyUI !

转载于:https://www.cnblogs.com/xiaoxiao0314/p/6110308.html