easyUI增删改查的高级控件

1，js增删改查代码 (内含代码注释)

$(function() {
	
	var Url=$("#Murl").val();  //请求路径
	
	$('#nn').numberbox({    
	    min:0,    
	    precision:2    
	});
	
	
	$('#dg').datagrid({  //数据表格
	//查询
	    url:Url+'/userAction.action?methodName=userList&&'+Uvalue+'='+Avalue,  //请求全路径
	    fitColumns:true,  //是否水平展开
//	    fit:true,  //是否垂直展开
	    pagination:true,  //分页属性
	    //数据格式
	    columns:[[
	    	{field:'SerialNo',title:'SerialNo',width:100},
	        {field:'uid',title:'ID',width:100},    
	        {field:'uname',title:'名称',width:100},    
	        {field:'upwd',title:'密码',width:100,align:'right'}    
	    ]],
	    //通过数组定义工具栏
	    toolbar:[{
	               //修改
			iconCls: 'icon-edit',  //图标
			handler: function(){
				var edit=$('#dg').datagrid("getSelected");  //选中项
				if(edit){
					$('#ff').form('load',edit);   //绑定值
					$("#dd").dialog('open');   //打开窗口
				}else{
					alert("请选择对象！");
				}
			}
		},'-',{
			iconCls: 'icon-add',  //增加
			handler: function(){
				$("#de").dialog('open');  //打开窗口
			}
		},'-',{
			iconCls: 'icon-remove',  //删除
			handler: function(){
				var edit=$('#dg').datagrid("getSelected");  //选中项
				if(edit){
					$('#ff').form('load',edit);   //绑定值
					$.messager.confirm('确认','您确认想要删除记录吗？',function(r){  //消息窗口  
					    if (r){
					    	var Nid=$('#asno').val();
					    	$.ajax({
								url:Url+'/userAction.action?methodName=DeleteUser&&SerialNo='+Nid,
							});
					    	$('#dg').datagrid('reload');  // 重新载入当前页面数据 
					    	alert("删除成功！");
					    }    
					});
				}else{
					alert("请选择对象！");
				}
				
			}
		
		}]

	});

	//定义全局变量
	var Uvalue="";
	var Avalue="";
	//搜索框控件
	$('#ss').searchbox({ 
		searcher:function(value,name){  //值,键
		if(name!=null && value!=null){
			Uvalue=name; //键
			Avalue=value; //值
		}else{
			Uvalue="";
			Avalue="";
		}
	//搜索
	$('#dg').datagrid({  //数据表格
	    url:Url+'/userAction.action?methodName=userList&&'+Uvalue+'='+Avalue,  //请求全路径及参数
	    fitColumns:true,
	    pagination:true,
	    columns:[[  //数据格式
	    	{field:'SerialNo',title:'SerialNo',width:100},
	        {field:'uid',title:'ID',width:100},    
	        {field:'uname',title:'名称',width:100},    
	        {field:'upwd',title:'密码',width:100,align:'right'}    
	    ]]
	});
	
		},
		menu:'#mm', 
		prompt:'请输入',  //搜索框提示语
		}); 
	
})

2，增/改script代码

script type="text/javascript">

function add(){
	$('#fe').form('submit', {
		url:'${pageContext.request.contextPath}/userAction.action?methodName=AddUser',  //请求全路径  
	    success:function(){    
	    	$('#fe').form('clear');    //清空form表单
	    	$("#de").dialog('close');    //关闭窗口
	    	$('#dg').datagrid('reload');    // 重新载入当前页面数据 
	        alert("增加成功！");
	    }    
	});  
}

function upd(){
$('#ff').form('submit', {    
	url:'${pageContext.request.contextPath}/userAction.action?methodName=UpdateUser',    
    success:function(){    
    	$('#ff').form('clear');     //清空form表单
    	$("#dd").dialog('close');    //关闭窗口
    	$('#dg').datagrid('reload');    // 重新载入当前页面数据 
        alert("修改成功！");
    }    
}); 
}


