李炎恢jQuery EasyUI中DataGrid(数据表格)-优快云博客

本文介绍如何利用jQuery EasyUI构建具备增删改查功能的数据表格应用，通过结合JavaScript和PHP实现前后端交互，包括数据加载、编辑、保存及删除等功能。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<style>
.textbox{
	height:20px;
	margin:0;
	padding:0 2px;
	box-sizing:content-box;
}
</style>
</head>
<body>

<table id="box"></table>

<div id="tb" style="padding:5px;">
	<div style="margin-bottom:5px;">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="obj.add();">添加</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="obj.edit();">修改</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="obj.remove();">删除</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" style="display:none;" id="save" onclick="obj.save();">保存</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true" style="display:none;" id="redo" onclick="obj.redo();">取消编辑</a>		
	</div>
	<div style="padding:0 0 0 7px;color:#333;">
		查询帐号：<input type="text" class="textbox" name="user" style="width:110px">
		创建时间从：<input type="text" name="date_from" class="easyui-datebox" editable="false" style="width:110px">
		到：<input type="text" name="date_to" class="easyui-datebox" editable="false" style="width:110px">
		<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="obj.search();">查询</a>
	</div>
</div>

<div id="menu" class="easyui-menu" style="width:120px;display:none;">
	<div onclick="" iconCls="icon-add">增加</div>
	<div onclick="" iconCls="icon-remove">删除</div>
	<div onclick="" iconCls="icon-edit">修改</div>
</div>

<input type="button" value="按钮" onclick="abc()">

</body>
</html>

js\index.js

//扩展 dateTimeBox
$.extend($.fn.datagrid.defaults.editors, {
	datetimebox : {
		init: function(container, options){
			var input = $('<input type="text">').appendTo(container);
			options.editable = false;
			input.datetimebox(options);
			return input;
		},
		getValue: function(target){
			return $(target).datetimebox('getValue');
		},
		setValue: function(target, value){
			$(target).datetimebox('setValue', value);
		},
		resize: function(target, width){
			$(target).datetimebox('resize', width);
		},
		destroy : function (target) {
			$(target).datetimebox('destroy');
		},
	}
});

