1. 引入必要的文件: 在 HTML 页面中引入 jQuery、EasyUI 的 CSS 和 JavaScript 文件。确保它们的顺序是正确的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
</body>
</html>
请确保 jquery-easyui 文件夹包含 EasyUI 的相关文件,并且文件路径正确。
2. 创建 HTML 结构: 在页面中创建一个容器,用于显示数据网格。
<table id="datagrid"></table>
3. 初始化数据网格: 使用 jQuery EasyUI 提供的 datagrid 函数初始化数据网格。
<script>
$(function(){
$('#datagrid').datagrid({
url: 'data.php', // 数据请求的 URL
method: 'get', // 请求方法
columns: [[ // 列定义
{field:'id', title:'ID', width:100},
{field:'name', title:'Name', width:100},
{field:'age', title:'Age', width:100},
// 添加其他字段
{field:'action', title:'Action', width:100, formatter: function(value,row,index){
return '<a href="javascript:void(0)" onclick="editRow('+index+')">Edit</a> <a href="javascript:void(0)" onclick="deleteRow('+index+')">Delete</a>';
}}
]],
toolbar: [{
iconCls: 'icon-add',
handler: function(){ // 添加按钮点击事件
// 调用添加数据的函数
addRow();
}
}],
pagination: true, // 是否显示分页栏
pageSize: 10, // 每页显示的记录数
pageList: [10,20,30], // 可选择的每页记录数
onDblClickRow: function(rowIndex, rowData){ // 双击行事件
editRow(rowIndex);
}
});
});
</script>
4. 实现增删改功能: 在页面中添加相应的 JavaScript 函数,用于处理添加、编辑和删除操作。
function addRow(){
// 弹出对话框,输入信息并保存到后端
}
function editRow(index){
// 获取选中行的数据,弹出对话框进行编辑,并保存到后端
}
function deleteRow(index){
// 获取选中行的数据,弹出确认框,确认后从后端删除
}
在这些函数中,你需要通过 EasyUI 提供的对话框、表单等组件来完成相应的操作。
请根据你的实际需求和后端接口的设计来完善这些函数。上述代码只是一个基本的框架,具体的实现会根据你的业务逻辑而有所不同。同时,确保你的后端接口提供了相应的 CRUD 操作支持。
转载请注明出处:http://www.zyzy.cn/article/detail/13086/jQuery EasyUI