您的位置: 首页  >  文章  >  EasyUI Datagrid 数据网格

EasyUI Datagrid 数据网格

分类: 文章 • 2022-10-04 18:34:39

网络示例一：

扩展自 $.fn.panel.defaults。通过 $.fn.datagrid.defaults 重写默认的 defaults。

数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。

EasyUI Datagrid 数据网格

依赖

  • panel
  • resizable
  • linkbutton
  • pagination

用法

从已有的表格元素创建数据网格（datagrid），在 html 中定义列、行及数据。

    

  1. 
<table class="easyui-datagrid">

    2. 

  2. 
    <thead>

    3. 

  3. 
		<tr>

    4. 

  4. 
			<th data-options="field:'code'">Code</th>

    5. 

  5. 
			<th data-options="field:'name'">Name</th>

    6. 

  6. 
			<th data-options="field:'price'">Price</th>

    7. 

  7. 
		</tr>

    8. 

  8. 
    </thead>

    9. 

  9. 
    <tbody>

    10. 

  10. 
		<tr>

    11. 

  11. 
			<td>001</td><td>name1</td><td>2323</td>

    12. 

  12. 
		</tr>

    13. 

  13. 
		<tr>

    14. 

  14. 
			<td>002</td><td>name2</td><td>4612</td>

    15. 

  15. 
		</tr>

    16. 

  16. 
	</tbody>

    17. 

  17. </table>
    18.

通过 <table> 标记创建数据网格（datagrid）。嵌套的 <th> 标签定义表格中的列。

    

  1. 
<table class="easyui-datagrid" style="width:400px;height:250px"

    2. 

  2. 
    data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">

    3. 

  3. 
    <thead>

    4. 

  4. 
		<tr>

    5. 

  5. 
			<th data-options="field:'code',width:100">Code</th>

    6. 

  6. 
			<th data-options="field:'name',width:100">Name</th>

    7. 

  7. 
			<th data-options="field:'price',width:100,align:'right'">Price</th>

    8. 

  8. 
		</tr>

    9. 

  9. 
    </thead>

    10. 

  10. </table>
    11.

也可以使用 javascript 创建数据网格（datagrid）。

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

    

  1. 
$('#dg').datagrid({

    2. 

  2. 
    url:'datagrid_data.json',

    3. 

  3. 
    columns:[[

    4. 

  4. 
		{field:'code',title:'Code',width:100},

    5. 

  5. 
		{field:'name',title:'Name',width:100},

    6. 

  6. 
		{field:'price',title:'Price',width:100,align:'right'}

    7. 

  7. 
    ]]

    8. 

  8. });
    9.

通过一些参数查询数据。

    

  1. 
$('#dg').datagrid('load', {

    2. 

  2. 
    name: 'easyui',

    3. 

  3. 
    address: 'ho'

    4. 

  4. });
    5.

在向服务器改变数据之后，更新前台数据。

  1. 
$('#dg').datagrid('reload');    // reload the current page data

数据网格（DataGrid）属性

该属性扩展自面板（panel），下面是为数据网格（datagrid）添加的属性。

名称 类型 描述 默认值
columns array 数据网格（datagrid）的列（column）的配置对象，更多细节请参见列（column）属性。 undefined
frozenColumns array 和列（column）属性一样，但是这些列将被冻结在左边。 undefined
fitColumns boolean 设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。 false
resizeHandle string 调整列的位置，可用的值有：'left'、'right'、'both'。当设置为 'right' 时，用户可通过拖拽列头部的右边缘来调整列。
该属性自版本 1.3.2 起可用。		 right
autoRowHeight boolean 定义是否设置基于该行内容的行高度。设置为 false，则可以提高加载性能。 true
toolbar array,selector 数据网格（datagrid）面板的头部工具栏。可能的值：
1、数组，每个工具选项与链接按钮（linkbutton）一样。
2、选择器，只是工具栏。

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

  1. 
$('#dg').datagrid({

    2. 

  2. 
	toolbar: '#tb'

    3. 

  3. });
    4. 

  4. 
<div id="tb">

    5. 

  5. 
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>

    6. 

  6. 
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a>

    7. 

  7. 
</div>

    8.
通过数组定义工具栏： 
    

  1. 
$('#dg').datagrid({

    2. 

  2. 
	toolbar: [{

    3. 

  3. 
		iconCls: 'icon-edit',

    4. 

  4. 
		handler: function(){alert('edit')}

    5. 

  5. 
	},'-',{

    6. 

  6. 
		iconCls: 'icon-help',

    7. 

  7. 
		handler: function(){alert('help')}

    8. 

  8. 
	}]

    9. 

  9. });
    10.
null
striped boolean 设置为 true，则把行条纹化。（即奇偶行使用不同背景色） false
method string 请求远程数据的方法（method）类型。 post
nowrap boolean 设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。 true
idField string 指示哪个字段是标识字段。 null
url string 从远程站点请求数据的 URL。 null
data array,object 要加载的数据。该属性自版本 1.3.2 起可用。
代码实例： 
    

  1. 
$('#dg').datagrid({

    2. 

  2. 
	data: [

    3. 

  3. 
		{f1:'value11', f2:'value12'},

    4. 

  4. 
		{f1:'value21', f2:'value22'}

    5. 

  5. 
	]

    6. 

  6. });
    7.
null
loadMsg string 当从远程站点加载数据时，显示的提示消息。 Processing, please wait …
pagination boolean 设置为 true，则在数据网格（datagrid）底部显示分页工具栏。 false
rownumbers boolean 设置为 true，则显示带有行号的列。 false
singleSelect boolean 设置为 true，则只允许选中一行。 false
checkOnSelect boolean 如果设置为 true，当用户点击某一行时，则会选中/取消选中复选框。如果设置为 false 时，只有当用户点击了复选框时，才会选中/取消选中复选框。
该属性自版本 1.3 起可用。		 true
selectOnCheck boolean 如果设置为 true，点击复选框将会选中该行。如果设置为 false，选中该行将不会选中复选框。
该属性自版本 1.3 起可用。		 true
pagePosition string 定义分页栏的位置。可用的值有：'top'、'bottom'、'both'。
该属性自版本 1.3 起可用。		 bottom
pageNumber number 当设置了 pagination 属性时，初始化页码。 1
pageSize number 当设置了 pagination 属性时，初始化页面尺寸。 10
pageList array 当设置了 pagination 属性时，初始化页面尺寸的选择列表。 [10,20,30,40,50]
queryParams object 当请求远程数据时，发送的额外参数。
代码实例： 
    

  1. 
$('#dg').datagrid({

    2. 

  2. 
	queryParams: {

    3. 

  3. 
		name: 'easyui',

    4. 

  4. 
		subject: 'datagrid'

    5. 

  5. 
	}

    6. 

  6. });
    7.
{}
sortName string 定义可以排序的列。 null
sortOrder string 定义列的排序顺序，只能用 'asc' 或 'desc'。 asc
multiSort boolean 定义是否启用多列排序。该属性自版本 1.3.4 起可用。 false
remoteSort boolean 定义是否从服务器排序数据。 true
showHeader boolean 定义是否显示行的头部。 true
showFooter boolean 定义是否显示行的底部。 false
scrollbarSize number 滚动条宽度（当滚动条是垂直的时候）或者滚动条的高度（当滚动条是水平的时候）。 18
rowStyler function 返回例如 'background:red' 的样式。该函数需要两个参数：
rowIndex：行的索引，从 0 开始。
rowData：该行相应的记录。