$(function () {

    //创建对象
    obj = {
        //变量(编辑的行)
        editRow: undefined,
        //方法
        search: function () {
            //datagrid的方法load：加载和显示第一页的所有行，即刷新当前页
			$('#box').datagrid('load', {
				user : $.trim($('input[name="user"]').val()),
				date_from : $('input[name="date_from"]').val(),
				date_to : $('input[name="date_to"]').val(),
			});
		},
		add : function () {
			$('#save,#redo').show();//保存按钮和撤销按钮隐藏
			/*
			//当前页行结尾添加
			$('#box').datagrid('appendRow', {
				user : 'bnbbs',
				email : 'bnbbs@163.com',
				date : '2014-11-11',
			});
			*/
			
			if (this.editRow == undefined) {
			    //添加一行 
			    //datagrid方法insertRow 插入新行
				$('#box').datagrid('insertRow', {
					index : 0,
					row : {
						/*
						user : 'bnbbs',
						email : 'bnbbs@163.com',
						date : '2014-11-11',
						*/
					},
				});
				
				//将第一行设置为可编辑状态
				$('#box').datagrid('beginEdit', 0);
				
				this.editRow = 0;
			}
		},
		save : function () {
			//这两句不应该放这里，应该是保存成功后，再执行
			//$('#save,#redo').hide();
			//this.editRow = false;
			//将第一行设置为结束编辑状态
			$('#box').datagrid('endEdit', this.editRow);
		},
		redo : function () {
			$('#save,#redo').hide();
			this.editRow = undefined;
		    //datagrid的方法rejectChanges：回 滚 所 有 从 创 建 或 上 一 次 调 用acceptChanges 函数后更改的数据。
			$('#box').datagrid('rejectChanges');
		},
		edit: function () {
		    //datagrid方法getSelections：返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。
		    var rows = $('#box').datagrid('getSelections');
            //如果已有选择行
			if (rows.length == 1) {
				if (this.editRow != undefined) {
				    $('#box').datagrid('endEdit', this.editRow);//结束编辑行
				}
			
				if (this.editRow == undefined) {
				    //datagrid方法getRowIndex：获取到当前行的索引。
					var index = $('#box').datagrid('getRowIndex', rows[0]);
					$('#save,#redo').show();
					$('#box').datagrid('beginEdit', index);//开始编辑行。
					this.editRow = index;
					$('#box').datagrid('unselectRow', index);//取消指定选择的行。
				}
			} else {
				$.messager.alert('警告', '修改必须或只能选择一行！', 'warning');
			}
		},
		remove: function () {
		    //返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。
			var rows = $('#box').datagrid('getSelections');
			if (rows.length > 0) {
				$.messager.confirm('确定操作', '您正在要删除所选的记录吗？', function (flag) {
					if (flag) {
						var ids = [];
						for (var i = 0; i < rows.length; i ++) {
							ids.push(rows[i].id);
						}
						//console.log(ids.join(','));
						$.ajax({
							type : 'POST',
							url : 'delete.php',
							data : {
								ids : ids.join(','),
							},
							beforeSend : function () {
								$('#box').datagrid('loading');
							},
							success : function (data) {
								if (data) {
									$('#box').datagrid('loaded');
									$('#box').datagrid('load');
									$('#box').datagrid('unselectAll');
									$.messager.show({
										title : '提示',
										msg : data + '个用户被删除成功！',
									});
								}
							},
						});
					}
				});
			} else {
				$.messager.alert('提示', '请选择要删除的记录！', 'info');
			}
		},
	};

	$('#box').datagrid({
		width : 600,
		//url : 'content.json',
		url: 'user.php', //datagrid的属性url:从远程请求数据。默认为 null。
		title : '用户列表',
		iconCls : 'icon-search',
		striped: true,//是否显示斑马线效果
		nowrap: true,//是否在一行显示所有数据。默认为 true。
		rownumbers: true,//设置 true，显示一个行号。默认为 false。
		loadMsg: '努力展开中...',//从远程加载数据显示的提示信息。
	    //singleSelect : true,//设置 true，只能选定一行。默认为 false。
		/*
		fitColumns : false,//是否自动展开或收缩，以达到自适应。默认为 false。
		frozenColumns : [[
			{
				field : 'id',
				title : '编号',
				sortable : true,
				width : 100,
				checkbox : true,
			},
			{
				field : 'user',
				title : '帐号',
				sortable : true,
				width : 100,
				editor : {
					type : 'validatebox',
					options : {
						required : true,
					},
				},
			},
		]],
		*/
		fitColumns: true,//是否自动展开或收缩，以达到自适应。默认为 false。
	    //DataGrid的列属性：值是array类型
		columns : [[
			{
			    field: 'id',//列字段名称
			    title: '编号',//列标题名称
				sortable : true,//允许列排序
				width : 100,//列宽度
				checkbox: true,
			    //align : 'center',//对齐列数据。有 left,center,right 三种。默认为 undefined。
			    //halign : 'center',//对齐标题。有 left,center,right 三种。默认为undefined。
			    //resizable : false,//设置 true，则允许改变大小。
			},
			{
				field : 'user',
				title : '帐号',
				sortable : true,
				width : 100,
				editor : {
					type : 'validatebox',
					options : {
						required : true,
					},
				},
			    //单元格格式化函数，接受三个参数：value 值,row对象,index 索引。
				formatter : function (value, rowData, rowIndex) {
					return '[' + value + ']';
				},
			},
			{
				field : 'email',
				title : '邮件',
				sortable : true,
				width: 100,
			    //指明编辑类型。当字符串指明编辑类型的时候，对象包含两个属性：
                //type ： 字 符 串 ， 可 使 用 的 类 型 有 ：text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
                //options：对象，object，该编辑器属性对应于编辑类型。
				editor : {
					type : 'validatebox',
					options : {
						required : true,
						validType : 'email',
					},
				},
			},
			{
				field : 'date',
				title : '注册时间',
				sortable : true,
				width : 100,
				editor : {
					type : 'datetimebox',
					options : {
						required : true,
					},
				},
			},
		]],
		toolbar : '#tb',//工具条（查询）
		pagination : true,//在 DataGrid 组件底部显示分页工具栏。
		pageSize: 10,//设置分页时设置每页多少条。默认为10。
		pageList: [10, 20, 30],//设置分页时初始化条数选择大小。值为数组。
		pageNumber: 1,//分页时初始化页码
		sortName: 'date',//DataGrid 属性sortName:设置哪些列可以进行排序。默认为 null。
		sortOrder: 'DESC',//设置列排序的顺序,ASC和DESC，默认是ASC。
        //双击行时，行可以编辑
		onDblClickRow : function (rowIndex, rowData) {
		
			if (obj.editRow != undefined) {
				$('#box').datagrid('endEdit', obj.editRow);
			}
		
			if (obj.editRow == undefined) {
				$('#save,#redo').show();
				$('#box').datagrid('beginEdit', rowIndex);
				obj.editRow = rowIndex;
			}
			
		},
        //结束行编辑后，执行插入或编辑数据库
		onAfterEdit : function (rowIndex, rowData, changes) {
		    $('#save,#redo').hide();
		    //datagrid的getChanges方法：
		    //从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，
			//可以使用的值有：inserted,deleted,updated 等。
			//当类型参数未配置的时候返回所有改变的行。
			var inserted = $('#box').datagrid('getChanges', 'inserted');
			var updated = $('#box').datagrid('getChanges', 'updated');
			
			var url = info =  '';
			
			//新增用户
			if (inserted.length > 0) {
				url = 'add.php';
				info = '新增';
			}
			
			//修改用户
			if (updated.length > 0) {
				url = 'update.php';
				info = '修改';
			}
			
			$.ajax({
				type : 'POST',
				url : url,
				data : {
					row : rowData,
				},
				beforeSend : function () {
				    $('#box').datagrid('loading');//显示载入状态。
				},
				success : function (data) {
					if (data) {
					    $('#box').datagrid('loaded');//隐藏载入状态。
						$('#box').datagrid('load'); //加载和显示第一页的所有行，即刷新当前页。
						$('#box').datagrid('unselectAll');//取消所有当前页中的所有行
						$.messager.show({
							title : '提示',
							msg : data + '个用户被' + info + '成功！',
						});
						obj.editRow = undefined;
					}
				},
			});
			//console.log(rowData);
		},
        //右键标题
		onHeaderContextMenu : function (e, filed) {
			//alert('右击标题！');
			//console.log(filed);
		},
        //右键行
		onRowContextMenu : function (e, rowIndex, rowData) {
			e.preventDefault();
			//console.log(rowIndex);
			//console.log(rowData);
			$('#menu').menu('show', {
				left : e.pageX,
				top : e.pageY,
			});
		},
		/*
		onClickRow : function () {
			alert('单击一行时触发！');
		},
		onClickCell : function (rowIndex, field, value) {
			alert('单击一个单元格时触发！' + field);
		},
		onUnselect : function () {
			alert('取消选择！');
		},
		onCheck : function () {
			alert('勾选时触发！');
		},
		onCancelEdit : function () {
			alert('取消编辑时触发！');
		}
		onSortColumn : function (sort, order) {
			alert('排序时触发！' + sort + order);
		}
		*/
	});
	
	
	
});

