4.10easyui

最新推荐文章于 2021-02-26 15:08:06 发布

哈西哈希

最新推荐文章于 2021-02-26 15:08:06 发布

阅读量388

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/shan_111/article/details/72801822

版权

easyUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天这篇是接着上篇的，例子也是用上篇的例子接着写的。

1、Dialog（对话框窗口）

easyui_datagrid.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
	<meta http-equiv="description" content="This is my page"/>
	
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/icon.css">
<script type="text/javascript" src="<%=path%>/script/jquery-1.11.0.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/locale/easyui-lang-zh_CN.js"></script>

<script language="javascript">
jQuery(function(){
	jQuery("#grid_div").datagrid({
		"title":			"角色列表",
	    columns:[[   
	    	{field:"ck",			checkbox:true,			width:100},   
	        {field:"role_id",		title:"角色编码",		width:100,	align:"center"},    
	        {field:'role_name',		title:'角色名称',		width:100},    
	        {field:'role_remark',	title:'角色备注',		width:100,	halign:"center",align:'left'}    
	    ]],
	    url:			"<%=path%>/roleAction!listGridForUI?date="+new Date()+"",
	    rownumbers:		true,
	    fit:			true,		//自动适应父容器	
	    pagination:		true,
	    pageList:		[3,5,7],
	    pageSize:		5,
	    toolbar:		[
	    	{id:"search",			text:"查询角色",		iconCls:"icon-search",handler:function(){
	    		//查询数据。
	    		var searchData = jQuery("#searchForm").serializeArray();
	    		//将数组转为json对象。
	    		var paramObj = convertArray(searchData);
	    		
	    		//提交参数   		
				jQuery("#grid_div").datagrid({
					queryParams: paramObj
				});   	
	    	}},
	    	{id:"save",				text:"添加角色",		iconCls:"icon-add"			},
	    	{id:"edit",				text:"修改角色",		iconCls:"icon-edit",handler:function(){
	    		editData();
	    	}},
	    	{id:"delete",			text:"删除角色",		iconCls:"icon-remove",		handler:function(){
	    		//获取选中的记录。
	    		var idArray = new Array();
	    		var checkArray = jQuery("#grid_div").datagrid("getChecked");
	    		if (checkArray == null || checkArray.length == 0){
	    			$.messager.alert("提示","您还未选择记录,不能执行删除操作","info",function(){
	    				return;
	    			});
	    		}else{
	    			for(var i = 0;i<checkArray.length;i++){
	    				var roleObj = checkArray[i];
	    				var role_id = roleObj.role_id;
	    				idArray.push(role_id);
	    			}
	    			var total_roleid = idArray.join(",");
	    			//发起ajax请求
	    			var deleteURL = "<%=path%>/roleAction!deleteRole?total_roleid="+total_roleid+"&date="+new Date()+"";
	    			jQuery.get(deleteURL,function(jsonData){
	    				var flag = jsonData.flag;
	    				if (flag == true){
			    			$.messager.alert("提示","删除成功，点击确定后刷新数据","info",function(){
			    				jQuery("#grid_div").datagrid("reload");
			    			});	    				
	    				}else{
	    					var message = jsonData.message;
			    			$.messager.alert("提示","删除失败，错误原因 = " + message,"error",function(){
			    				return;
			    			});	    					
	    				}
	    			},"json");
	    		}
	    	}},
	    	{id:"import",			text:"导入",			iconCls:"icon-undo"},
	    	{id:"export",			text:"导出",			iconCls:"icon-redo"},
	    	{id:"reload",			text:"刷新数据",		iconCls:"icon-reload"}
	    ]
	    
	});
	
	function editData(){
   		var idArray = new Array();
   		var checkArray = jQuery("#grid_div").datagrid("getChecked");
   		if (checkArray == null || checkArray.length == 0){
   			$.messager.alert("提示","您还未选择记录,不能执行修改操作","info",function(){
   				return;
   			});
   		}else{
   			if (checkArray.length>1){
	   			$.messager.alert("提示","选择的记录不唯一","info",function(){
	   				return;
	   			});   				
   			}else{
   				var role_id = checkArray[0].role_id;
		 		var editURL = "<%=path%>/roleAction!edit?role_id="+role_id+"&date="+new Date()+"";
				jQuery("#edit_div").dialog({
					title:			"修改对话框",
					width:			600,
					height:			500,
					modal:			true,
					closable:		true,
					//href打开的页面不能执行js代码。
					//href: 			editURL,
					content:		"<iframe height=\"95%\" width=\"100%\" border=\"0\" frameborder=\"0\" src=\""+editURL+"\" name=\"roleFrame\" id=\"roleFrame\" title=\"roleFrame\"></iframe>",
					buttons:		[
						{id:"saveButton",text:"保存数据",iconCls:"icon-save",			handler:function(){
							modifyData();
						}},
						{id:"closeButton",text:"关闭窗口",iconCls:"icon-cancel",		handler:function(){
							jQuery("#edit_div").dialog("close");
						}}
					]
				});  				
   			}
   		}
	}
	function modifyData(){

		//调用edit.jsp中的保存的方法。并获取返回值。
		var roleFrame = document.getElementById("roleFrame");
		var roleWindow = roleFrame.contentWindow;
		//调用子窗口中的方法。
		roleWindow.saveData();
	}
});