代码实例： 
    

  1. 
$('#dg').datagrid({

    2. 

  2. 
	rowStyler: function(index,row){

    3. 

  3. 
		if (row.listprice>80){

    4. 

  4. 
			return 'background-color:#6293BB;color:#fff;'; // return inline style

    5. 

  5. 
			// the function can return predefined css class and inline style

    6. 

  6. 
			// return {class:'r1', style:{'color:#fff'}};	

    7. 

  7. 
		}

    8. 

  8. 
	}

    9. 

  9. });
    10.
 
loader function 定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数：
param：要传递到远程服务器的参数对象。
success(data)：当检索数据成功时调用的回调函数。
error()：当检索数据失败时调用的回调函数。
 json loader
loadFilter function 返回要显示的过滤数据。该函数有一个参数 'data' ，表示原始数据。您可以把原始数据变成标准数据格式。该函数必须返回标准数据对象，含有 'total' 和 'rows' 属性。
代码实例： 
    

  1. // removing 'd' object from asp.net web service json output
    2. 

  2. 
$('#dg').datagrid({

    3. 

  3. 
	loadFilter: function(data){

    4. 

  4. 
		if (data.d){

    5. 

  5. 
			return data.d;

    6. 

  6. 
		} else {

    7. 

  7. 
			return data;

    8. 

  8. 
		}

    9. 

  9. 
	}

    10. 

  10. });
    11.
 
editors object 定义编辑行时的编辑器。 predefined editors
view object 定义数据网格（datagrid）的视图。 default view

列（Column）属性

数据网格（DataGrid） 的列（Column）是一个数组对象，它的每个元素也是一个数组。元素数组的元素是一个配置对象，它定义了每个列的字段。

代码实例：

    

  1. 
columns:[[

    2. 

  2. 
    {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},

    3. 

  3. 
    {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},

    4. 

  4. 
    {title:'Item Details',colspan:4}

    5. 

  5. ],[
    6. 

  6. 
    {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},

    7. 

  7. 
    {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},

    8. 

  8. 
    {field:'attr1',title:'Attribute',width:100},

    9. 

  9. 
    {field:'status',title:'Status',width:60}

    10. 

  10. ]]
    11.
名称 类型 描述 默认值
title string 列的标题文本。 undefined
field string 列的字段名。 undefined
width number 列的宽度。如果未定义，则宽度会自动扩展以适应它的内容。没有定义宽度将会降低性能。 undefined
rowspan number 指示一个单元格占据多少行。 undefined
colspan number 指示一个单元格占据多少列。 undefined
align string 指示如何对齐该列的数据，可以用 'left'、'right'、'center'。 undefined
halign string 指示如何对齐该列的头部，可能的值：'left'、'right'、'center'。如果没有分配值，则头部对齐方式将与通过 'align' 属性定义的数据对齐方式一致。该属性自版本 1.3.2 起可用。 undefined
sortable boolean 设置为 true，则允许该列被排序。 undefined
order string 默认的排序顺序，只能用 'asc' 或 'desc'。该属性自版本 1.3.2 起可用。 undefined
resizable boolean 设置为 true，则允许该列可调整尺寸。 undefined
fixed boolean 设置为 true，则当 'fitColumns' 设置为 true 时放置调整宽度。 undefined
hidden boolean 设置为 true，则隐藏该列。 undefined
checkbox boolean 设置为 true，则显示复选框。复选框有固定宽度。 undefined
formatter function 单元格的格式化函数，需要三个参数：
value：字段的值。
rowData：行的记录数据。
rowIndex：行的索引。

代码实例： 
    

  1. 
$('#dg').datagrid({

    2. 

  2. 
	columns:[[

    3. 

  3. 
		{field:'userId',title:'User', width:80,

    4. 

  4. 
			formatter: function(value,row,index){

    5. 

  5. 
				if (row.user){

    6. 

  6. 
					return row.user.name;

    7. 

  7. 
				} else {

    8. 

  8. 
					return value;

    9. 

  9. 
				}

    10. 

  10. 
			}

    11. 

  11. 
		}

    12. 

  12. 
	]]

    13. 

  13. });
    14.
undefined
styler function 单元格的样式函数，返回样式字符串来自定义该单元格的样式，例如 'background:red' 。该函数需要三个参数：
value：字段的值。
rowData：行的记录数据。
rowIndex：行的索引。

代码实例： 
    

  1. 
$('#dg').datagrid({

    2. 

  2. 
	columns:[[

    3. 

  3. 
		{field:'listprice',title:'List Price', width:80, align:'right',

    4. 

  4. 
			styler: function(value,row,index){

    5. 

  5. 
				if (value < 20){

    6. 

  6. 
					return 'background-color:#ffee00;color:red;';

    7. 

  7. 
					// the function can return predefined css class and inline style

    8. 

  8. 
					// return {class:'c1',style:'color:red'}

    9. 

  9. 
				}

    10. 

  10. 
			}

    11. 

  11. 
		}

    12. 

  12. 
	]]

    13. 

  13. });
    14.
undefined
sorter function 用于本地排序的自定义字段的排序函数，需要两个参数：
a：第一个字段值。
b：第二个字段值。

代码实例： 
    

  1. 
$('#dg').datagrid({

    2. 

  2. 
	remoteSort: false,

    3. 

  3. 
	columns: [[

    4. 

  4. 
		{field:'date',title:'Date',width:80,sortable:true,align:'center',  

    5. 

  5. 
			sorter:function(a,b){  

    6. 

  6. 
				a = a.split('/');  

    7. 

  7. 
				b = b.split('/');  

    8. 

  8. 
				if (a[2] == b[2]){  

    9. 

  9. 
					if (a[0] == b[0]){  

    10. 

  10. 
						return (a[1]>b[1]?1:-1);  

    11. 

  11. 
					} else {  

    12. 

  12. 
						return (a[0]>b[0]?1:-1);  

    13. 

  13. 
					}  

    14. 

  14. 
				} else {  

    15. 

  15. 
					return (a[2]>b[2]?1:-1);  

    16. 

  16. 
				}  

    17. 

  17. 
			}  

    18. 

  18. 
		}

    19. 

  19. 
	]]

    20. 

  20. });
    21.
undefined
editor string,object 指示编辑类型。当是字符串（string）时则指编辑类型，当是对象（object）时则包含两个属性：
type：字符串，编辑类型，可能的类型：text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。
options：对象，编辑类型对应的编辑器选项。		 undefined

编辑器（Editor）

通过 $.fn.datagrid.defaults.editors 重写默认的 defaults。

每个编辑器有下列行为：

名称 参数 描述
init container, options 初始化编辑器并且返回目标对象。
destroy target 如果必要就销毁编辑器。
getValue target 从编辑器的文本获取值。
setValue target , value 给编辑器设置值。
resize target , width 如果必要就调整编辑器的尺寸。

例如，文本编辑器（text editor）定义如下：

    

  1. 
