easyui---formatter

为了格式化一个数据网格(DataGrid)列,我们需要设置 formatter 属性,它是一个函数。这个格式化函数包含三个参数:

  • value:当前列对应字段值。( value ---- 字段值    字段price  --- value就是价格 比如15  
  • row:当前的行记录数据。 (row---- 这里一般是object对象  转换为JSON字符串 alert  可以看到, alert是当前行记录的每一个数据
  • index:当前的行下标。用到这个属性比较少

 

这个是官网的例子

http://www.jeasyui.net/tutorial/28.html  实例下载里面有

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

<script type="text/javascript">
function formatPrice(val,row){
	alert(JSON.stringify(row));
	if (val < 20){
		return '<span style="color:red;">('+val+')</span>';
	} else {
		return val;
	}
	
	
}

记住  val ---   字段名  下的 所有值   例如  price  下的所有数据 16.5 --93.5

       row  ----一般是个对象 Object    我们常用到 员工的某个属性   直接 row.gender

      return 的 就是要显示在页面的

var columns=[[
	  		    {field:'uuid',title:'编号',width:100},
	  		    {field:'username',title:'登陆名',width:100},
	  		    {field:'name',title:'真实姓名',width:100},
	  		    {field:'gender',title:'性别',width:100,formatter:function(value, row, index){
	  		    	value = row.gender;
	  		    	if(1 == value * 1){
	  		    		return '男';
	  		    	}
	  		    	if(0 == value * 1){
	  		    		return '女';
	  		    	}
	  		    }},

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签 1.3.6更新 Bug treegrid: getChecked方法不能返回正确的行. fixed. tree: 异步树,在onlyLeafCheck:true时复选框不显示正确. fixed. Improvement treegrid:继承datagrid组件所有的selecting和checking方法。 linkbutton:图标对齐方式,支持值:'top','bottom','left','right'。 linkbutton:添加"size"属性,支持值:'small','large'。 linkbutton:添加的onClick事件。 menubutton:添加"menuAlign"属性,允许用户设置顶级菜单对齐。 combo:添加"panelAlign"属性,支持值:'left','right'。 calendar:"formatter"、"styler"和"validator"选项可用于自定义日历日期。 calendar:添加的onChange事件。 panel:添加"method","queryParams"和"loader"属性。 panel:添加"onLoadError"事件。 datagrid:添加"onBeginEdit"事件。 datagrid:添加"onEndEdit"事件。 datagrid:添加"sort"方法和"onBeforeSortColumn"事件。 datagrid:"combogrid"编辑器集成到datagrid。 datagrid:添加"ctrlSelect"属性,允许使用ctrl+click 多选 slider:添加"converter"选项,允许用户决定如何将一个值转换为滑块的位置或滑块位置值。 searchbox:添加"disabled"属性。 searchbox:添加"disabled","enable","clear","reset"方法。 spinner:添加"readonly"属性、"readonly"方法和"onChange事件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值