jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用
jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用
介绍
jQuery EasyUI 是一套开源的基于jQuery的UI库，提供了一系列易于使用的UI组件和插件，能够帮助Web开发人员快速地构建丰富的Web应用程序。
本文主要介绍如何利用jQuery EasyUI创建一个展开行明细编辑表单的CRUD（Create、Retrieve、Update、Delete）应用。
准备工作
在开始使用jQuery EasyUI之前，我们需要先进行以下准备工作：
- 引入jQuery和jQuery EasyUI的CSS和JS文件。
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/default/easyui.css" />
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/icon.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/jquery.easyui.min.js"></script>
- 准备好后端服务接口，用于实现数据的增删改查操作。本文以PHP语言为例，使用了PDO扩展提供的数据库访问功能。
创建展开行明细编辑表单的CRUD应用
1. 创建数据表
首先我们需要创建一张数据表，用于存储要进行CRUD操作的数据。本文以学生信息为例，创建了一张名为students的数据表，包含以下字段：
CREATE TABLE students (
id INT(11) NOT NULL AUTO_INCREMENT,
name VARCHAR(50) NOT NULL,
sex ENUM('男', '女') NOT NULL DEFAULT '男',
age TINYINT(3) UNSIGNED NOT NULL,
tel VARCHAR(20) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
2. 创建数据访问层
接着我们需要创建一个数据访问层，用于实现对数据库中数据的增删改查操作。以下是一个名为StudentModel的数据访问类，它封装了对students表的增删改查操作。
class StudentModel
{
private $pdo;
public function __construct(PDO $pdo)
{
$this->pdo = $pdo;
}
public function add($data)
{
$sql = "INSERT INTO students(name, sex, age, tel) VALUES(:name, :sex, :age, :tel)";
$stmt = $this->pdo->prepare($sql);
return $stmt->execute($data);
}
public function update($id, $data)
{
$sql = "UPDATE students SET name=:name, sex=:sex, age=:age, tel=:tel WHERE id=:id";
$stmt = $this->pdo->prepare($sql);
$stmt->bindValue(':id', $id, PDO::PARAM_INT);
return $stmt->execute($data);
}
public function delete($id)
{
$sql = "DELETE FROM students WHERE id=:id";
$stmt = $this->pdo->prepare($sql);
$stmt->bindValue(':id', $id, PDO::PARAM_INT);
return $stmt->execute();
}
public function findById($id)
{
$sql = "SELECT * FROM students WHERE id=:id";
$stmt = $this->pdo->prepare($sql);
$stmt->bindValue(':id', $id, PDO::PARAM_INT);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
return $result ? $result[0] : false;
}
public function findAll()
{
$sql = "SELECT * FROM students";
$stmt = $this->pdo->prepare($sql);
$stmt->execute();
return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
}
3. 创建UI界面
然后我们需要创建一个UI界面，用于展示和编辑数据。本文使用jQuery EasyUI提供的datagrid组件展示数据，使用dialog组件编辑数据。
<table id="dg"></table>
<div id="dlg">
<form id="fm" method="post" novalidate>
<input type="hidden" name="id" value="">
<div class="fitem">
<label>姓名:</label>
<input name="name" class="easyui-textbox" required>
</div>
<div class="fitem">
<label>性别:</label>
<select name="sex" class="easyui-combobox" required>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="fitem">
<label>年龄:</label>
<input name="age" class="easyui-numberbox" required>
</div>
<div class="fitem">
<label>电话:</label>
<input name="tel" class="easyui-textbox" required>
</div>
</form>
</div>
其中，datagrid组件用于展示数据，dialog组件用于编辑数据。
$('#dg').datagrid({
url: 'students.php?action=findAll',
method: 'get',
fitColumns: true,
singleSelect: true,
rownumbers: true,
pagination: true,
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function(){
$('#fm').form('clear');
$('#dlg').dialog('open').dialog('setTitle','添加学生信息');
}
}, '-', {
text: '修改',
iconCls: 'icon-edit',
handler: function(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#fm').form('clear');
$('#fm').form('load', row);
$('#dlg').dialog('open').dialog('setTitle','修改学生信息');
}
}
}, '-', {
text: '删除',
iconCls: 'icon-remove',
handler: function(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('确认','您确定要删除该学生信息吗？',function(r){
if (r){
$.get('students.php?action=delete&id=' + row.id, function(data){
if (data=='success'){
$('#dg').datagrid('reload');
} else {
$.messager.show({
title: '错误',
msg: data
});
}
});
}
});
}
}
}],
columns: [[
{field:'name',title:'姓名',width:100},
{field:'sex',title:'性别',width:50},
{field:'age',title:'年龄',width:50},
{field:'tel',title:'电话',width:100}
]],
view: detailview,
detailFormatter: function(index, row){
return '<div class="ddv"></div>';
},
onExpandRow: function(index, row){
var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv');
ddv.panel({
border:false,
cache:false,
href: 'student_form.php',
onLoad:function(){
$('#fm').form('load', row);
bindFormSubmit(index, row);
}
});
$(this).datagrid('fixDetailRowHeight', index);
}
});
其中，datagrid组件的columns属性用于定义表格的列，toolbar属性用于定义工具栏按钮。detailview属性用于开启展开行明细的功能，在detailFormatter属性中定义展开的内容，在onExpandRow属性中加载展开的内容。
4. 创建后端服务接口
最后我们需要创建一个后端服务接口，提供对数据的增删改查操作。以下是一个名为students.php的后端服务接口，它根据不同的请求参数，调用不同的StudentModel方法，实现对数据的增删改查操作。
require 'StudentModel.php';
$action = isset($_REQUEST['action']) ? $_REQUEST['action'] : '';
$pdo = new PDO('mysql:host=localhost;dbname=test', 'root', '');
$pdo->exec('SET NAMES utf8');
$model = new StudentModel($pdo);
switch ($action) {
case 'add':
$result = $model->add($_POST);
echo $result ? 'success' : 'error';
break;
case 'update':
$id = isset($_REQUEST['id']) ? $_REQUEST['id'] : '';
$result = $model->update($id, $_POST);
echo $result ? 'success' : 'error';
break;
case 'delete':
$id = isset($_REQUEST['id']) ? $_REQUEST['id'] : '';
$result = $model->delete($id);
echo $result ? 'success' : 'error';
break;
case 'findById':
$id = isset($_REQUEST['id']) ? $_REQUEST['id'] : '';
$result = $model->findById($id);
echo json_encode($result);
break;
case 'findAll':
$result = $model->findAll();
echo json_encode($result);
break;
default:
echo 'error';
break;
}
总结
本文介绍了如何利用jQuery EasyUI创建一个展开行明细编辑表单的CRUD应用。通过本文的介绍，你可以了解到如何使用datagrid和dialog组件展示和编辑数据，如何使用PHP和PDO扩展提供的数据库访问功能实现对数据的增删改查操作。同时，本文也提供了一些示例代码，可以帮助你更好地理解和使用jQuery EasyUI。