$.extend($.fn.datagrid.defaults.editors, {

    2. 

  2. 
    text: {

    3. 

  3. 
		init: function(container, options){

    4. 

  4. 
			var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);

    5. 

  5. 
			return input;

    6. 

  6. 
		},

    7. 

  7. 
		destroy: function(target){

    8. 

  8. 
			$(target).remove();

    9. 

  9. 
		},

    10. 

  10. 
		getValue: function(target){

    11. 

  11. 
			return $(target).val();

    12. 

  12. 
		},

    13. 

  13. 
		setValue: function(target, value){

    14. 

  14. 
			$(target).val(value);

    15. 

  15. 
		},

    16. 

  16. 
		resize: function(target, width){

    17. 

  17. 
			$(target)._outerWidth(width);

    18. 

  18. 
		}

    19. 

  19. 
    }

    20. 

  20. });
    21.

数据网格视图（DataGrid View）

通过 $.fn.datagrid.defaults.view 重写默认的 defaults。

视图（view）是一个对象，它告诉数据网格（datagrid）如何呈现行。该对象必须定义下列函数：

名称 参数 描述
render target, container, frozen 当数据加载时调用。
target：DOM 对象，数据网格（datagrid）对象。
container：行的容器。
frozen：指示是否呈现冻结容器。
renderFooter target, container, frozen 这是呈现行脚的选项函数。
renderRow target, fields, frozen, rowIndex, rowData 这是将会被 render 函数调用的选项函数。
refreshRow target, rowIndex 定义如何刷新指定的行。
onBeforeRender target, rows 视图被呈现前触发。
onAfterRender target 视图被呈现后触发。

事件

该事件扩展自面板（panel），下面是为数据网格（datagrid）添加的事件。

名称 参数 描述
onLoadSuccess data 当数据加载成功时触发。
onLoadError none 加载远程数据发生某些错误时触发。
onBeforeLoad param 发送加载数据的请求前触发，如果返回 false 加载动作就会取消。
onClickRow rowIndex, rowData 当用户点击一行时触发，参数包括：
rowIndex：被点击行的索引，从 0 开始
rowData：被点击行对应的记录
onDblClickRow rowIndex, rowData 当用户双击一行时触发，参数包括：
rowIndex：被双击行的索引，从 0 开始
rowData：被双击行对应的记录
onClickCell rowIndex, field, value 当用户单击一个单元格时触发。
onDblClickCell rowIndex, field, value 当用户双击一个单元格时触发。
代码实例： 
    

  1. // when double click a cell, begin editing and make the editor get focus
    2. 

  2. 
$('#dg').datagrid({

    3. 

  3. 
	onDblClickCell: function(index,field,value){

    4. 

  4. 
		$(this).datagrid('beginEdit', index);

    5. 

  5. 
		var ed = $(this).datagrid('getEditor', {index:index,field:field});

    6. 

  6. 
		$(ed.target).focus();

    7. 

  7. 
	}

    8. 

  8. });
    9.
onSortColumn sort, order 当用户对一列进行排序时触发，参数包括：
sort：排序的列的字段名
order：排序的列的顺序
onResizeColumn field, width 当用户调整列的尺寸时触发。
onSelect rowIndex, rowData 当用户选中一行时触发，参数包括：
rowIndex：选中行的索引，从 0 开始
rowData：选中行对应的记录
onUnselect rowIndex, rowData 当用户取消选中一行时触发，参数包括：
rowIndex：取消选中行的索引，从 0 开始
rowData：取消选中行对应的记录
onSelectAll rows 当用户选中全部行时触发。
onUnselectAll rows 当用户取消选中全部行时触发。
onCheck rowIndex,rowData 当用户勾选一行时触发，参数包括：
rowIndex：勾选行的索引，从 0 开始
rowData：勾选行对应的记录
该事件自版本 1.3 起可用。
onUncheck rowIndex,rowData 当用户取消勾选一行时触发，参数包括：
rowIndex：取消勾选行的索引，从 0 开始
rowData：取消勾选行对应的记录
该事件自版本 1.3 起可用。
onCheckAll rows 当用户勾选全部行时触发。该事件自版本 1.3 起可用。
onUncheckAll rows 当用户取消勾选全部行时触发。该事件自版本 1.3 起可用。
onBeforeEdit rowIndex, rowData 当用户开始编辑一行时触发，参数包括：
rowIndex：编辑行的索引，从 0 开始
rowData：编辑行对应的记录
onAfterEdit rowIndex, rowData, changes 当用户完成编辑一行时触发，参数包括：
rowIndex：编辑行的索引，从 0 开始
rowData：编辑行对应的记录
changes：更改的字段/值对
onCancelEdit rowIndex, rowData 当用户取消编辑一行时触发，参数包括：
rowIndex：编辑行的索引，从 0 开始
rowData：编辑行对应的记录
onHeaderContextMenu e, field 当数据网格（datagrid）的头部被右键单击时触发。
onRowContextMenu e, rowIndex, rowData 当右键点击行时触发。

方法

名称 参数 描述
options none 返回选项（options）对象。
getPager none 返回分页（pager）对象。
getPanel none 返回面板（panel）对象。
getColumnFields frozen 返回列的字段，如果 frozen 设置为 true，则冻结列的字段被返回。
代码实例： 
    

  1. 
var opts = $('#dg').datagrid('getColumnFields');	// get unfrozen columns

    2. 

  2. 
var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns

    3.
getColumnOption field 返回指定列的选项。
resize param 调整尺寸和布局。
load param 加载并显示第一页的行，如果指定 'param' 参数，它将替换 queryParams 属性。通常情况下，通过传递一些从参数进行查询，该方法被调用来从服务器加载新数据。 
    

  1. 
$('#dg').datagrid('load',{

    2. 

  2. 
	code: '01',

    3. 

  3. 
	name: 'name01'

    4. 

  4. });
    5.
reload param 重新加载行，就像 load 方法一样，但是保持在当前页。
reloadFooter footer 重新加载底部的行。代码实例： 
    

  1. // update footer row values and then refresh
    2. 

  2. 
var rows = $('#dg').datagrid('getFooterRows');

    3. 

  3. 
rows[0]['name'] = 'new name';

    4. 

  4. 
rows[0]['salary'] = 60000;

    5. 

  5. 
$('#dg').datagrid('reloadFooter');

    6. 

  6.  
    7. 

  7. // update footer rows with new data
    8. 

  8. 
$('#dg').datagrid('reloadFooter',[

    9. 

  9. 
	{name: 'name1', salary: 60000},

    10. 

  10. 
	{name: 'name2', salary: 65000}

    11. 

  11. ]);
    12.
loading none 显示正在加载状态。
loaded none 隐藏正在加载状态。
fitColumns none 使列自动展开/折叠以适应数据网格（datagrid）的宽度。
fixColumnSize field 固定列的尺寸。如果 'field' 参数未设置，所有的列的尺寸将是固定的。
代码实例： 
    

  1. 
$('#dg').datagrid('fixColumnSize', 'name');  // fix the 'name' column size

    2. 

  2. 
$('#dg').datagrid('fixColumnSize');  // fix all columns size

    3.
