86 lines
2.7 KiB
HTML
86 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>EasyUI Grid Demo</title>
|
|
<!-- 引入 jQuery -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<!-- 引入 EasyUI 样式和 JS -->
|
|
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
|
|
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
|
|
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
}
|
|
.datagrid-cell-btn {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>EasyUI Grid 简单示例</h2>
|
|
|
|
<table id="dg" title="用户列表" class="easyui-datagrid" style="width:700px;height:300px"
|
|
data-options="
|
|
singleSelect: true,
|
|
fitColumns: true,
|
|
toolbar: '#toolbar',
|
|
rownumbers: true
|
|
">
|
|
<thead>
|
|
<tr>
|
|
<th data-options="field:'id',width:50">ID</th>
|
|
<th data-options="field:'name',width:100">姓名</th>
|
|
<th data-options="field:'age',width:50,align:'right'">年龄</th>
|
|
<th data-options="field:'email',width:150">邮箱</th>
|
|
<th data-options="field:'action',width:100,align:'center',
|
|
formatter: function(value,row,index){
|
|
return '<a href=\"javascript:void(0)\" onclick=\"editUser('+index+')\">编辑</a> | ' +
|
|
'<a href=\"javascript:void(0)\" onclick=\"deleteUser('+index+')\">删除</a>';
|
|
}">操作</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
|
|
<div id="toolbar">
|
|
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="addUser()">添加用户</a>
|
|
</div>
|
|
|
|
<script>
|
|
// 模拟数据
|
|
var users = [
|
|
{id:1, name:'张三', age:18, email:'zhangsan@example.com'},
|
|
{id:2, name:'李四', age:22, email:'lisi@example.com'},
|
|
{id:3, name:'王五', age:30, email:'wangwu@example.com'},
|
|
{id:4, name:'赵六', age:25, email:'zhaoliu@example.com'}
|
|
];
|
|
|
|
$(function(){
|
|
$('#dg').datagrid({
|
|
data: users
|
|
});
|
|
});
|
|
|
|
function addUser() {
|
|
alert('这里可以弹出添加用户的表单');
|
|
}
|
|
|
|
function editUser(index) {
|
|
var row = $('#dg').datagrid('getRows')[index];
|
|
alert('编辑用户：' + row.name);
|
|
}
|
|
|
|
function deleteUser(index) {
|
|
var row = $('#dg').datagrid('getRows')[index];
|
|
if (confirm('确定删除用户：' + row.name + '吗？')) {
|
|
users.splice(index, 1);
|
|
$('#dg').datagrid('loadData', users);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |