DataGrid

最新推荐文章于 2024-02-19 16:09:19 发布
最新推荐文章于 2024-02-19 16:09:19 发布
阅读量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
关注
  • 5
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
datagrid单元格上点击弹出窗口（官网例子）
07-26
NULL 博文链接：https://songwensheng.iteye.com/blog/628997
关于DataGrid的使用
yigedaimaxiaobai的博客
09-23 3560
DataGrid的一些用法和设置前言一、DataGrid是什么？二、使用步骤1.页面XAML设计代码2.后台链接数据库读取数据总结 前言 前不久正好做了一个关于datagrid显示数据库内容的列表，觉得自己要学习的还有很多，在此记录一下所用到的用法和设置，希望对大家有所帮助（为什么不用listview呢，因为listview还要自己画网格线…还有datagrid具有一些box和可以自定义） 一、DataGrid是什么？ 1、把它当做一个表格就行了，用来显示数据 2、会自动生成网格线 二、使用步骤 1.
DataGrid（数据表格）
墨渐生微的博客
10-12 1492
         DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。   &lt;%@ page language="java" import="java.util.*" pageEncoding=...
DataGrip 保姆级教程 ！
程序员高级码农的博客
02-19 1700
在面板中，左上部分列出了已经建立的数据库连接，点击各项，右侧会展示当前连接的配置信息，General面板中，可以配置数据库连接的信息，如主机、用户名、密码等，不同数据库配置信息不完全相同，填入数据库URL，注意，URL后有个选项，可以选择直接填入url，那么就不需要单独填主机名、端口等信息了。需要将当前主题保存一下，点击save as，起个名，选择重命名后的主题就能修改了，这里我选择习惯的Conurier New字体，大小为14号，点击右下角的apply，点击OK。
DataGrid（数据表格）之查询
qq_54936371的博客
09-14 1417
知识总结 目录 一、含义及作用 DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 二、目标 点击左侧tree菜单，右侧Tab页显示datagrid查询出来的数据 三、思考及解决 思考： 创建一个存放数据的展示界面（使用datagrid控件） 点击左侧菜单显示对应界面 解决： 参考上节tre
Datagrid整体介绍
注重长远 天天积累 cqujsjcyj
08-17 473
  转自：http://apps.hi.baidu.com/share/detail/14674404   Datagrid整体介绍： Datagrid类似于数据库的表格，记录集由行集(items)和列集(columns)组成，行集由多个datagridColumn组成，列集由多个datagriditem组成。 工作原理：1.dataset取得数据，2.指定datagrid的数据源为da...
五、easyUI中的datagrid（数据表格）组件
weixin_44230693的博客
05-18 5004
五、easyUI中的datagrid（数据表格）组件
datagrid初用
m0_53151031的博客
09-13 916
前言：EasyUI有七个重要的控件：layout、tree、tabs、datagrid、form、messeger、combobox。之前讲了三个控件，今天要分享的是datagrid控件。 一、明确目标： 实现效果：当点击左边菜单栏时，要用datagrid（数据表格）控件将数据展现在右边界面上， 已经要用到查询。 二、具体思路以及代码实现： 一、利用dategrid进行数据展示以及结果集的封装： 1、思路： 1、将左边菜单添加点击事件，点击后要弹出对应的界...
Datagrid组件的基本讲解
山月风成的博客
11-07 8859
1.datagrid的基本属性 datagrid 接收后台数据用于，以标准表单的形式展示的组件。 EasyUI 接收两种参数：对象参数；数组参数。
【wpf】DataGrid的使用
songhuangong123的博客
10-05 4232
/获取每一行// 根据每一行获取每一列有了cell对象，我们就可以对每个cell进行设置：比如，设置某些cell不可编辑：cell.IsEnabled = false;比如，设置某些cell背景或者前景颜色：cell.Foreground = new SolidColorBrush(Colors.Green);还有一点需要注意的是：这些设置会在表格排序后失效，所以我们一般需要禁用DateGrid的排序功能（将属性 CanUserSortColumns="False"）。
WPF DataGrid
04-18
WPF DataGrid源代码 https://blog.csdn.net/caoyanchao1/article/details/130223524
datagrid
05-28
NULL 博文链接：https://baobeituping.iteye.com/blog/781987
DataGrid中嵌入comBox
04-23
DataGrid中嵌入comBox，MVVM，
easyui datagrid editor回车切换单元格示例，可参考
12-27
easyui datagrid editor回车切换单元格示例，适合熟悉easyui但又不懂如何做的人员，可能参考一下源码JS。
c# WPF DataGrid 底部汇总行合计
01-20
DataGrid 统计每一列的值，合计在底部。 这里的合计是在 DataGrid 的内部，汇总在最后一行，在 DataGrid 横向滚动条的上方进行汇总。
起点小说解锁.js
最新发布
04-27
起点小说解锁.js
299-煤炭大数据智能分析解决方案.pptx
04-27
299-煤炭大数据智能分析解决方案.pptx
299-教育行业信息化与数据平台建设分享.pptx
04-27
299-教育行业信息化与数据平台建设分享.pptx
基于Springboot+Vue酒店客房入住管理系统-毕业源码案例设计.zip
04-27
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。 网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。 关键词：vue；MySQL；SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
DataGrid控件
09-18
DataGrid控件是WPF中用于展示和编辑数据的控件。它可以通过数据源绑定来显示数据，并支持用户对数据进行编辑、添加和删除操作。 在使用DataGrid进行数据源绑定时，可以通过DataGridTextColumn、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值