fixRowHeight index 固定指定行的高度。如果 'index' 参数未设置，所有的行的高度将是固定的。
freezeRow index 冻结指定的行，以便数据网格（datagrid）向下滚动时这些冻结行总是被显示在顶部。该方法自版本 1.3.2 起可用。
autoSizeColumn field 调整列的宽度以适应内容。该方法自版本 1.3 起可用。
loadData data 加载本地数据，旧的行会被移除。
getData none 返回加载的数据。
getRows none 返回当前页的行。
getFooterRows none 返回底部的行。
getRowIndex row 返回指定行的索引，row 参数可以是一个行记录或者一个 id 字段的值。
getChecked none 返回复选框选中的所有行。该方法自版本 1.3 起可用。
getSelected none 返回第一个选中的行或者 null。
getSelections none 返回所有选中的行，当没有选中的记录时，将返回空数组。
clearSelections none 清除所有的选择。
clearChecked none 清除所有勾选的行。该方法自版本 1.3.2 起可用。
scrollTo index 滚动到指定行。该方法自版本 1.3.3 起可用。
highlightRow index 高亮显示一行。该方法自版本 1.3.3 起可用。
selectAll none 选中当前页所有的行。
unselectAll none 取消选中当前页所有的行。
selectRow index 选中一行，行索引从 0 开始。
selectRecord idValue 通过传递 id 的值做参数选中一行。
unselectRow index 取消选中一行。
checkAll none 勾选当前页所有的行。该方法自版本 1.3 起可用。
uncheckAll none 取消勾选当前页所有的行。该方法自版本 1.3 起可用。
checkRow index 勾选一行，行索引从 0 开始。该方法自版本 1.3 起可用。
uncheckRow index 取消勾选一行，行索引从 0 开始。该方法自版本 1.3 起可用。
beginEdit index 开始对一行进行编辑。
endEdit index 结束对一行进行编辑。
cancelEdit index 取消对一行进行编辑。
getEditors index 获取指定行的编辑器。每个编辑器有下列属性：
actions：编辑器能做的动作，与编辑器定义相同。
target：目标编辑器的 jQuery 对象。
field：字段名。
type：编辑器的类型，比如：'text'、'combobox'、'datebox'，等等。
getEditor options 获取指定的编辑器， options 参数包含两个属性：
index：行的索引。
field：字段名。

代码实例： 
    

  1. // get the datebox editor and change its value
    2. 

  2. 
var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});

    3. 

  3. 
$(ed.target).datebox('setValue', '5/4/2012');

    4.
refreshRow index 刷新一行。
validateRow index 验证指定的行，有效时返回 true。
updateRow param 更新指定的行， param 参数包括下列属性：
index：要更新的行的索引。
row：新的行数据。

代码实例： 
    

  1. 
$('#dg').datagrid('updateRow',{

    2. 

  2. 
	index: 2,

    3. 

  3. 
	row: {

    4. 

  4. 
		name: 'new name',

    5. 

  5. 
		note: 'new note message'

    6. 

  6. 
	}

    7. 

  7. });
    8.
appendRow row 追加一个新行。新的行将被添加在最后的位置： 
    

  1. 
$('#dg').datagrid('appendRow',{

    2. 

  2. 
	name: 'new name',

    3. 

  3. 
	age: 30,

    4. 

  4. 
	note: 'some messages'

    5. 

  5. });
    6.
insertRow param 插入一个新行， param 参数包括下列属性：
index：插入进去的行的索引，如果没有定义，就追加该新行。
row：行的数据。

代码实例： 
    

  1. // insert a new row at second row position
    2. 

  2. 
$('#dg').datagrid('insertRow',{

    3. 

  3. 
	index: 1,	// index start with 0

    4. 

  4. 
	row: {

    5. 

  5. 
		name: 'new name',

    6. 

  6. 
		age: 30,

    7. 

  7. 
		note: 'some messages'

    8. 

  8. 
	}

    9. 

  9. });
    10.
deleteRow index 删除一行。
getChanges type 获取最后一次提交以来更改的行，type 参数表示更改的行的类型，可能的值是：inserted、deleted、updated，等等。当 type 参数没有分配时，返回所有改变的行。
acceptChanges none 提交自从被加载以来或最后一次调用 acceptChanges 以来所有更改的数据。
rejectChanges none 回滚自从创建以来或最后一次调用 acceptChanges 以来所有更改的数据。
mergeCells options 把一些单元格合并为一个单元格，options 参数包括下列特性：
index：列的索引。
field：字段名。
rowspan：合并跨越的行数。
colspan：合并跨越的列数。
showColumn field 显示指定的列。
hideColumn field 隐藏指定的列。










网络示例二：

创建datagrid

在页面上添加一个div或table标签，然后用jquery获取这个标签，并初始化一个datagrid。代码如下：

页面上的div标签：

<div id="magazineGrid">
</div>

js代码：

$('#magazineGrid').datagrid({
    height: 340,
    url: 'url',
    method: 'POST',
    queryParams: { 'id': id },
    idField: '产品ID',
    striped: true,
    fitColumns: true,
    singleSelect: false,
    rownumbers: true,
    pagination: false,
    nowrap: false,
    pageSize: 10,
    pageList: [10, 20, 50, 100, 150, 200],
    showFooter: true,
    columns: [[
        { field: 'ck', checkbox: true },
        { field: '刊名', title: '刊名', width: 180, align: 'left' },
        { field: '类别', title: '类别', width: 150, align: 'left' },
        { field: '月份', title: '月份', width: 100, align: 'left' },
        { field: '期次', title: '期次', width: 100, align: 'left' },
        { field: '价格', title: '价格', width: 100, align: 'right' },
        { field: '订阅数', title: '订阅数', width: 100, align: 'right' },
        { field: '库存数', title: '库存数', width: 100, align: 'right' },
        { field: '邮寄方式', title: '邮寄方式', width: 80, align: 'left' },
        { field: '数量', title: '数量', width: 80, align: 'left',
            editor: {
                type: 'numberbox',
                options: {
                    min: 0,
                    precision: 0
                }
            }
        }
    ]],
    onBeforeLoad: function (param) {
    },
    onLoadSuccess: function (data) {
        
    },
    onLoadError: function () {
        
    },
    onClickCell: function (rowIndex, field, value) {
        
    }
});

 

ajax请求返回的数据格式

datagrid在创建完成后会根据url请求数据，这是通过ajax来完成的。服务器在完成请求处理后应返回带有rows属性的数据，如果用到分页，还需要有total属性：

var rst = new { total = iTotalCount, rows = entityList };

说到ajax请求，难免需要在请求的时候传入一些查询条件，我通常是在onBeforeLoad事件中添加查询条件的：

onBeforeLoad: function (param) {
    var bId = $("#txtBId").val();
    var AllSearchKey = $("#txtAllSearchKey").val();
    param.bId = bId;
    param.AllSearchKey = AllSearchKey;
}

 

分页处理

如果要启用分页，在datagrid配置中，首先要加入如下配置：

pagination: true,

这样一来我们的datagrid底部就会出现一个分页工具栏。

这个时侯，datagrid在请求数据的时候会自动的添加分页的信息：

  • page：当前请求的页码
  • rows：每页要显示的行数

在服务器端获取到这两个参数值，然后通过获取数据库中的总数据行数来完成数据处理。

 

关于checkbox列

上面的js代码创建的datagrid本身已经添加了checkbox列，就是第一列。checkbox列将会自适应宽度。

{ field: 'ck', checkbox: true },

 

