jQuery EasyUi 增删改查

原创于 2018-10-15 13:55:17 发布 · 317 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java

jQuery easyUI 专栏收录该内容

3 篇文章

订阅专栏

本文深入讲解了使用EasyUI实现Web应用的增删改查功能，包括使用dialog进行数据编辑、datagrid展示数据、form表单数据处理及通过ajax实现数据删除。文章提供了详细的代码示例，演示如何与后端交互完成数据操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

easyui的crud（dialog，datagrid、form讲解）
1、?打开tab页
2、?创建dao
3、?Web的增删改查与配置
4、?使用datagrid承载查询数据
5、?增加和修改使用dialog与form
6、?使用ajax做删除
7、?解决tab页面重复的问题

前台代码

$(function() {
	var ctx = $("#ctx").val();
	$('#dg').datagrid({
		url : ctx+'/userAction.action?methodName=list',
		fitColumns : true,
		pagination : true,
		columns : [ [ {
			field : 'uid',
			title : 'ID',
			width : 100
		}, {
			field : 'uname',
			title : '名称',
			width : 100
		}, {
			field : 'upwd',
			title : '密码',
			width : 100
		} ] ],
		toolbar : [ {
			iconCls : 'icon-edit',
			handler : function() {
				var row = $('#dg').datagrid("getSelected");
				if(row){
					//读取所选记录填充到表单中
					$('#ff').form('load', row);
					//打开窗体
					$("#dd").dialog('open');
				}else{
					alert("请选择！");
				}
			}
		}, '-', {
			iconCls : 'icon-add',
			handler : function() {
				//打开窗体
				$("#dd").dialog('open');
			}
		}, '-', {
			//删除按钮
			iconCls : 'icon-remove',
			handler : function() {
				var row = $('#dg').datagrid("getSelected");
				if(row){
					$.messager.confirm('确认对话框', '你确定要删除吗？', function(r){
						if (r){
							$.ajax({ 
								//跳转增加地址
								url:ctx+'/userAction.action?methodName=del&&SerialNo='+row.SerialNo, 
								dataType:'json' ,
								success:function(result){
									$.messager.alert('提示信息', result); 
									if(result==1){
										$.messager.alert('提示信息', '操作成功'); 
									}else{
										$.messager.alert('提示信息', '操作失败'); 
									}
								}  
							});
							// 重新载入当前页面数据 
							$('#dg').datagrid('reload');
						}
					});
					
				}else{
					$.messager.alert('提示信息', '请选择要删除的列!'); 
				}
			}
		} ]
	});

})

function ok() {
	var ctx = $("#ctx").val();
	var serialNo = $("#SerialNo").val();
	if(serialNo==""){
		//增加
		$('#ff').form('submit',{ 
			//跳转增加地址
			url:ctx+'/userAction.action?methodName=add',  
		});
		//关闭窗体
		$("dd").dialog('close');
	}else{
		alert("修改");
		//修改
		$('#ff').form('submit',{ 
			//跳转修改地址
			url:ctx+'/userAction.action?methodName=update'  
		});
	}
}