登录
当前位置： 首页 > 工具软件 > PHP DataGrid > 使用案例 >

DataGrid

东门宜
2023-12-01

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



 类似资料：

相关阅读

C# DataGridView绑定数据源的方法C#设置WinForm中DataGrid列的方法(列宽/列标题等)C#实现给DataGrid单元行添加双击事件的方法C# 实现dataGridView选中一行右键出现菜单的示例代码SSh结合Easyui实现Datagrid的分页显示

相关文章

相关问答

基于选定的ComboBox项填充datagridview为什么我在WPF中看到与AreRowDetailsFrozen和HeadersVisibility for Datagrids相关的绑定错误？WPF DataGrid ItemsSource内存泄漏引用动态primefaces accordionPanel或dataGrid中包含的元素为DataGridView列使用自定义货币符号？
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.