关于rownumber列

rownumber列的配置是在全局设置的，如果设置为true则会添加一列来显示行号。

rownumbers: true

 

行编辑功能的实现

datagrid本身提供了行编辑的功能。只需要两个步骤：

  1. 设置列的editor属性
  2. 手动触发编辑

第一步，我们需要在column配置中指明editor，editor有两个属性，type和options，有效的type字符串有：

text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree

options则对应这些控件的具体配置，包括事件等。

editor: {
    type: 'numberbox',
    options: {
        min: 0,
        precision: 0
    }
}

如果不需要特殊的options配置，直接将type字符串赋给editor即可。

editor:'text'

第二步，我们需要监听datagrid的onRowClick事件，或者onCellClick事件，我更愿意监听onCellClick事件，可以根据点击不同的字段来进入编辑模式，并设置单元格编辑控件的focus。

onClickCell: function (rowIndex, field, value) {
    beginEditing(rowIndex, field, value)
}

这里调用了beginEditing方法：

var editIndex = undefined;
var beginEditing = function (rowIndex, field, value) {
    if (field != "数量")
        return;

    if (rowIndex != editIndex) {
        if (endEditing()) {
            $('#magazineGrid').datagrid('beginEdit', rowIndex);
            editIndex = rowIndex;

            var ed = $('#magazineGrid').datagrid('getEditor', { index: rowIndex, field: '数量' });
            $(ed.target).focus().bind('blur', function () {
                endEditing();
            });
        } else {
            $('#magazineGrid').datagrid('selectRow', editIndex);
        }
    }
}
var endEditing = function () {
    if (editIndex == undefined) { return true }
    if ($('#magazineGrid').datagrid('validateRow', editIndex)) {
        var ed = $('#magazineGrid').datagrid('getEditor', { index: editIndex, field: '数量' });
        var number = $(ed.target).numberbox('getValue');
        $('#magazineGrid').datagrid('getRows')[editIndex]['数量'] = number;
        $('#magazineGrid').datagrid('endEdit', editIndex);
        $('#magazineGrid').datagrid('selectRow', editIndex);
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}

 

列格式化输出 formatter

在列的配种中设置formatter

formatter: function (value, row, index) {
    if (row.user) {
        return row.user.name;
    } else {
        return value;
    }
}

 

使用工具栏

toolbar: [{
    text: 'Add',
    iconCls: 'icon-add',
    handler: function () { alert('add') }
}, {
    text: 'Cut',
    iconCls: 'icon-cut',
    handler: function () { alert('cut') }
}, '-', {
    text: 'Save',
    iconCls: 'icon-save',
    handler: function () { alert('save') }
}],

 

使用CardView效果

cardView效果是这样的：

EasyUI Datagrid 数据网格

cardView的代码：

var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
    renderRow: function (target, fields, frozen, rowIndex, rowData) {
        var cc = [];
        cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">');
        if (!frozen) {
            var aa = rowData.itemid.split('-');
            var img = 'shirt' + aa[1] + '.gif';
            cc.push('<img src="images/' + img + '" style="width:150px;float:left">');
            cc.push('<div style="float:left;margin-left:20px;">');
            for (var i = 0; i < fields.length; i++) {
                var copts = $(target).datagrid('getColumnOption', fields[i]);
                cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');
            }
            cc.push('</div>');
        }
        cc.push('</td>');
        return cc.join('');
    }
});
$(function () {
    $('#tt').datagrid({
        view: cardview
    });
});

cardView其实是使用了datagrid的view配置，重写了其默认的renderRow方法。基于这种实现，我们可以显示更多样式的view。
网络示例三：

Datagride的初始化方式

方式1 ：class类型创建，这个创建方式比较简单，如果在已知表格内容的情况下可以使用，还是挺漂亮的

[html] view plain copy
 print?
  1. <table class="easyui-datagrid">    
  2.     <thead>    
  3.         <tr>    
  4.             <th data-options="field:'code'">Code</th>    
  5.             <th data-options="field:'name'">Name</th>    
  6.             <th data-options="field:'price'">Price</th>    
  7.         </tr>    
  8.     </thead>    
  9.     <tbody>    
  10.         <tr>    
  11.             <td>001</td><td>name1</td><td>2323</td>    
  12.         </tr>    
  13.         <tr>    
  14.             <td>002</td><td>name2</td><td>4612</td>    
  15.         </tr>    
  16.     </tbody>    
  17. </table>    

方式2：通过JavaScript方式创建，这种方式优势在于与后台的交互比较方便

1：生明一个Table

[html] view plain copy
 print?
  1. <table id="dg">  
  2. </table>  

2:在Js中实现

[javascript] view plain copy
 print?
  1. $('#dg').datagrid({     
  2.     url:'datagrid_data.json',     
  3.     columns:[[     
  4.         {field:'code',title:'Code',width:100},     
  5.         {field:'name',title:'Name',width:100},     
  6.         {field:'price',title:'Price',width:100,align:'right'}     
  7.     ]]     
  8. });   
上边的只是参考帮助文档的创建方式，下面将结合前后台对具体的内容进行实现

项目的后台使用的是SpringMvc,数据库是Mybaits

加载Url与Colum

1：前台JS

[html] view plain copy
 print?
  1. datagrid=$("#dg").datagrid({  
  2.             url:"/Test3/ModuleBeanController/getAll.do",//加载的URL  
  3.                 isField:"id",  
  4.             pagination:true,//显示分页  
  5.             pageSize:5,//分页大小  
  6.             pageList:[5,10,15,20],//每页的个数  
  7.             fit:true,//自动补全  
  8.             fitColumns:true,  
  9.             iconCls:"icon-save",//图标  
  10.             title:"用户管理",  
  11.             columns:[[      //每个列具体内容  
  12.                       {  
  13.                           field:'id',  
  14.                           title:'id',  
  15.                           width:100,  
  16.                      },     
  17.                       {field:'pid',title:'pid',width:100},     
  18.                       {field:'text',title:'text',width:100}     
  19.                   ]]  
  20. })  

2:后台的controller层

getAll.do

[java] view plain copy
 print?
  1. @RequestMapping(value="/getAll")  
  2. @ResponseBody  
  3. public List<ModuleBean> getAll(String page,String rows,String text) {  
  4.   
  5.     return moduleBeanService.getAll(page,rows,text);  
  6. }  

介绍一下几个参数

page:页数

rows：每页行数

Text：在以后的通过用户名查询时使用

3：service 层

getall()

[java] view plain copy
 print?
  1. @Override  
  2. public List<ModuleBean> getAll(String page,String rows,String text) {  
  3.     // TODO Auto-generated method stub  
  4.     page = (page==null?"1":page);  
  5.     rows = (rows==null?"5":rows);  
  6.     return modulebeanmapper.getAll(PageUtil.getRowNum(Integer.parseInt(page), Integer.parseInt(rows),text));  
  7. }  

pageUtil相关代码