function abc() {
	//$('#box').datagrid('deleteRow', 0);
	//$('#box').datagrid('checkAll');
	//$('#box').datagrid('highlightRow', 0);
	$('#box').datagrid('mergeCells', {
		index : 0,
		field : 'user',
		//rowspan : 5,
		//colspan : 3,
	});
}

content.json

[
	{
		"user" : "蜡笔小新",
		"email" : "xiaoxin@163.com",
		"date" : "2014-10-1"
	},
	{
		"user" : "樱桃小丸子",
		"email" : "xiaowanzi@163.com",
		"date" : "2014-10-2"
	},
	{
		"user" : "黑崎一护",
		"email" : "yihu@163.com",
		"date" : "2014-10-3"
	}
]

config.php

<?php
	header('Content-Type:text/html; charset=utf-8');
	
	define('DB_HOST', 'localhost');
	define('DB_USER', 'root');
	define('DB_PWD', '123456');
	define('DB_NAME', 'thinkphp');
	
	$conn = @mysql_connect(DB_HOST, DB_USER, DB_PWD) or die('数据库链接失败：'.mysql_error());
	
	@mysql_select_db(DB_NAME) or die('数据库错误：'.mysql_error());
	
	@mysql_query('SET NAMES UTF8') or die('字符集错误：'.mysql_error());