</script>

3，jsp页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/head.jsp"%>
<%@ page buffer="16kb" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">

function add(){
	$('#fe').form('submit', {
		url:'${pageContext.request.contextPath}/userAction.action?methodName=AddUser',    
	    success:function(){    
	    	$('#fe').form('clear');    //清空form表单
	    	$("#de").dialog('close');    //关闭窗口
	    	$('#dg').datagrid('reload');    // 重新载入当前页面数据 
	        alert("增加成功！");
	    }    
	});  
}

function upd(){
$('#ff').form('submit', {    
	url:'${pageContext.request.contextPath}/userAction.action?methodName=UpdateUser',    
    success:function(){    
    	$('#ff').form('clear');     //清空form表单
    	$("#dd").dialog('close');    //关闭窗口
    	$('#dg').datagrid('reload');    // 重新载入当前页面数据 
        alert("修改成功！");
    }    
}); 
}


</script>
<body>
 <input id="Murl" type="hidden" value="${pageContext.request.contextPath}"/>
<table id="dg">

<!-- 搜索控件 -->
<input id="ss" style="width:300px"></input> 
<div id="mm" style="width:150px"> 
<div value="uid" data-options="name:'uid',iconCls:'icon-ok'"> I D </div> 
<div value="uname" data-options="name:'uname',iconCls:'icon-ok'"> 名称 </div> 
</div> 

</table>

<!-- 数据表格（修改） -->
<div id="dd" class="easyui-dialog" title="My Dialog" style="top:200px;width:400px;height:200px;"   
     data-options="iconCls:'icon-save',resizable:true,modal:true,toolbar:'#tb',buttons:'#bb',closed:true">   
    
<!-- form表单 -->
<form id="ff" method="post">
     <div>   
        <label for="SerialNo">SerialNo: </label>   
        <input id="asno" class="easyui-validatebox" type="text" name="SerialNo" data-options="required:true" />   
    </div>
    <div>   
        <label for="uid"> u i d : </label>   
        <input id="auid" class="easyui-validatebox" type="text" name="uid" data-options="required:true" />   
    </div>
    <div>   
        <label for="uname">uname:</label>   
        <input id="auname" class="easyui-validatebox" type="text" name="uname" data-options="required:true" />   
    </div>   
    <div>   
        <label for="upwd">u pw d:</label>   
        <input id="aupwd" class="easyui-validatebox" type="text" name="upwd" data-options="required:true" />   
    </div>   
</form>   
</div>  

<div id="bb">
<a href="#" class="easyui-linkbutton" onclick="upd();">保存</a>
</div>


<!-- 数据表格（增加） -->
<div id="de" class="easyui-dialog" title="My Dialog" style="top:200px;width:400px;height:200px;"   
     data-options="iconCls:'icon-save',resizable:true,modal:true,toolbar:'#tb',buttons:'#be',closed:true">   
    
<form id="fe" method="post">
     <div>   
        <label for="SerialNo">SerialNo: </label>   
        <input id="bsno" class="easyui-validatebox" type="text" name="SerialNo" data-options="required:true" />   
    </div>
    <div>   
        <label for="uid"> u i d : </label>   
        <input id="buid" class="easyui-validatebox" type="text" name="uid" data-options="required:true" />   
    </div>
    <div>   
        <label for="uname">uname:</label>   
        <input id="buname" class="easyui-validatebox" type="text" name="uname" data-options="required:true" />   
    </div>   
    <div>   
        <label for="upwd">u pw d:</label>   
        <input id="bupwd" class="easyui-validatebox" type="text" name="upwd" data-options="required:true" />   
    </div>   
</form>     
</div>  

<div id="be">
<a href="#" class="easyui-linkbutton" onclick="add();">提交</a>
</div>


</body>
</html>

easyUI增删改查的高级控件

猜你喜欢