[java] view plain copy
 print?
  1. package com.sc.util;  
  2.   
  3. import java.util.HashMap;  
  4. import java.util.Map;  
  5.   
  6. public class PageUtil {  
  7.   
  8.     public static Map<String,Object> getRowNum(int curPage,int pageSize,String text)  
  9.     {  
  10.         Map<String,Object> map=new HashMap<String,Object>();  
  11.         map.put("curRow", (curPage-1)*pageSize);  
  12.         map.put("pageSize", pageSize);  
  13.         if(text!=null)  
  14.         {  
  15.         map.put("text", "%"+text+"%");  
  16.         }  
  17.         else  
  18.         {  
  19.             map.put("text", "%%");  
  20.         }  
  21.           
  22.               
  23.         return map;  
  24.     }  
  25. }  


4:mapper层

getall（）

[html] view plain copy
 print?
  1. <select id="getAll" resultMap="BaseResultMap" parameterType="map">  
  2.  select * from tbl_sys_module  
  3.  <if test="#{text} != '%%'">  
  4.     where TEXT like #{text,jdbcType=VARCHAR}  
  5. </if>  
  6. limit #{curRow},#{pageSize}   
  7.   
  8. </select>  

就是一个查询语句select * from 表 where Text like #{text} limit rows,page

通过map返回

我的js的全部内容

[javascript] view plain copy
 print?
  1. var datagrid;  
  2. var rowEditor=undefined;  
  3. $(function(){  
  4.     datagrid=$("#dg").datagrid({  
  5.         url:"/Test3/ModuleBeanController/getAll.do",//加载的URL  
  6.         isField:"id",  
  7.         pagination:true,//显示分页  
  8.         pageSize:5,//分页大小  
  9.         pageList:[5,10,15,20],//每页的个数  
  10.         fit:true,//自动补全  
  11.         fitColumns:true,  
  12.         iconCls:"icon-save",//图标  
  13.         title:"用户管理",  
  14.         columns:[[      //每个列具体内容  
  15.                   {  
  16.                       field:'id',  
  17.                       title:'id',  
  18.                       width:100,  
  19.                       editor : {//是否可编辑  
  20.                             type : 'validatebox',  
  21.                             options : {//必须校验  
  22.                                 required : true  
  23.                             }  
  24.                         }  
  25.                  },     
  26.                   {field:'pid',title:'pid',width:100,editor : {  
  27.                         type : 'validatebox',  
  28.                         options : {  
  29.                             required : true  
  30.                         }  
  31.                     }},     
  32.                   {field:'text',title:'text',width:100,editor : {  
  33.                         type : 'validatebox',  
  34.                         options : {  
  35.                             required : true  
  36.                         }  
  37.                     }}     
  38.               ]],  
  39.         toolbar:[              //工具条  
  40.                 {text:"增加",iconCls:"icon-add",handler:function(){//回调函数  
  41.                     if(rowEditor==undefined)  
  42.                     {  
  43.                         datagrid.datagrid('insertRow',{//如果处于未被点击状态，在第一行开启编辑  
  44.                             index: 0,     
  45.                             row: {  
  46.                             }  
  47.                         });  
  48.                         rowEditor=0;  
  49.                         datagrid.datagrid('beginEdit',rowEditor);//没有这行，即使开启了也不编辑  
  50.                           
  51.                     }  
  52.                   
  53.   
  54.                 }},  
  55.                 {text:"删除",iconCls:"icon-remove",handler:function(){  
  56.                     var rows=datagrid.datagrid('getSelections');  
  57.             
  58.                     if(rows.length<=0)  
  59.                     {  
  60.                         $.messager.alert('警告','您没有选择','error');  
  61.                     }  
  62.                     else if(rows.length>1)  
  63.                     {  
  64.                         $.messager.alert('警告','不支持批量删除','error');  
  65.                     }  
  66.                     else  
  67.                     {  
  68.                         $.messager.confirm('确定','您确定要删除吗',function(t){  
  69.                             if(t)  
  70.                             {  
  71.                                   
  72.                                 $.ajax({  
  73.                                     url : '/Test3/ModuleBeanController/deletecustomer.do',  
  74.                                     data : rows[0],  
  75.                                     dataType : 'json',  
  76.                                     success : function(r) {  
  77.                                         if (r.success) {  
  78.                                             datagrid.datagrid('acceptChanges');  
  79.                                             $.messager.show({  
  80.                                                 msg : r.msg,  
  81.                                                 title : '成功'  
  82.                                             });  
  83.                                             editRow = undefined;  
  84.                                             datagrid.datagrid('reload');  
  85.                                         } else {  
  86.                                             /*datagrid.datagrid('rejectChanges');*/  
  87.                                             datagrid.datagrid('beginEdit', editRow);  
  88.                                             $.messager.alert('错误', r.msg, 'error');  
  89.                                         }  
  90.                                         datagrid.datagrid('unselectAll');  
  91.                                     }  
  92.                                 });  
  93.                               
  94.                             }  
  95.                         })  
  96.                     }  
  97.                       
  98.                       
  99.                 }},  
  100.                 {text:"修改",iconCls:"icon-edit",handler:function(){  
  101.                     var rows=datagrid.datagrid('getSelections');  
  102.                     if(rows.length==1)  
  103.                     {  
  104.                         if(rowEditor==undefined)  
  105.                         {  
  106.                             var index=datagrid.datagrid('getRowIndex',rows[0]);  
  107.                              rowEditor=index;  
  108.                             datagrid.datagrid('unselectAll');  
  109.                             datagrid.datagrid('beginEdit',index);  
  110.                               
  111.                         }  
  112.                     }  
  113.                 }},  
  114.                 {text:"查询",iconCls:"icon-search",handler:function(){}},  
  115.                 {text:"保存",iconCls:"icon-save",handler:function(){  
  116.                       
  117.                     datagrid.datagrid('endEdit',rowEditor);  
  118.                     rowEditor=undefined;  
  119.                 }},  
  120.                 {text:"取消编辑",iconCls:"icon-redo",handler:function(){  
  121.                     rowEditor=undefined;  
  122.                     datagrid.datagrid('rejectChanges')  
  123.                 }}  
  124.                 ],  
  125.         onAfterEdit:function(rowIndex, rowData, changes){  
  126.             var inserted = datagrid.datagrid('getChanges', 'inserted');  
  127.             var updated = datagrid.datagrid('getChanges', 'updated');  
  128.             if (inserted.length < 1 && updated.length < 1) {  
  129.                 editRow = undefined;  
  130.                 datagrid.datagrid('unselectAll');  
  131.                 return;  
  132.             }  
  133.   
  134.             var url = '';  
  135.             if (inserted.length > 0) {  
  136.                 url = '/Test3/ModuleBeanController/addcustomer.do';  
  137.             }  
  138.             if (updated.length > 0) {  
  139.                 url = '/Test3/ModuleBeanController/addcustomer.do';  
  140.             }  
  141.   
  142.             $.ajax({  
  143.                 url : url,  
  144.                 data : rowData,  
  145.                 dataType : 'json',  
  146.                 success : function(r) {  
  147.                     if (r.success) {  
  148.                         datagrid.datagrid('acceptChanges');  
  149.                         $.messager.show({  
  150.                             msg : r.msg,  
  151.                             title : '成功'  
  152.                         });  
  153.                         editRow = undefined;  
  154.                         datagrid.datagrid('reload');  
  155.                     } else {  
  156.                         /*datagrid.datagrid('rejectChanges');*/  
  157.                         datagrid.datagrid('beginEdit', editRow);  
  158.                         $.messager.alert('错误', r.msg, 'error');  
  159.                     }  
  160.                     datagrid.datagrid('unselectAll');  
  161.                 }  
  162.             });  
  163.               
  164.         },  
  165.         onDblClickCell:function(rowIndex, field, value){  
  166.             if(rowEditor==undefined)  
  167.             {  
  168.                 datagrid.datagrid('beginEdit',rowIndex);  
  169.                 rowEditor=rowIndex;  
  170.             }  
  171.               
  172.         }  
  173.     });  
  174.     $("#search").click(function(){  
  175.         datagrid.datagrid('load',{  
  176.             text:$("#text").val()  
  177.         });  
  178.   
  179.     });  
  180.       
  181. })  

