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

来源：互联网发布：转码用什么软件编辑：程序博客网时间：2024/05/01 19:23

在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" onclick="addAccount()"> 新增 </a>
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-edit" plain="true" onclick="editAccount()"> 编辑 </a>
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-remove" plain="true" onclick="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>
</body>

在AccountController,java中

/*
* Description:
* 描述账号管理控制页面
*
* History：
* =============================================================
* Date Version Memo
* 2015-6-26下午12:45:09 1.0 Created by HongShuai
*
* =============================================================
*
* Copyright 2015, 迪爱斯通信设备有限公司保留。
*/
@Controller
public class AccountController {

/* Window window=Window(); */
@Autowired
private AccountService accountService;

@RequestMapping(value = "/auth/account", method = { RequestMethod.GET,
RequestMethod.POST })
public ModelAndView getAccountById(int id) {
Account account = accountService.getAccountById(id);
Map<String, Object> model = new HashMap<String, Object>();
model.put("account", account);
return new ModelAndView("auth/account", model);
}

/**
* 跳转增加页面
*
* @return
*/
@RequestMapping(value = "/auth/account/add", method = { RequestMethod.GET,
RequestMethod.POST })
public String accountAdd() {
return "auth/account/account_add";
}

/**
* 提交增加账户
*
* @param account
* @return
*/
@RequestMapping(value = "/auth/account/doadd", method = RequestMethod.POST)
public @ResponseBody
boolean doAccountAdd(Account account) {
accountService.saveAccount(account);
return true;
}

/**
* 提交编辑账户
*
* @param account
* @return
*/
@RequestMapping(value = "/auth/account/doedit", method = {
RequestMethod.GET, RequestMethod.POST })
public @ResponseBody
boolean doaccountEdit(Account account) {
accountService.saveAccount(account);
return true;
}

/**
* 跳转到编辑页面
*
* @param id
* @return
*/
@RequestMapping(value = "/auth/account/edit/{id}", method = {
RequestMethod.GET, RequestMethod.POST })
public ModelAndView accountEdit(@PathVariable(value = "id") int id) {

Account account = accountService.getAccountById(id);

Map<String, Object> model = new HashMap<String, Object>();

model.put("account", account);

return new ModelAndView("auth/account/account_edit", model);
}

@ResponseBody
@RequestMapping(value = "/auth/account/delete/{id}", method = {
RequestMethod.GET, RequestMethod.POST })
public boolean delAccount(@PathVariable(value = "id") Integer id) {
accountService.delAccount(id);
return true;
}

@RequestMapping(value = "/account/serchAccount", method = { RequestMethod.GET })
public Account serchAccount(String accountname) {
Account account = new Account();
String accountList = account.getAccountName();
if (accountname == accountList) {

}
/* return "auth/account/account_list"; */
return account;
}

/**
* 跳转到帐户管理页面
*
* @return
*/
@RequestMapping(value = "/account/list", method = { RequestMethod.GET })
public String accountList() {
return "auth/account/account_list";
}

/**
* 获取数据
*
* @param page
* @param rows
* @return
*/
@RequestMapping(value = "/account/list/data", method = { RequestMethod.GET,
RequestMethod.POST })
public @ResponseBody
Map<String, Object> accountListData(int page, int rows) {
Pageable pageable = new PageRequest(page - 1, rows);
Page<Account> accountbypage = accountService.finaAllByPage(pageable);
Map<String, Object> model = new HashMap<String, Object>();
model.put("total", accountbypage.getTotalElements());
model.put("rows", accountbypage.getContent());
return model;
}

@RequestMapping(value = "account/list/searchdata", method = {
RequestMethod.GET, RequestMethod.POST })
public @ResponseBody
Map<String, Object> accountListData(
@ModelAttribute(value = "account") Account account) {

return null;
}

}

在account_add.jsp页面中

<body>
<script type="text/javascript">

//初始化form表
function initForm() {
$('#addAccountForm').form({
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.alert('提示','表单信息不正确'); // 如果表单是无效的则隐藏进度条
}
return isValid;
},
success:function(data){
if(data)
{
$.messager.alert('提示','账户增加成功','info',function(){
parent.$('#editoradd').dialog('close'); //关闭父页面
parent.$('#accountDataGrid').datagrid('reload'); //刷新fuyemian

});
}
}
});
}

function addAccount() {
$('#addAccountForm').submit();
}

$(function(){
initForm();
});
</script>
<form:form id="addAccountForm" name="addAccountForm"
modelAttribute="account" action="${APP_PATH}auth/account/doadd">
<ul class="formul">
<li><label>用户名：</label><input id="accountName" class="easyui-validatebox"
name="accountName" type="text" data-options="required:true" missingMessage="用户名不能为空" /></li>
<li><label>密码：</label><input id="password" name="password" class="easyui-validatebox"
type="password" data-options="required:true" missingMessage="密码不能为空" /></br></li>
<li><a id="btn" href="#" class="easyui-linkbutton" onclick="addAccount()">提交</a>
</li>
</ul>
</form:form>
</body>

在account_edit.jsp页面中

<body>
<%-- ${account } --%>
<form:form id="editAccountForm" name="editAccountForm"
modelAttribute="account" action="${APP_PATH}auth/account/doedit">
<ul class="formul">
<li><labe> </label> <input name="id" id="id" class="easyui-validatebox" data-options="required:true"
missingMessage="编号不能为空" type="hidden" value="${account.id}" /> </li>

<li><label>用户名：</label><input id="accountName" class="easyui-validatebox" data-options="required:true" name="accountName"
missingMessage="用户名不能为空" value="${account.accountName}" type="text" /></li>

<li><label>密码：</label> <input id="password" class="easyui-validatebox" data-options="required:true" name="password"
missingMessage="密码不能为空" value="${account.password}" type="password" /></li>

<li><a id="btn" href="#" onclick="editAccount()" class="easyui-linkbutton" >提交</a></li>
</ul>
</form:form>
</body>
<script type="text/javascript">
/* 定义为一个表单 */

//初始化form表
function initForm() {
$('#editAccountForm').form({
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.alert('提示','表单信息不正确'); // 如果表单是无效的则隐藏进度条
}
return(isValid);
},
success:function(data){
if(data)
{
$.messager.alert('提示','账户编辑成功','info',function(){
parent.$('#editoradd').dialog('close'); //关闭父页面
parent.$('#accountDataGrid').datagrid('reload'); //刷新父页面
});
}
}
});
}

/* $(function(){
$('#editAccountForm').form({
success:function(data){
if(data)
{
parent.$('#edit_account_from').dialog('close'); /* 关闭父界面
parent.$('#dg').datagrid('reload'); /* 刷新父界面
}
}
});
});
*/
function editAccount() {
$('#editAccountForm').submit();
}

$(function(){
initForm();
});
</script>

2 0