function convertArray(o) { //主要是推荐这个函数。它将jquery系列化后的值转为name:value的形式。 
var v = {}; 
	for (var i in o) { 
		if (typeof (v[o[i].name]) == 'undefined') v[o[i].name] = o[i].value; 
			else v[o[i].name] += "," + o[i].value; 
	} 
	return v; 
}
</script>
</head>  
<body class="easyui-layout">
  <div id="div_north" data-options="region:'north'">
  	<form id="searchForm">
		<table width="98%" border="0" style="font-size:12px;">
			<tr>
				<td align="right">角色编码：</td>
				<td><s:textfield name="role_id" id="role_id"/></td>
			</tr>
			<tr>
				<td align="right">角色名称：</td>
				<td><s:textfield name="role_name" id="role_name"/> </td>
			</tr>								
		</table>	 	
  	</form>
  </div>
  <div id="div_center" data-options="region:'center'">
  	<div id="grid_div"></div>
  </div>
  
  <div id="edit_div"></div>
</body>
</html>

从修改角色开始看。这里是通过修改角色这个操作来讲解对话框窗口的用法。增加角色的操作和修改是类似的，这里就只举一个。

edit.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
	<meta http-equiv="description" content="This is my page"/>
	
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/icon.css">
<script type="text/javascript" src="<%=path%>/script/jquery-1.11.0.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/locale/easyui-lang-zh_CN.js"></script>

<script language="javascript">
function saveData(){
	//1：执行表单验证
	var isValid = jQuery("#form1").form('validate');
	if (isValid == true){
		//使用ajax的方式来提交表单
		//禁用按纽
		window.parent.jQuery("#saveButton").linkbutton("disable");
		
		var formData = jQuery("#form1").serializeArray();
		var modifyURL = "<%=path%>/roleAction!modify?date="+new Date()+"";
		jQuery.post(modifyURL,formData,function(jsonData){
			if (jsonData != null){
				var flag = jsonData.flag;
				var message = jsonData.message;
				if (flag == true){
					//刷新父窗口的数据
		   			$.messager.alert("提示","数据更新成功","info",function(){
		   				window.parent.jQuery("#edit_div").dialog("close");
		   				window.parent.jQuery("#grid_div").datagrid("reload");
		   			});				
				}else{
		   			$.messager.alert("提示","更新失败，错误原因 = " + message,"error",function(){
		   				window.parent.jQuery("#saveButton").linkbutton("enable");
		   				return;
		   			});					
				}		
			}
		},"json");
	}
}
</script>
</head>  
<body>
<s:form method="post" namespace="/" action="roleAction!modify" id="form1">
	<table width="98%" border="0" style="font-size:12px;">
		<tr>
			<td>角色编码</td>
			<td><s:textfield name="role_id_temp" disabled="true" value="%{role_id}"/>
				<s:hidden name="role_id"/>
			 </td>
		</tr>
		<tr>
			<td>角色名称</td>
			<td><s:textfield name="role_name" cssClass="easyui-validatebox" data-options="required:true,missingMessage:'角色名称必填'"/> </td>
		</tr>
		<tr>
			<td>角色备注</td>
			<td>
			<s:textarea name="role_remark" cols="40" rows="7" cssClass="easyui-validatebox" data-options="required:true"></s:textarea>
			</td>
		</tr>								
	</table>
