DataGrid

最新推荐文章于 2024-08-14 12:36:58 发布
最新推荐文章于 2024-08-14 12:36:58 发布
阅读量2w 收藏 25
点赞数 5
分类专栏： easy-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23217629/article/details/52126846
版权

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

<table id="dg"></table>  

	<table id="dg"></table>
 

$('#dg').datagrid({    
    url:'datagrid_data.json',    
    columns:[[    
        {field:'code',title:'Code',width:100},    
        {field:'name',title:'Name',width:100},    
        {field:'price',title:'Price',width:100,align:'right'}    
    ]]    
});

 

DataGrid属性

下面是DataGrid控件添加的属性。

属性名属性值类型描述默认值
columnsarrayDataGrid列配置对象，详见列属性说明中更多的细节。undefined
frozenColumnsarray同列属性，但是这些列将会被冻结在左侧。undefined
fitColumnsboolean真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。false
resizeHandlestring

调整列的位置，可用的值有：'left','right','both'。在使用'right'的时候用户可以通过拖动右侧边缘的列标题调整列，等等。（该属性自1.3.2版开始可用）

right
autoRowHeightboolean定义设置行的高度，根据该行的内容。设置为false可以提高负载性能。true
toolbararray,selector顶部工具栏的DataGrid面板。可能的值：
1) 一个数组，每个工具属性都和linkbutton一样。
2) 选择器指定的工具栏。

在<div>标签上定义工具栏： 

$('#dg').datagrid({
	toolbar: '#tb'
});
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>

通过数组定义工具栏：

$('#dg').datagrid({
	toolbar: [{
		iconCls: 'icon-edit',
		handler: function(){alert('编辑按钮')}
	},'-',{
		iconCls: 'icon-help',
		handler: function(){alert('帮助按钮')}
	}]
});
null
stripedboolean是否显示斑马线效果。false
methodstring该方法类型请求远程数据。post
nowrapboolean如果为true，则在同一行中显示数据。设置为true可以提高加载性能。true
idFieldstring指明哪一个字段是标识字段。null
urlstring一个URL从远程站点请求数据。null
dataarray,object数据加载（该属性自1.3.2版开始可用）

代码示例：

$('#dg').datagrid({
	data: [
		{f1:'value11', f2:'value12'},
		{f1:'value21', f2:'value22'}
	]
});
null
loadMsgstring在从远程站点加载数据的时候显示提示消息。Processing, please wait …
paginationboolean如果为true，则在DataGrid控件底部显示分页工具栏。false
rownumbersboolean如果为true，则显示一个行号列。false
singleSelectboolean如果为true，则只允许选择一行。false
checkOnSelectboolean如果为true，当用户点击行的时候该复选框就会被选中或取消选中。
如果为false，当用户仅在点击该复选框的时候才会呗选中或取消。
（该属性自1.3版开始可用）		true
selectOnCheckboolean

如果为true，单击复选框将永远选择行。
如果为false，选择行将不选中复选框。
（该属性自1.3.2版开始可用）

true
pagePositionstring定义分页工具栏的位置。可用的值有：'top','bottom','both'。
（该属性自1.3.2版开始可用）		bottom
pageNumbernumber在设置分页属性的时候初始化页码。1
pageSizenumber在设置分页属性的时候初始化页面大小。10
pageListarray在设置分页属性的时候 初始化页面大小选择列表。[10,20,30,40,50]
queryParamsobject在请求远程数据的时候发送额外的参数。

代码示例：

$('#dg').datagrid({
	queryParams: {
		name: 'easyui',
		subject: 'datagrid'
	}
});
{}
sortNamestring定义哪些列可以进行排序。null
sortOrderstring定义列的排序顺序，只能是'asc'或'desc'。asc
multiSortboolean定义是否允许多列排序。（该属性自1.3.4版开始可用）false
remoteSortboolean定义从服务器对数据进行排序。true
showHeaderboolean定义是否显示行头。true
showFooterboolean定义是否显示行脚。false
scrollbarSizenumber滚动条的宽度(当滚动条是垂直的时候)或高度(当滚动条是水平的时候)。18
rowStylerfunction返回样式如'background:red'。带2个参数的函数：
rowIndex：该行索引从0开始
rowData：与此相对应的记录行。

代码示例：

$('#dg').datagrid({
	rowStyler: function(index,row){
		if (row.listprice>80){
			return 'background-color:#6293BB;color:#fff;';
		}
	}
});
译者注（1.3.4新增方式）：


$('#dg').datagrid({
	rowStyler: function(index,row){
		if (row.listprice>80){
			return 'rowStyle';    // rowStyle是一个已经定义了的ClassName(类名)
		}
	}
});
 
loaderfunction定义如何从远程服务器加载数据。返回false可以放弃本次请求动作。该函数接受以下参数：
param：参数对象传递给远程服务器。
success(data)：当检索数据成功的时候会调用该回调函数。
error()：当检索数据失败的时候会调用该回调函数。		json loader
loadFilterfunction返回过滤数据显示。该函数带一个参数'data'用来指向源数据（即：获取的数据源，比如Json对象）。您可以改变源数据的标准数据格式。这个函数必须返回包含'total'和'rows'属性的标准数据对象。