?>

user.php

<?php
	//sleep(3);
	require 'config.php';
	
	$page = $_POST['page'];
	$pageSize = $_POST['rows'];
	$first = $pageSize * ($page - 1);
	
	$order = $_POST['order'];
	$sort = $_POST['sort'];
	
	$sql = '';
	$user = '';
	$date_from = '';
	$date_to = '';
	
	if (isset($_POST['user']) && !empty($_POST['user'])) {
		$user = "user LIKE '%{$_POST['user']}%' AND ";
		$sql .= $user;
	}
	
	if (isset($_POST['date_from']) && !empty($_POST['date_from'])) {
		$date_from = "date>='{$_POST['date_from']}' AND ";
		$sql .= $date_from;
	}
	
	if (isset($_POST['date_to']) && !empty($_POST['date_to'])) {
		$date_to = "date<='{$_POST['date_to']}' AND ";
		$sql .= $date_to;
	}
	
	if (!empty($sql)) {
		$sql = 'WHERE '.substr($sql, 0, -4);
	}
	
	$query = mysql_query("SELECT id,user,email,date FROM think_user $sql ORDER BY $sort $order LIMIT $first,$pageSize") or die('SQL 错误！');
	$total = mysql_num_rows(mysql_query("SELECT id,user,email,date FROM think_user $sql"));
	
	
	$json = '';
	
	while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) {
		$json .= json_encode($row).',';
	}

	$json = substr($json, 0, -1);
	echo '{"total" : '.$total.', "rows" : ['.$json.'], "footer" : [{"user" : "统计","email" : "统计","date" : "统计"}]}';
	mysql_close();
?>

total 表总记录

add.php

<?php
	//sleep(3);
	require 'config.php';
	
	$row = $_POST['row'];
	$user = $row['user'];
	$email = $row['email'];
	$date = $row['date'];

	mysql_query("INSERT INTO think_user (user,email,date) VALUES ('$user','$email','$date')") or die('SQL 错误！');

	echo mysql_affected_rows();
	
	mysql_close();

?>

delete.php

<?php
	//sleep(3);
	require 'config.php';
	
	$ids = $_POST['ids'];
	
	mysql_query("DELETE FROM think_user WHERE id IN ($ids)") or die('SQL 错误！');

	echo mysql_affected_rows();
	
	mysql_close();
?>

update.php

<?php
	//sleep(3);
	require 'config.php';
	
	$row = $_POST['row'];
	$id = $row['id'];
	$user = $row['user'];
	$email = $row['email'];
	$date = $row['date'];

	mysql_query("UPDATE think_user SET user='$user',email='$email',date='$date' WHERE id='$id'") or die('SQL 错误！');

	echo mysql_affected_rows();
	
	mysql_close();
?>