保存到桌面加入收藏设为首页
EasyUI
当前位置:首页 > Web技术 > EasyUI

easyui格式化DataGrid列(设置datagrid列的样式)

时间:2013-07-26 01:55:17   作者:梦幻小纯哥   来源:永硕E盘装饰网   阅读:3927   评论:0
内容摘要:FormattingDataGridcolumns格式化DataGrid列(设置datagrid列的样式)ThefollowingexampleformatsacolumnineasyuiDataGridandusesacustomcolumnformattertocolorth...

 

FormattingDataGrid columns

格式化DataGrid列(设置datagrid列的样式)

 

The following example formats a column in easyui DataGrid and uses a custom column formatter to color the text red if a price is below than 20.

下面的示例, easyui DataGrid使用自定义的样式,格式化DataGridr的列。如果价格低于20,则显示为红色。

 

效果如下:

easyui格式化DataGrid列(设置datagrid列的样式)

 

 

To format a DataGrid column, we should set the formatter property which is a function. The format function contains three parameters:

格式化一个DataGridt, 我们应该设置formatter属性, 这是一个函数。该格式函数包含三个参数:

|- value:The current column value responding to field.

  value参数:对应field的值

|- row: The current row record data.

  row参数:行值

|- index: The current row index.

  index参数:当前行的索引值

 

 

Create DataGrid

创建DataGrid数据表格

 

<table id="tt" title="Formatting Columns" class="easyui-datagrid"

        style="width:550px;height:250px"

              url="data/datagrid_data.json"

              singleSelect="true" iconCls="icon-save">

 

       <thead>

              <tr>

                     <th field="itemid" width="80">Item ID</th>

                     <th field="productid" width="80">Product ID</th>

                     <th field="listprice" width="80" align="right" formatter="formatPrice">

List Price

</th>

                     <th field="unitcost" width="80" align="right">Unit Cost</th>

                     <th field="attr1" width="100">Attribute</th>

                     <th field="status" width="60" align="center">Stauts</th>

              </tr>

       </thead>

 

</table>

 

 

Notice that the 'listprice' field has the 'formatter' attribute that indicate the format function.

注意,listprice 字段有“格式化”属性。

 

Write format function

写格式化函l

<script>

       function formatPrice(val,row){

              if (val < 20){

                     return '<span style="color:red;">('+val+')</span>';

              } else {

                     return val;

              }

       }

</script>

 



相关评论