代码示例：

// 从Web Service（asp.net、java、php等）输出的JSON对象中移除'd'对象
$('#dg').datagrid({
	loadFilter: function(data){
		if (data.d){
			return data.d;
		} else {
			return data;
		}
	}
});
 
editorsobject定义在编辑行的时候使用的编辑器。预定义编辑器
viewobject定义DataGrid的视图。默认视图


列属性

DataGrid列是一个数组对象，该元素也是一个数组对象。元素数组里面的元素是一个配置对象，它用来定义每一个列字段。

代码示例：

  1. columns:[[   
  2.     {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   
  3.     {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   
  4.     {title:'Item Details',colspan:4}   
  5. ],[   
  6.     {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   
  7.     {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   
  8.     {field:'attr1',title:'Attribute',width:100},   
  9.     {field:'status',title:'Status',width:60}   
  10. ]]  

属性名称属性值类型描述默认值
titlestring列标题文本。undefined
fieldstring列字段名称。undefined
widthnumber列的宽度。如果没有定义，宽度将自动扩充以适应其内容。undefined
rowspannumber指明将占用多少行单元格（合并行）。undefined
colspannumber指明将占用多少列单元格（合并列）。undefined
alignstring指明如何对齐列数据。可以使用的值有：'left','right','center'。undefined
halignstring指明如何对齐列标题。可以使用的值有：'left','right','center'。如果没有指定，则按照align属性进行对齐。
（该属性自1.3.2版开始可用）		undefined
sortableboolean如果为true，则允许列使用排序。undefined
orderstring默认排序数序，只能是'asc'或'desc'。
（该属性自1.3.2版开始可用）		undefined
resizableboolean如果为true，允许列改变大小。undefined
fixedboolean如果为true，在"fitColumns"设置为true的时候阻止其自适应宽度。undefined
hiddenboolean如果为true，则隐藏列。undefined
checkboxboolean如果为true，则显示复选框。该复选框列固定宽度。undefined
formatterfunction单元格formatter(格式化器)函数，带3个参数：
value：字段值。
rowData：行记录数据。
rowIndex: 行索引。

代码示例：

$('#dg').datagrid({
	columns:[[
		{field:'userId',title:'User', width:80,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});
undefined
stylerfunction单元格styler(样式)函数，返回如'background:red'这样的自定义单元格样式字符串。该函数带3个参数：
value：字段值。
rowData：行记录数据。
rowIndex: 行索引。

代码示例：

$('#dg').datagrid({
	columns:[[
		{field:'listprice',title:'List Price', width:80, align:'right',
			styler: function(value,row,index){
				if (value < 20){
					return 'background-color:#ffee00;color:red;';
				}
			}
		}
	]]
});
undefined
sorterfunction用来做本地排序的自定义字段排序函数，带2个参数：
a：第一个字段值。
b：第二个字段值。

代码示例：

$('#dg').datagrid({
	remoteSort: false,
	columns: [[
		{field:'date',title:'Date',width:80,sortable:true,align:'center',  
			sorter:function(a,b){  
				a = a.split('/');  
				b = b.split('/');  
				if (a[2] == b[2]){  
					if (a[0] == b[0]){  
						return (a[1]>b[1]?1:-1);  
					} else {  
						return (a[0]>b[0]?1:-1);  
					}  
				} else {  
					return (a[2]>b[2]?1:-1);  
				}  
			}  
		}
	]]
});
undefined
editorstring,object指明编辑类型。当字符串指明编辑类型的时候，对象包含2个属性：
type：字符串，该编辑类型可以使用的类型有：text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
options：对象，object, 该编辑器属性对应于编辑类型。		undefined



qq_23217629
关注
专栏目录
WPF DataGrid
04-18
**WPF DataGrid详解** WPF (Windows Presentation Foundation) 是微软.NET Framework的一部分，它提供了一套强大的用户界面框架，用于构建美观且功能丰富的桌面应用程序。在WPF中，DataGrid控件是展示和操作结构化...
五、easyUI中的datagrid（数据表格）组件
weixin_44230693的博客
05-18 6018
五、easyUI中的datagrid（数据表格）组件
datagrid初用
m0_53151031的博客
09-13 998
前言：EasyUI有七个重要的控件：layout、tree、tabs、datagrid、form、messeger、combobox。之前讲了三个控件，今天要分享的是datagrid控件。 一、明确目标： 实现效果：当点击左边菜单栏时，要用datagrid（数据表格）控件将数据展现在右边界面上， 已经要用到查询。 二、具体思路以及代码实现： 一、利用dategrid进行数据展示以及结果集的封装： 1、思路： 1、将左边菜单添加点击事件，点击后要弹出对应的界...
WPF之DataGrid
最新发布
Major_S的博客
08-14 512
【代码】WPF之DataGrid。
Datagrid组件的基本讲解
山月风成的博客
11-07 9031
1.datagrid的基本属性 datagrid 接收后台数据用于，以标准表单的形式展示的组件。 EasyUI 接收两种参数：对象参数；数组参数。
EasyUI Jquery 学习笔记 ——DataGrid（数据网格）与 Tree（树）详细版
cccloveforever的博客
04-13 2435
数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。
easyuI中datagrid控件讲解
weixin_41563376的博客
05-24 2182
datagrid控件：在VisualStudio中Razor视图引擎中使用datagrid控件实现对应的效果
datagrid
05-28
标题 "datagrid" 提到的是一个数据网格组件，它在IT领域中通常用于显示和操作大量结构化的数据。在Web开发或桌面应用中，DataGrid是一种常见的控件，它允许用户以表格的形式查看、编辑和管理数据。这篇博客的链接...
DataGrid中嵌入comBox
04-23
在Windows Presentation Foundation（WPF）开发中，DataGrid控件是一种强大的工具，用于展示和编辑表格数据。在某些场景下，我们可能需要在DataGrid的某一列中嵌入ComboBox控件，以提供用户多选或者下拉选择的功能。...
c# WPF DataGrid 底部汇总行合计
01-20
在C# WPF环境中，DataGrid控件是一个非常强大的数据展示工具，它可以用来显示和编辑表格数据。在处理大量数据时，我们经常需要在底部添加一个汇总行来展示各项数值的总计，这在商业应用中尤其常见。本篇文章将详细...
WPF-DataGrid中CheckBox实现全选与非全选
02-26
在Windows Presentation Foundation (WPF) 中，DataGrid控件是一个常用的数据展示和操作工具，它提供了丰富的功能，包括行选择、排序、分组等。在实际应用中，我们经常需要在DataGrid中添加CheckBox，以便用户可以...
WPF入门教程系列二十五——DataGrid使用示例(2)
Gefangenes的博客
05-25 2018
默认情况下，当我们为DataGrid 控件设置ItemSource 属性后，DataGrid 会根据数据类型自动生成相应的列，数据表格中的每一行都绑定到数据源中的一个对象，数据表格中的每一列都绑定到数据对象的属性。如果想要实现用户界面中的DataGrid数据随着数据源中添加或删除数据时自动更新，DataGrid的绑定数据源必须实现接口INotifyCollectionChanged，例如 ObservableCollection。WPF推出也有十多年了，WPF中的DataGrid的列的类型还是四种。
【wpf】DataGrid的使用
songhuangong123的博客
10-05 4911
/获取每一行// 根据每一行获取每一列有了cell对象，我们就可以对每个cell进行设置：比如，设置某些cell不可编辑：cell.IsEnabled = false;比如，设置某些cell背景或者前景颜色：cell.Foreground = new SolidColorBrush(Colors.Green);还有一点需要注意的是：这些设置会在表格排序后失效，所以我们一般需要禁用DateGrid的排序功能（将属性 CanUserSortColumns="False"）。
关于DataGrid的使用
yigedaimaxiaobai的博客
09-23 3668
DataGrid的一些用法和设置前言一、DataGrid是什么？二、使用步骤1.页面XAML设计代码2.后台链接数据库读取数据总结 前言 前不久正好做了一个关于datagrid显示数据库内容的列表，觉得自己要学习的还有很多，在此记录一下所用到的用法和设置，希望对大家有所帮助（为什么不用listview呢，因为listview还要自己画网格线…还有datagrid具有一些box和可以自定义） 一、DataGrid是什么？ 1、把它当做一个表格就行了，用来显示数据 2、会自动生成网格线 二、使用步骤 1.
WPF入门教程系列二十四——DataGrid使用示例(1)
Gefangenes的博客
05-25 2025
WPF技术的主要特点是数据驱动UI，所以在使用WPF技术开发的过程中是以数据为核心的，WPF提供了数据绑定机制，当数据发生变化时，WPF会自动发出通知去更新UI。今天我们来学习.NET 7中的WPF里面的DataGrid的有关知识。数据表格DataGrid是一个使用非常广泛的控件，不管是在Asp.Net中的网页开发还是WinForm(WPF)应用程序开发都会频繁使用。通过数据表格DataGrid可以灵活、方便、有效的显示各种数据。
WPF 控件专题 DataGrid 控件详解
^@^lemon tea^@^
09-23 8549
WPF 控件专题 DataGrid 控件详解
JAVAEE——BOS物流项目04：学习计划、datagrid、分页查询、批量删除、修改功能
depiaozhanyou66348的博客
02-19 244
1 学习计划 1、datagrid使用方法（重要） n将静态HTML渲染为datagrid样式 n发送ajax请求获取json数据创建datagrid n使用easyUI提供的API创建datagrid（掌握） 2、实现取派员分页查询 n调整页面基于datagrid发送ajax请求 n创建PageBean封装分页参数 n定义通用分页查询方法 n将分页查询结...
VC++ DataGrid控件操作实例教程
资源摘要信息:"Data_Disp.rar_datagrid_多行显示" 本文档涉及两个具体的Visual C++ (VC++) 实例，主要焦点在于使用_DATAGRid控件实现多行显示以及其他一系列界面操作。其中第一个实例深入探讨了DATAGRid控件的宽度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值