jquery easyui实现datagrid表格向数据库中进行增加，修改和删除操作

最新推荐文章于 2022-05-10 09:41:18 发布

jueshiyaoxian

最新推荐文章于 2022-05-10 09:41:18 发布

阅读量6.8k

点赞数 3

分类专栏： WEB 前端三大框架 jquery easyui

本文链接：https://blog.csdn.net/jueshiyaoxian/article/details/46675105

版权

这篇博客展示了如何使用jQuery EasyUI库实现Datagrid表格与数据库之间的交互，包括加载数据、初始化Datagrid、弹出对话框进行新增和编辑账户、以及删除账户的操作。在`account_list.jsp`中定义了Datagrid的配置和事件处理函数，通过AJAX与`AccountController.java`进行交互，完成增删改查功能。在`account_add.jsp`和`account_edit.jsp`中，实现了表单验证和提交。

摘要由CSDN通过智能技术生成

在account_list.jsp中

//弹出对话框增加和编辑调用对话框的公用方法
function alertDialog(title,url,addoredit){
val content;

if(addoredit=='add'){
content='<iframe scrolling="auto" frameborder="0" src="' +url
+'" style="width:100%;height:100%;"></iframe>;
}else{
val row=$('#accountDataGrid').datagrid('getSelected');
val editurl=url +"/"+row.id;
content='<iframe scrolling="auto" frameborder="0" src="'
+editurl+'" style="width:100%;height=100%;"></iframe>';
}

$('#editoradd').dialog({
title:title,
content:content
});

$('#editoradd').dialog('open');
}

//增加账户
function addAccount(){
alertDialog('新增账户','${APP_PATH}auth/account/add','add');
}

//编辑账户
function editAccount(){
var row=$('#accountDataGrid').datagrid('getSelected');
if(row!=null){
alertDialog('编辑账户','${APP_PATH}auth/account/edit','edit');
$('#accountDataGrid').datagrid('clearSelections');
}else{
$.messager.alert('提示','请选中一行','info');
}
}

$(function(){
initdataGrid();
})

//删除账户
function delAccount(){
val row=$('#accountDataGrid').datagrid('getSelected');
if(row){
val url='${APP_PATH}auth/account/delete/'+row.id;
$.messager.confirm('Confirm','您真的确定要删除该账户吗？',function(data)){
$.get(url,function(data){
if(data){
$messager.alert('提示','删除成功','info',function(){
$('#accountDataGrid').datagrid('reload');
$('#accountDataGrid').datagrid('clearSelections');
});
}
},'json');
});
}else{
$messager.alert('提示','请选中一行','info');
}
}
</script>

<body>

<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-add" plain="true" οnclick="addAccount()"> 新增 </a>
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-edit" plain="true" οnclick="editAccount()"> 编辑 </a>
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-remove" plain="true" οnclick="delAccount()"> 删除 </a>
</div>

<table id="accountDataGrid" class="easyui-datagrid" style="width:100%">
</table>

<div id="editoradd" class="easyui-dialog"
style="width:600px;height:280px;padding:10px 20px" closed="true">
</div>