EasyUI 可编辑表格(editable datagrid) 关联数据库进行增删改查（实用）
废话不多说，先上图：
增加：增加一行数据
删除：删除选中的行
修改：
- 双击表格栏，然后点其他栏让它失去焦点自动调方法
- 修改后点击上方保存按钮
HTML页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Row Editing in DataGrid - jQuery EasyUI Demo</title>
<script type="text/javascript" src="../configs/js/my_link.js"></script>
<script type="text/javascript" src="../resource/util/util.js"></script>
<script type="text/javascript" src="../resource/util/loadingDiv.js"></script>
<script type="text/javascript" src="../configs/easyui1.6.6/plugins/jquery.edatagrid.js"></script>
<link rel="stylesheet" type="text/css" href="../resource/css/dictionaries/dictionaries.css">
</head>
<body>
<script type="text/javascript" src="../resource/js/dictionaries/dictionaries.js"></script>
<div class="easyui-layout" fit="true">
<div data-options="region:'center',split:true" border="false">
<!--查询框和按钮-->
<div id="toolbar">
<form id="search-form" method="post">
<table>
<tr>
<td>
<label for="dicCode">字典编码：</label>
<input class="easyui-textbox" type="text" id="dicCode" name="dicCode"/>
</td>
<td>
<label for="pdicCode">上级字典编码：</label>
<input class="easyui-textbox" type="text" id="pdicCode" name="pdicCode"/>
</td>
<td>
<div id="linkbuttons">
<a class="easyui-linkbutton" id="query" data-options="iconCls:'icon-search'" onclick="query()">查询</a>
<a class="easyui-linkbutton" id="add" data-options="iconCls:'icon-add'" onclick="add()">添加</a>
<a class="easyui-linkbutton" id="save" data-options="iconCls:'icon-cut'" onclick="save()">保存</a>
<a class="easyui-linkbutton" id="remove" data-options="iconCls:'icon-save'" onclick="remove()">删除</a>
</div>
</td>
</tr>
</table>
</form>
</div>
<!--查询列表-->
<table id="dataGrid"></table>
</div>
</div>
</body>
</html>
html页面里主要就是引进css和js，再放一个table表格，给上id属性，这里需要说明的是 :
1、css 和 js 要写你自己的路径
2、我这里table放在了easyui的布局的中布局里面（你可以直接来个table），即
<div class="easyui-layout" fit="true">
<div data-options="region:'center',split:true" style="text-align: center" border="false">
</div>
</div>
3、dictionaries是你页面的js，当然也可以直接在你html的javaScript标签里面写。
4、其中的 js 引不对的话会造成无法使用
JS：
var dataGrid;
$(function () { //网页加载完毕执行
dataGrid = $('#dataGrid');
query();
});
function query() {
var param = serializeObject($('#search-form').serializeArray());
dataGrid.edatagrid({
fit: true,
method: 'post',
pageSize: 100,
pageList: [100, 200, 300, 400],
queryParams: param,
striped: true,//奇偶行不同色
rownumbers: true,//显示行号
pagination: true,//分页工具栏
fitColumns: false,//列的宽度自适应
singleSelect: true,//单选
idField: 'id',//绑定主键这个是必须的，不绑定删除不了
toolbar: '#toolbar',
url: contextPath + '/dictionaries/selectList.do', //查询路径
saveUrl: contextPath + '/dictionaries/addDataGrid.do',//添加路径
updateUrl: contextPath + '/dictionaries/updateDataGrid.do',//更新路径
destroyUrl: contextPath + '/dictionaries/deleteDataGrid.do',//删除路径
columns: [[
//列的绑定
{field: "id", title: "id", hidden: 'true'},
{field: "dicCode", title: "字典编码", width: 150, align: 'center',
editor: {
type: 'textbox',
options: {required: true}
}
},
{field: "dicName", title: "字典名称", width: 240, align: 'center',
editor: {
type: 'textbox',
options: {required: true}
}
},
{field: "pdicCode", title: "上级字典编码", width: 240, align: 'center',
editor: {
type: 'textbox',
options: {required: true}
}
},
{field: "orderIndex", title: "排序", width: 240, align: 'center',
editor: {
type: 'textbox',
options: {
required: true,
validType: 'number'
}
}
},
{field: "dicDesc", title: "字典描述", width: 240, align: 'center',
editor: {
type: 'textbox',
options: {required: true}
}
}
]],
destroyMsg:{//自定义提示语
norecord:{
title:'提示',
msg:'未选择任何记录.'
},
confirm:{
title:'提示',
msg:'你确定要删除吗?'
}
}
});
}
function add() {
$('#dataGrid').edatagrid('addRow');
}
function save() {
$('#dataGrid').data('isSave', true).edatagrid('saveRow');
}
function remove() {
$('#dataGrid').edatagrid('destroyRow');
}
基本上该有的注释我代码里就有，需要注意的有：
1、增删改查路径要加上contextPath,要不然会进Controller里的不去方法。
2、因为需要，我把表格的可编辑格式都改成了textbox，用于文本编辑，其他格式还有：数字框numberbox、选择框checkbox、验证框validatebox、日期框datebox等
Controller接口方法（仅供参考）
友情链接：
进一步了解 editable datagrid 可查看官方文档
下载 jQuery EasyUI 版本jQuery EasyUI ,没有 js 和 css 的话点击这里下载
查看具体的属性和事件：http://www.jeasyui.net/plugins/183.html
创作不易，点个赞支持一下吧 0.0
// _ooOoo_ //
// o8888888o //
// 88" . "88 //
// (| ^_^ |) //
// O\ = /O //
// ____/`---'\____ //
// .' \\| 阿西吧|// `. //
// / \\||| : |||// \ //
// / _||||| -:- |||||- \ //
// | | \\\ - /// | | //
// | \_| ''\---/'' | | //
// \ .-\__ `-` ___/-. / //
// ___`. .' /--.--\ `. . ___ //
// ."" '< `.___\_<|>_/___.' >'"". //
// | | : `- \`.;`\ _ /`;.`/ - ` : | | //
// \ \ `-. \_ __\ /__ _/ .-` / / //
// ========`-.____`-.___\_____/___.-`____.-'======== //
// `=---=' //
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ //
// 佛祖保佑 永不宕机 永无BUG //
看图猜人物（六），欢迎评论
