jQuery EasyUI 数据网格 - 转换 HTML 表格为数据网格
jQuery EasyUI 数据网格 - 转换 HTML 表格为数据网格
简介
jQuery EasyUI 是一个基于 jQuery 的用户界面插件库，提供了完整的用户界面组件和易于使用的 API。数据网格是其中一个核心组件，它支持数据的分页、排序、编辑、格式化等功能。本篇技术文档将介绍如何使用 EasyUI 数据网格将 HTML 表格转换为数据网格的方法。
准备工作
在使用 EasyUI 数据网格前，需要引入 jQuery 和 EasyUI 的 JavaScript 和 CSS 文件。可以通过以下方式引入：
<link rel="stylesheet" href="./jquery-easyui-1.9.5/themes/default/easyui.css">
<link rel="stylesheet" href="./jquery-easyui-1.9.5/themes/icon.css">
<script src="./jquery-easyui-1.9.5/jquery.min.js"></script>
<script src="./jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
HTML 表格转换为数据网格
通过将 HTML 表格转换为数据网格，可以方便地实现数据的分页、排序、编辑、格式化等功能。转换方法如下：
<table id="dg" toolbar="#toolbar">
<thead>
<tr>
<th field="itemid">Item ID</th>
<th field="productid">Product ID</th>
<th field="listprice">List Price</th>
<th field="unitcost">Unit Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>FI-SW-01</td>
<td>FI-SW-01</td>
<td>$10.00</td>
<td>$5.00</td>
</tr>
<tr>
...
</tr>
</tbody>
</table>
在表格中，需要给每一列指定一个 field 属性，用于表明该列对应数据中的哪个字段。EasyUI 数据网格会根据这些属性将表格中的数据转换为一个 JavaScript 数组。除此之外，还需要指定一个 id 属性用于向 JavaScript 代码中标识该数据网格，一个 toolbar 属性用于指定工具栏的位置。在该表格的下方，可以通过以下方式定义一个工具栏：
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add">Add</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit">Edit</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove">Remove</a>
</div>
这里定义了三个按钮 “Add”, “Edit” 和 “Remove”，每个按钮都有一个对应的图标。通过设置按钮的 href 属性为 “#” 并添加相应的样式，即可创建 EasyUI 中的按钮。
最后，在页面加载时，需要通过 JavaScript 代码将该表格转换为数据网格：
$(function(){
$('#dg').datagrid();
});
通过 $().datagrid() 方法，可以将指定的表格转换为 EasyUI 数据网格。可以通过该方法传入一些配置项来定制数据网格的显示和功能。
实例
以下是一个完整的 HTML 文件，演示了如何通过 EasyUI 数据网格将 HTML 表格转换为数据网格，并添加分页、排序、编辑、格式化等功能。该数据网格支持数据的增、删、改、查等操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI 数据网格 - HTML 表格转换为数据网格</title>
<link rel="stylesheet" href="./jquery-easyui-1.9.5/themes/default/easyui.css">
<link rel="stylesheet" href="./jquery-easyui-1.9.5/themes/icon.css">
<script src="./jquery-easyui-1.9.5/jquery.min.js"></script>
<script src="./jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true"
singleSelect="true" url="./data.json">
<thead>
<tr>
<th field="id" width="50">ID</th>
<th field="name" width="100">Name</th>
<th field="price" width="50" align="right">Price</th>
<th field="description" width="200">Description</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
onclick="addProduct()">Add Product</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
onclick="editProduct()">Edit Product</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
onclick="removeProduct()">Remove Product</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post">
<div class="fitem">
<label for="name">Name:</label>
<input type="text" id="name" name="name" class="easyui-validatebox"
required="true" validType="length[1,20]">
</div>
<div class="fitem">
<label for="price">Price:</label>
<input type="text" id="price" name="price"
class="easyui-numberbox" required="true">
</div>
<div class="fitem">
<label for="description">Description:</label>
<input type="text" id="description" name="description"
class="easyui-validatebox" validType="length[0,100]">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
onclick="saveProduct()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel"
onclick="$('#dlg').dialog('close')">Cancel</a>
</div>
<script>
var url;
function addProduct(){
$('#dlg').dialog('open').dialog('setTitle','Add Product');
$('#fm').form('clear');
url = './save_product.php';
}
function editProduct(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit Product');
$('#fm').form('load',row);
url = './update_product.php?id='+row.id;
}
}
function removeProduct(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to remove this product?',function(r){
if (r){
$.post('./remove_product.php',{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
},'json');
}
});
}
}
function saveProduct(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.success){
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the data
} else {
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
}
}
});
}
$(function(){
$('#dg').datagrid({
onLoadSuccess: function(data){
$('.datagrid-row').each(function(index){
$(this).attr('title', data.rows[index].description);
});
}
});
});
</script>
</body>
</html>
总结
使用 EasyUI 数据网格将 HTML 表格转换为数据网格可以为数据处理提供很多方便的选项，同时定制化的配置项也可以满足开发人员的需求。但需要注意的是，EasyUI 数据网格基于 jQuery 和 EasyUI 插件开发，使用前需要对这些技术有一定的了解。