2：controller层全部

[java] view plain copy
 print?
  1. package com.sc.controller;  
  2.   
  3. import java.util.HashMap;  
  4. import java.util.List;  
  5. import java.util.Map;  
  6.   
  7. import javax.servlet.http.HttpServletRequest;  
  8.   
  9. import org.springframework.beans.factory.annotation.Autowired;  
  10. import org.springframework.stereotype.Controller;  
  11. import org.springframework.web.bind.annotation.PathVariable;  
  12. import org.springframework.web.bind.annotation.RequestMapping;  
  13. import org.springframework.web.bind.annotation.ResponseBody;  
  14.   
  15. import com.sc.myservice.ModuleBeanService;  
  16. import com.sc.po.Menu;  
  17. import com.sc.po.ModuleBean;  
  18.   
  19. @Controller  
  20. @RequestMapping("ModuleBeanController")  
  21. public class ModuleBeanController {  
  22. private ModuleBeanService moduleBeanService;  
  23.       
  24.   
  25.     public ModuleBeanService getModuleBeanService() {  
  26.         return moduleBeanService;  
  27.     }  
  28.   
  29.     @Autowired  
  30.     public void setModuleBeanService(ModuleBeanService moduleBeanService) {  
  31.         this.moduleBeanService = moduleBeanService;  
  32.     }  
  33.     @RequestMapping(value="/{id}/showModuleBean" ,params="json")  
  34.     @ResponseBody  
  35.     public ModuleBean showModuleBean(@PathVariable String id) {  
  36.         Integer key=Integer.parseInt(id);  
  37.         ModuleBean moduleBean=moduleBeanService.searchByPrimaryKey(key);  
  38.         return moduleBean;  
  39.     }  
  40.       
  41.     @RequestMapping(value="/getAll")  
  42.     @ResponseBody  
  43.     public List<ModuleBean> getAll(String page,String rows,String text) {  
  44.       
  45.         return moduleBeanService.getAll(page,rows,text);  
  46.     }  
  47.       
  48.     @RequestMapping(value="/getMenu")  
  49.     @ResponseBody  
  50.     public List<Menu> getMenu(String id) {  
  51.         if(id==null)  
  52.             return moduleBeanService.searchByPrimaryPid(-1);  
  53.         else  
  54.           return moduleBeanService.searchByPrimaryPid(Integer.parseInt(id));  
  55.     }  
  56.     @RequestMapping("/addcustomer")  
  57.     @ResponseBody  
  58.     public Map<String,Object> addCustomer(ModuleBean moduleBean) {  
  59.           
  60.         Map<String,Object> map = new HashMap<String,Object>();  
  61.         int result = moduleBeanService.save(moduleBean);  
  62.         map.put("success", result);  
  63.         return map;  
  64.     }  
  65.     @RequestMapping("/upadatacustomer")  
  66.     @ResponseBody  
  67.     public Map<String,Object> upadataCustomer(ModuleBean moduleBean) {  
  68.           
  69.         Map<String,Object> map = new HashMap<String,Object>();  
  70.         int result = moduleBeanService.updateByPrimaryKey(moduleBean);  
  71.         map.put("success", result);  
  72.         return map;  
  73.     }  
  74.     @RequestMapping("/deletecustomer")  
  75.     @ResponseBody  
  76.     public Map<String,Object> deleteCustomer(String ids) {  
  77.           
  78.         Map<String,Object> map = new HashMap<String,Object>();  
  79.         int result = moduleBeanService.deleteByPrimaryKey(Integer.parseInt(ids));  
  80.           
  81.         map.put("success", result);  
  82.           
  83.         return map;  
  84.     }  
  85.       
  86.   
  87.   
  88. }  

service层实现

[java] view plain copy
 print?
  1. package com.sc.myservice.impl;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import org.springframework.beans.BeanUtils;  
  7. import org.springframework.beans.factory.annotation.Autowired;  
  8. import org.springframework.stereotype.Service;  
  9.   
  10. import com.sc.dao.ModuleBeanMapper;  
  11. import com.sc.myservice.ModuleBeanService;  
  12. import com.sc.po.Menu;  
  13. import com.sc.po.ModuleBean;  
  14. import com.sc.util.PageUtil;  
  15. @Service("moduleBeanService")  
  16. public class ModuleBeanServiceImpl implements ModuleBeanService {  
  17.     private ModuleBeanMapper modulebeanmapper;  
  18.       
  19.   
  20.     public ModuleBeanMapper getModulebeanmapper() {  
  21.         return modulebeanmapper;  
  22.     }  
  23.   
  24.     @Autowired  
  25.     public void setModulebeanmapper(ModuleBeanMapper modulebeanmapper) {  
  26.         this.modulebeanmapper = modulebeanmapper;  
  27.     }  
  28.   
  29.     @Override  
  30.     public ModuleBean searchByPrimaryKey(int kay) {  
  31.          ModuleBean moduleBean=modulebeanmapper.selectByPrimaryKey(kay);  
  32.             // TODO Auto-generated method stub  
  33.             return  moduleBean;  
  34.     }  
  35.   
  36.     @Override  
  37.     public int save(ModuleBean moduleBean) {  
  38.         // TODO Auto-generated method stub  
  39.         return modulebeanmapper.insert(moduleBean);  
  40.     }  
  41.   
  42.     @Override  
  43.     public List<ModuleBean> getAll(String page,String rows,String text) {  
  44.         // TODO Auto-generated method stub  
  45.         page = (page==null?"1":page);  
  46.         rows = (rows==null?"5":rows);  
  47.         return modulebeanmapper.getAll(PageUtil.getRowNum(Integer.parseInt(page), Integer.parseInt(rows),text));  
  48.     }  
  49.   
  50.     @Override  
  51.     public int updateByPrimaryKey(ModuleBean record) {  
  52.         // TODO Auto-generated method stub  
  53.         return modulebeanmapper.updateByPrimaryKey(record);  
  54.     }  
  55.   
  56.     @Override  
  57.     public int deleteByPrimaryKey(Integer id) {  
  58.         // TODO Auto-generated method stub  
  59.         return modulebeanmapper.deleteByPrimaryKey(id);  
  60.     }  
  61.   
  62.     @Override  
  63.     public List<Menu> searchByPrimaryPid(int pid) {  
  64.         // TODO Auto-generated method stub  
  65.         List<Menu> menulist=new ArrayList<Menu>();  
  66.         List<ModuleBean> beanlist=modulebeanmapper.selectByPrimaryPid(pid);  
  67.         if(beanlist!=null)  
  68.         {  
  69.             Menu menu=new Menu();  
  70.             for(ModuleBean b:beanlist)  
  71.             {  
  72.                 BeanUtils.copyProperties(b, menu);  
  73.                 if(b.getState()==1)  
  74.                 {  
  75.                     menu.setState("closed");  
  76.                 }  
  77.                 menulist.add(menu);  
  78.             }  
  79.               
  80.         }  
  81.         return menulist;  
  82.     }  
  83.   
  84.       
  85.       
  86.   
  87. }  

