EasyUI之DataGrid属性

1、editor属性

使用方法一:静态数据

<th  field="level"  width="80"   editor="{
		type:‘combobox‘,
		options:{required:true,
		editable:false,
		data: [
			{‘id‘:‘1,‘text‘:‘高速公路‘},
			{‘id‘:‘2‘,‘text‘:‘一级公路‘},
			{‘id‘:‘3‘,‘text‘:‘二级公路‘},
			{‘id‘:‘4‘,‘text‘:‘三级公路‘}],
		valueField:‘id‘,
		textField:‘text‘}}">路线等级</th>

 使用方法二:动态数据

	<th data-options="field:‘productid‘,width:100,
			formatter:function(value,row){
				return row.productname;
			},
			editor:{
				type:‘combobox‘,
				options:{
					valueField:‘name‘,
					textField:‘value‘,
					method:‘get‘,
					url:‘products.json‘,
					required:true
				}
			}">Product</th>

  2、columns属性

 columns : [ {
                field : ‘resourceId‘,
                title : ‘菜单id‘,
                width : 50,
                sortable : true
            }]

  3、formatter属性

1.基本用法

单元格formatter(格式化器)函数,带3个参数:

value:字段值。

row:行记录数据。

index: 行索引。

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

(1)value:可以在formatter函数中修改value的值,并在界面上展示修改后的值。 **注意:** 在这里对value的修改并不会改动后台数据,这个改动仅相当于对value的渲染。

(2)row:可以通过 row["field值"] 或者 row.field值 得到同一行其他列的值。可以是前面的列,也可以是后面的列。

(3)index:行索引。

(4)当多行数据的field值相同时,formatter就会失效。

原文地址:https://www.cnblogs.com/zhumengke/p/8832900.html

时间: 2024-10-29 22:08:36

EasyUI之DataGrid属性的相关文章

关于easyui的datagrid属性出现乱码问题

今天遇到这个问题也是纠结了好久,经过在网上各种查询总结,得出以下经验: 1:网页字符集设置为UTF-8: <meta content="charset=UTF-8 " /> 2:引入相关js文件时加上charset="UTF-8" <script type="text/javascript" src="../static/easyui/jquery.easyui.min.js" charset="U

easyui datagrid属性和方法

本文可以当做api来使用 使用方法(Usage Example) 从现有的表单元素创建数据表格,定义在html中的行,列和数据. <table class="easyui-datagrid"> <thead> <tr> <th data-options="field:'code'">Code</th> <th data-options="field:'name'">Name&

EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager implements java.io.Serializable { private Integer id; private Role role; private String loginName; private String password; private int status; private Da

EasyUI 之datagrid 使用 【DataGrid属性解释】

可选的参数 DataGrid 属性 覆写了 $.fn.datagrid.defaults. 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls string 在面板上通过一个CSS类显示16x16图标. null border boolean 设置面板是否具有边框 TRUE width number datagrid面板的宽度 auto height number datagrid面板的高度 auto columns array DataG

JQuery EasyUI的datagrid的使用方式总结

JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt" style="width: 700px;" title="标题,可以使用代码进行初始化,也可以使用这种属性的方式" iconcls="icon-edit"> </table> </div> 注:表格的属性可以

EasyUI中DataGrid构建复合表头

在使用easyui的DataGrid控件时,构建复合表头就显得非常简单了.只需要在使用columns属性时通过数组的方式编写列名即可.如我们需要构建成一个如下的表头: Columns的代码如下: columns: [[ { field: '_id', title: '行号', fixed: true, rowspan:2 }, { field: '_j', title: '铁路局', fixed: true, colspan:2 } ], [ { field: '_id', title: '京局

第二百二十五节,jQuery EasyUI,PropertyGird(属性表格)组件

jQuery EasyUI,PropertyGird(属性表格)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 PropertyGird(属性表格)组件的使用方法,这个组件依赖 于 DataGrid(数据表格)组件. 一.加载方式 class 加载方式 <table id="box" class="easyui-propertygrid" style="width:300px" data-opt

easyUI 中datagrid 返回列隐藏方法

easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', width : 50, align : 'center', formatter : returnFtt },{ field : 'agencyName', title : '市场名称', width : 50, align : 'center' },{ field : 'agencyId', titl

给Jquery easyui 的datagrid 每行增加操作链接

我们都知道Jquery的Easy-UI的datagrid可以添加并且自定义Toolbar,这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作.但实际项目里我们可能需要在每行后面加一些操作链接,最常见的就是比如"修改"."删除"."查看"之类.如下图: 凡事都怕但是!Easy-UI的Datagrid没有直接添加link的属性.查看Easy-UI的帮助文档,看到一个formater:格式化函数,可以对某一行进行格式化,然后通过