《easyUI高级控件》

客官°小女子只卖身不卖艺 2022-05-09 04:46 311阅读 0赞

**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 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>