mapper层

[html] view plain copy
 print?
  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >  
  3. <mapper namespace="com.sc.dao.ModuleBeanMapper" >  
  4.   <resultMap id="BaseResultMap" type="com.sc.po.ModuleBean" >  
  5.     <id column="ID" property="id" jdbcType="INTEGER" />  
  6.     <result column="PID" property="pid" jdbcType="INTEGER" />  
  7.     <result column="TEXT" property="text" jdbcType="VARCHAR" />  
  8.     <result column="ICONCLS" property="iconcls" jdbcType="VARCHAR" />  
  9.     <result column="SRC" property="src" jdbcType="VARCHAR" />  
  10.     <result column="SEQ" property="seq" jdbcType="INTEGER" />  
  11.     <result column="IS_MENU" property="isMenu" jdbcType="INTEGER" />  
  12.     <result column="STATE" property="state" jdbcType="INTEGER" />  
  13.   </resultMap>  
  14.   <sql id="Base_Column_List" >  
  15.     ID, PID, TEXT, ICONCLS, SRC, SEQ, IS_MENU, STATE  
  16.   </sql>  
  17.   <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >  
  18.     select   
  19.     <include refid="Base_Column_List" />  
  20.     from tbl_sys_module  
  21.     where ID = #{id,jdbcType=INTEGER}  
  22.   </select>  
  23.    <select id="selectByPrimaryPid" resultMap="BaseResultMap" parameterType="java.lang.Integer" >  
  24.     select * from tbl_sys_module  
  25.     where PID = #{pid,jdbcType=INTEGER}  
  26.   </select>  
  27.   <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >  
  28.     delete from tbl_sys_module  
  29.     where ID = #{id,jdbcType=INTEGER}  
  30.   </delete>  
  31.   <insert id="insert" parameterType="com.sc.po.ModuleBean" >  
  32.     insert into tbl_sys_module (ID, PID, TEXT,   
  33.       ICONCLS, SRC, SEQ,   
  34.       IS_MENU, STATE)  
  35.     values (#{id,jdbcType=INTEGER}, #{pid,jdbcType=INTEGER}, #{text,jdbcType=VARCHAR},   
  36.       #{iconcls,jdbcType=VARCHAR}, #{src,jdbcType=VARCHAR}, #{seq,jdbcType=INTEGER},   
  37.       #{isMenu,jdbcType=INTEGER}, #{state,jdbcType=INTEGER})  
  38.   </insert>  
  39.   <insert id="insertSelective" parameterType="com.sc.po.ModuleBean" >  
  40.     insert into tbl_sys_module  
  41.     <trim prefix="(" suffix=")" suffixOverrides="," >  
  42.       <if test="id != null" >  
  43.         ID,  
  44.       </if>  
  45.       <if test="pid != null" >  
  46.         PID,  
  47.       </if>  
  48.       <if test="text != null" >  
  49.         TEXT,  
  50.       </if>  
  51.       <if test="iconcls != null" >  
  52.         ICONCLS,  
  53.       </if>  
  54.       <if test="src != null" >  
  55.         SRC,  
  56.       </if>  
  57.       <if test="seq != null" >  
  58.         SEQ,  
  59.       </if>  
  60.       <if test="isMenu != null" >  
  61.         IS_MENU,  
  62.       </if>  
  63.       <if test="state != null" >  
  64.         STATE,  
  65.       </if>  
  66.     </trim>  
  67.     <trim prefix="values (" suffix=")" suffixOverrides="," >  
  68.       <if test="id != null" >  
  69.         #{id,jdbcType=INTEGER},  
  70.       </if>  
  71.       <if test="pid != null" >  
  72.         #{pid,jdbcType=INTEGER},  
  73.       </if>  
  74.       <if test="text != null" >  
  75.         #{text,jdbcType=VARCHAR},  
  76.       </if>  
  77.       <if test="iconcls != null" >  
  78.         #{iconcls,jdbcType=VARCHAR},  
  79.       </if>  
  80.       <if test="src != null" >  
  81.         #{src,jdbcType=VARCHAR},  
  82.       </if>  
  83.       <if test="seq != null" >  
  84.         #{seq,jdbcType=INTEGER},  
  85.       </if>  
  86.       <if test="isMenu != null" >  
  87.         #{isMenu,jdbcType=INTEGER},  
  88.       </if>  
  89.       <if test="state != null" >  
  90.         #{state,jdbcType=INTEGER},  
  91.       </if>  
  92.     </trim>  
  93.   </insert>  
  94.   <update id="updateByPrimaryKeySelective" parameterType="com.sc.po.ModuleBean" >  
  95.     update tbl_sys_module  
  96.     <set >  
  97.       <if test="pid != null" >  
  98.         PID = #{pid,jdbcType=INTEGER},  
  99.       </if>  
  100.       <if test="text != null" >  
  101.         TEXT = #{text,jdbcType=VARCHAR},  
  102.       </if>  
  103.       <if test="iconcls != null" >  
  104.         ICONCLS = #{iconcls,jdbcType=VARCHAR},  
  105.       </if>  
  106.       <if test="src != null" >  
  107.         SRC = #{src,jdbcType=VARCHAR},  
  108.       </if>  
  109.       <if test="seq != null" >  
  110.         SEQ = #{seq,jdbcType=INTEGER},  
  111.       </if>  
  112.       <if test="isMenu != null" >  
  113.         IS_MENU = #{isMenu,jdbcType=INTEGER},  
  114.       </if>  
  115.       <if test="state != null" >  
  116.         STATE = #{state,jdbcType=INTEGER},  
  117.       </if>  
  118.     </set>  
  119.     where ID = #{id,jdbcType=INTEGER}  
  120.   </update>  
  121.   <update id="updateByPrimaryKey" parameterType="com.sc.po.ModuleBean" >  
  122.     update tbl_sys_module  
  123.     set PID = #{pid,jdbcType=INTEGER},  
  124.       TEXT = #{text,jdbcType=VARCHAR},  
  125.       ICONCLS = #{iconcls,jdbcType=VARCHAR},  
  126.       SRC = #{src,jdbcType=VARCHAR},  
  127.       SEQ = #{seq,jdbcType=INTEGER},  
  128.       IS_MENU = #{isMenu,jdbcType=INTEGER},  
  129.       STATE = #{state,jdbcType=INTEGER}  
  130.     where ID = #{id,jdbcType=INTEGER}  
  131.   </update>  
  132.   <select id="getAll" resultMap="BaseResultMap" parameterType="map">  
  133.      select * from tbl_sys_module  
  134.    <if test="#{text} != '%%'">  
  135.     where TEXT like #{text,jdbcType=VARCHAR}  
  136.   </if>  
  137.   limit #{curRow},#{pageSize}   
  138.    
  139.   </select>  
  140. </mapper>  


效果截图

EasyUI Datagrid 数据网格






相关推荐