4.10easyui

2023-11-21 19:38
文章标签 easyui 4.10

本文主要是介绍4.10easyui，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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。
 

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

                                    

                                        这篇关于4.10easyui的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
                                    

                                    

                                

                            

                            

                        

                    

                    

                        

                            原文地址:

                            本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/404603。
                            
                        

                    

                    
                    

                        
                            
                        
                    

                

                

                    相关文章
                

                    

                        

                            

                                

                                    
                                        easyui同时验证账户格式和ajax是否存在
                                    
                                

                            

                            

                                

                                    easyui同时验证账户格式和ajax是否存在
                                

                                

                                    accountName: {validator: function (value, param) {if (!/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/i.test(value)) {$.fn.validatebox.defaults.rules.accountName.message = '账户名称不合法（字母开头，允许4-16字节，允许字母数字下划线）';return fal
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        easyui 验证下拉菜单select
                                    
                                

                            

                            

                                

                                    easyui 验证下拉菜单select
                                

                                

                                    validatebox.js中添加以下方法： selectRequired: {validator: function (value) {if (value == "" || value.indexOf('请选择') >= 0 || value.indexOf('全部') >= 0) {return false;}else {return true;}},message: '该下拉框为必选项'}
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        easyui 选中行在按一次取消选中
                                    
                                

                            

                            

                                

                                    easyui 选中行在按一次取消选中
                                

                                

                                    <table id="dg" style="height:100%" ></table><script>$(function () {var columns=[{field:'name',title:'菜单名称',width:200,align:'left'},{field:'app',title:'应用名称',width:100,align:'left'},{field:'controller
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        Jquery EasyUI 弹出div对话框引入其他页面（iframe）
                                    
                                

                            

                            

                                

                                    Jquery EasyUI 弹出div对话框引入其他页面（iframe）
                                

                                

                                    //url：窗口调用地址，title：窗口标题，width：宽度，height：高度，shadow：是否显示背景阴影罩层function showMessageDialog(url, title, width, height, shadow) {var content = '<iframe src="' + url + '" width="100%" height="99%" framebord
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        easyui 重复提交url
                                    
                                

                            

                            

                                

                                    easyui 重复提交url
                                

                                

                                    就我所知，原因有二： 一：重复初始化     1、传统方式        查看文本 打印     1  $(function () {    2             var url = "../Source/Query/jhDataQry.ashx?action=query";    3             $(dg).datagrid({    4
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        jQuery EasyUI基础组件（panel，window，dialog）
                                    
                                

                            

                            

                                

                                    jQuery EasyUI基础组件（panel，window，dialog）
                                

                                

                                    在这里我们首先要理解Jquery组件之间的关系，理解Jquery的两种写法。理解动态加载组件的方法，但是不推荐使用 动态加载 easyloader.js  解析标签里的class值使用jquery parser.js      首先我们讲解panel面板，例如网页上的最大化，最小化，关闭按钮，他们是怎么实现的呢。  用$.fn.panel.defaults重写defaults。
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        jQuery EasyUI 表单
                                    
                                

                            

                            

                                

                                    jQuery EasyUI 表单
                                

                                

                                    jQuery EasyUI  表单 - 创建树形下拉框 树形下拉框（ComboTree）是一个带有下列树形结构（Tree）的下拉框（ComboBox）。它可以作为一个表单字段进行使用，可以提交给远程服务器。 在本教程中，我们将要创建一个注册表单，带有  name、address、city 字段。city 字段是一个树形下拉框（ComboTree）字段，在里面用户可以下拉树面板（tree pan
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        JQuery EasyUI环境的搭建
                                    
                                

                            

                            

                                

                                    JQuery EasyUI环境的搭建
                                

                                

                                    JQueryEasyUI搭建环境       1、下载JqueryEasyUI包 http://www.jeasyui.com/download/index.php  2、打开MyEclipse创建WebProject。  3、将下载下来的JqueryEasyUI包解压后放到到WebRoot下。如下图所示     二、包含文件         新建一个header.jsp文件，将需要用到的Jq
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        JQuery EasyUI表单-表单验证
                                    
                                

                            

                            

                                

                                    JQuery EasyUI表单-表单验证
                                

                                

                                    jQuery EasyUI  表单 - 表单验证 本次将向您展示如何验证一个表单。easyui框架提供一个 validatebox插件来验证一个表单。在本教程中，我们将创建一个联系表单，并应用 validatebox插件来验证表单。然后您可以根据自己的需求来调整这个表单。  创建表单（form） 让我们创建一个简单的联系表单，带有 name、email、subject 和 message
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        js-模拟easyui-datagrid表格各行选中事件-实现逻辑
                                    
                                

                            

                            

                                

                                    js-模拟easyui-datagrid表格各行选中事件-实现逻辑
                                

                                

                                    鉴于easyui-datagrid一旦使用于大数据，则会非常卡顿，这里模仿easyui-datagrid实现行选中事件的逻辑    var tableObj = {domIdName:'actCarTable',data:[],//表格数据isSelectedTrIndex:[],//被选中行的索引isDblclick:null,//是否双击selectRowArr:[], //选中行数据数
                                

                                

                                    阅读更多...
                                

                            

                        

                    

            

        

    


    


    

        

            Copyright China编程   23002807@qq.com
        

        

            沪ICP备2023033072号-2