Easyui datagrid 单元格格式化函数formatter的使用

$(‘#dg‘).datagrid({
	columns:[[
		{field:‘userId‘,title:‘User‘, width:80,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});

 以上是通过JS来进行调用

  单元格格式化函数formatter带三个参数:

  value:单元格的字段值

  rowData:该单元格所在行的行记录

  rowIndex:该单元格所在的行索引

调用该函数,我们可以通过这三个值来进行判断,结合自己的需求,然后适当的对该单元格进行渲染

HTML元素内进行调用

<th data-options="field:‘invalid_flag_name‘,width:60,align:‘center‘,
                            formatter:function(val,row,index){
                                if(val == ‘禁用‘){
                                    val = ‘<span style=\‘color:red;\‘>‘+value+‘<span>‘;
                                }
                                return val;
                            }
                            ">状态</th>

 结果如下:

原文地址:https://www.cnblogs.com/sentongxue/p/9737286.html

时间: 2024-08-01 12:54:52

Easyui datagrid 单元格格式化函数formatter的使用的相关文章

JQuery easyui datagrid 单元格编辑时,使用浮动的textarea文本框并进行数据校验

有两种方式实现,一种方式是在html中验证,一种方式是在js中进行验证 方式一: <th data-options="filed:'remark',width:200,editor:{type:'textarea'}">备注</th> 方式二: <th data-options="filed:'remark',width:200,editor:{type:'textarea', options:{validType:'maxLength[150]

easyui datagrid 单元格编辑 即见即所得,MVC菜单维护,扫描增加

效果如图: 参见 EasyUI 官方 Demo 及文档 @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <script src="~/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script> <table id="datagrid" class

easyui datagrid 单元格编辑保存

要求分数和排序两列能编辑 //查询该试卷题型的试题 $('#allList1').datagrid({ url:app.approot+"paperRes/getPaperQuestionList/"+ptyid, handler:function(){ //接受改变的值 $('#allList1').datagrid('acceptChanges'); }, onBeforeEdit: function (rowIndex,rowData) { $("#selQuestio

easyui datagrid 单元格编辑 自动聚焦 、全选

$.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields')); for (var i = 0

遍历WPF DataGrid单元格

using System.Windows.Controls; using System.Windows.Controls.Primitives; using System.Windows.Media; namespace Splash.WPF { public static class DataGridPlus { /// <summary> /// 获取DataGrid控件单元格 /// </summary> /// <param name="dataGrid&q

easyui datagrid 表格组件列属性formatter和styler使用方法

明确单元格DOM结构 要想弄清楚formatter和styler属性是怎么工作的,首先要弄清楚datagrid组件内容单元格的DOM接口,注意,这里指的是内容单元格,不包括标题单元格,标题单元格的结构有所区别.我们所有内容单元格的默认DOM结构如下: 1 2 3 4 5 <td field="code">     <div style="text-align:left" class="datagrid-cell datagrid-cell

Excel 拼接单元格的函数

CONCATENATE(A,B); 例子:A1和B1的单元格用,号分隔开,并且A1,B1用单引号括起来 CONCATENATE("'",A1,"'",",","'",B1,"'"); 如果只是单纯连接俩个单元格用"&"符号就行了

DevExpress控件 DataGrid 单元格编辑 回车

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using CYSoft.UI.Common; using CYSoft.Common; using CYSoft.TS.Entit

[easyUI] datagrid 数据格 可以进行分页

1. 新建一个GridNode的类: public class GridNode { private Long id; private String title;//投票标题 private Integer type; private String version; private String options;//备选项数 private String participants;//参与人数 //getter/setter/constructor省略 } 2. 网页内新建一个table元素.