</s:form>
</body>
</html>

RoleAction.java

	public String edit() throws Exception {
		String role_id = request.getParameter("role_id");
		RoleBean roleBean = this.roleService.getRoleBeanById(role_id);
		ActionContext context = ActionContext.getContext();
		ValueStack valueStack = context.getValueStack();
		if (roleBean != null) {
			valueStack.push(roleBean);
		}
		return "edit";
	}

	public String modify() throws Exception {
		JsonInfo jsonInfo = new JsonInfo();
		try {
			String role_select_menuid = request
					.getParameter("role_select_menuid");
			this.roleService.modify(roleBean, role_select_menuid);
			//int i = 1/0;
			jsonInfo.setFlag(true);
		} catch (Exception e) {
			e.printStackTrace();
			jsonInfo.setFlag(false);
			jsonInfo.setMessage(e.getMessage());
		}
		Gson gson = new Gson();
		String jsonStr = gson.toJson(jsonInfo);
		PrintWriter out = response.getWriter();
		out.print(jsonStr);
		out.flush();

		return NONE;
	}

2、查询角色

jsp用的也是最上面的easyui_datagrid.jsp

RoleDao.java

	public List<RoleBean> getRoleList(int pageSize, int currentPage,
			String role_id, String role_name, String keyWord) {
		List<RoleBean> roleList = null;
		Session session = null;
		Query query = null;
		String hql = "Select a From RoleBean a where 1 = 1";
		if (StringUtils.isNotBlank(role_id)) {
			hql = hql + " and role_id = :role_id";
		}
		if (StringUtils.isNotBlank(role_name)) {
			hql = hql + " and role_name like :role_name";
		}

		if (StringUtils.isNotBlank(keyWord)) {
			hql = hql + " and (role_name like '%" + keyWord
					+ "%' or role_remark like '%" + keyWord + "%')";
		}
		hql = hql + " order by cast(role_id as int) desc";
		try {
			session = HibernateUtil.getSession();
			query = session.createQuery(hql);
			query.setFirstResult((currentPage - 1) * pageSize);
			query.setMaxResults(pageSize);

			if (StringUtils.isNotBlank(role_id)) {
				query.setString("role_id", role_id);

			}
			if (StringUtils.isNotBlank(role_name)) {
				query.setString("role_name", "%" + role_name + "%");
			}
			roleList = query.list();
			System.out.println(roleList.size());
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			HibernateUtil.closeSession();
		}
		return roleList;
	}

到这里DataGrid数据表格就讲完了，接下来讲另一个组件。

3、数据表格下拉框

easyui_combogrid.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
	<meta http-equiv="description" content="This is my page"/>
	
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/icon.css">
<script type="text/javascript" src="<%=path%>/script/jquery-1.11.0.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/jquery.easyui.min.js"></script>
<script language="javascript">
jQuery(function(){
	$('#combo_div').combogrid({ 
		width:		300,   
	    panelWidth:450,      
	    idField:			'role_id',    
	    textField:			'role_name',    
	    url:			"<%=path%>/roleAction!listGridForUI?date="+new Date()+"",
	    rownumbers:		true,
	    fitColumns:		true,
	   selectOnNavigation:false,
	    hasDownArrow:		false,
	    mode:			"remote",
	    columns:[[     
	       {field:"role_id",		title:"角色编码",		width:100,	align:"center"},    
	       {field:'role_name',		title:'角色名称',		width:100},    
	       {field:'role_remark',	title:'角色备注',		width:100,	halign:"center",align:'left'}    
	    ]]    
	});  


});
</script>
</head>  
<body>
	快速搜索：<div id="combo_div"></div>


</body>
</html>

在服务器端，参数'q'必须先检索。用户可以查询数据库，然后返回一个SQL查询结果的JSON格式给浏览器。

请看上面的Roleservice.java。

好的，这个组件也讲完了。