jquery.edatagrid.js下载：http://www.jeasyui.net/extension/190.html在这里的实例里
直接贴代码，看看上面那个网站其实挺容易的
<%--
Created by IntelliJ IDEA.
User: hasee
Date: 2017/2/11
Time: 12:58
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/ssm/static/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/ssm/static/jquery-easyui-1.5.1/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/ssm/static/jquery-easyui-1.5.1/demo/demo.css">
<script type="text/javascript" src="/ssm/static/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/ssm/static/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/ssm/static/jquery-easyui-1.5.1/jquery.edatagrid.js"></script>
</head>
<body>
<table id="dg" title="My Users" style="width:700px;height:250px"
toolbar="#toolbar" idField="id_"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="id_" width="50" editor="{type:'validatebox',options:{required:true}}">id_</th>
<th field="name_" width="50" editor="{type:'validatebox',options:{required:true}}">姓名</th>
<th field="age_" width="50" editor="text">年龄_</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
<script type="text/javascript">
$(function () {
$('#dg').edatagrid({
url: 'e_query.do',
saveUrl: 'e_insert.do',
updateUrl: 'e_update.do',
destroyUrl: 'e_delete.do' //移除一行时会传id过去，而不是id_
});
});
</script>
</body>
</html>
分享到：
相关推荐
1. 数据网格（Datagrid）：EasyUI的数据网格是一个强大的表格控件，支持数据的展示、排序、分页、编辑等功能。开发者可以通过配置列定义来定制显示内容，通过绑定数据源实现数据的加载。 2. 表单（Form）：EasyUI的...
例如，数据网格（datagrid）用于展示大量数据，可以进行排序、筛选和编辑；窗口（window）可以创建弹出式对话框；表单（form）支持数据验证和提交等。 3. **主题和样式**：Easyui 提供了多种预设主题，可以通过修改...
2. **Grid**：数据网格，可以展示和操作大量结构化的数据，支持排序、分页、过滤等功能，与后台数据源进行双向绑定。 3. **Tree**：树形结构，用于展示层次化的数据，支持展开、折叠、选择节点等操作，常见于导航...
7. **组件组合**：EasyUI的强大之处在于组件之间的可组合性，可以将多个组件组合在一起，形成复杂的业务场景，如在对话框中嵌入表格，或者在表格中使用下拉框作为列编辑器。 8. **自定义组件**：虽然EasyUI已经提供...
- **数据绑定**：EasyUI 支持与后端数据源的联动，可以方便地展示和编辑数据。 2. **常用组件**： - **窗口（Window）**：用于创建弹出式或者浮动的对话框，支持拖动、最大化、最小化等操作。 - **面板（Panel）...
- **数据网格（Datagrid）**: 高级表格组件，支持数据操作和列自定义。 4. **API 使用** - **初始化**: 使用 `$(selector).easyui(method)` 初始化组件，如 `$("#grid").datagrid(options)`。 - **选项...
- **数据绑定**：与后端数据源（如数据库）进行交互，实现数据的展示和编辑，例如 datagrid 可以轻松展示和编辑表格数据。 - **表单验证**：内置表单验证机制，确保用户输入的有效性。 - **窗口与对话框**：提供...
EasyUI 提供了丰富的组件和样式，包括表格、表单、窗口、菜单、按钮、面板等，这些组件都是预先设计好的，开发者只需要简单配置就能实现复杂的交互效果。下面我们将深入探讨EasyUI的关键知识点： 1. **组件使用**：...