jQuery EasyUi 增删改查

本文深入讲解了使用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'  
		});
	}
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值