EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法

带参提交一次查询,从服务器加载新数据。这是一个神奇的方法

$('#dg').datagrid('load',{code: '01',name: 'name01'
});

 

easyui修改操作的回显方法  $("#standardForm").form('load',rows[0]);

  

var toolbar = [ {id : 'button-add',text : '增加',iconCls : 'icon-add',handler : function(){$("#standardWindow").window("open");}}, {id : 'button-edit',text : '修改',iconCls : 'icon-edit',handler : function(){//判断选中记录数   调用数据表格方法  返回所有选定的行,当没有记录被选中,我将返回空数组。var rows = $("#grid").datagrid("getSelections");console.info(rows);if(rows.length!=1){$.messager.alert('系统信息','只能选中一条记录操作!','warning');}else{//弹出修改标准窗口$("#standardWindow").window("open");//将修改数据回显在窗口中表单中(隐藏域存放id)//数据:修改数据在rows数组 ,取第0个//form的load方法;加载页面记录填充表单$("#standardForm").form('load',rows[0]);}}},{id : 'button-delete',text : '作废',iconCls : 'icon-cancel',handler : function(){alert('作废');}},{id : 'button-restore',text : '还原',iconCls : 'icon-save',handler : function(){alert('还原');}}];

  

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />  

这时easyui的验证框,多用于后台管理系统表单的验证required为必填 email为邮箱的正则

注意:

不合法的表单如果采用传统的action="" methor="post"方法提交也能提交,那校验就没有意义了

可以easyui的form组件

的validate方法

<script type="text/javascript">
$("#save").click(function(){
var r = $("#standardForm").form("validate");
if(r){
$("#standardForm").submit();
}
})
</script>

如果验证通过才会提交

EasyUI和zTree使用方法和功能加到注解中了,方便查阅和复制

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>BOS管理系统 首页</title><link href="favicon.ico" rel="icon" type="image/x-icon" /><!-- 导入jquery核心类库 --><script type="text/javascript" src="./js/jquery-1.8.3.js"></script><!-- 导入easyui类库 --><link id="easyuiTheme" rel="stylesheet" type="text/css" href="./js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./js/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="./css/default.css"><script type="text/javascript" src="./js/easyui/jquery.easyui.min.js"></script><!-- 导入ztree类库 --><link rel="stylesheet" href="./js/ztree/zTreeStyle.css" type="text/css" /><script src="./js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script><script src="./js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script></head><!-- easyui-layout进行总体页面布局 --><body class="easyui-layout"><div data-options="region:'north',border:false" style="height:70px;padding:10px;"><div><img src="./images/logo.png" border="0"></div><div id="sessionInfoDiv" style="position: absolute;right: 5px;top:10px;">[<strong>超级管理员</strong>],欢迎你!您使用[<strong>192.168.1.100</strong>]IP登录!</div><div style="position: absolute; right: 5px; bottom: 10px; "><!-- 两个easyui-menubutton组件的普通方法定义 --><a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a><a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#layout_north_kzmbMenu',iconCls:'icon-help'">控制面板</a></div><!-- 上边两个easyui-menubutton组件的填充 --><div id="layout_north_pfMenu" style="width: 120px; display: none;"><div onclick="changeTheme('default');">default</div><div onclick="changeTheme('gray');">gray</div><div onclick="changeTheme('black');">black</div><div onclick="changeTheme('bootstrap');">bootstrap</div><div onclick="changeTheme('metro');">metro</div></div><div id="layout_north_kzmbMenu" style="width: 100px; display: none;"><div onclick="editPassword();">修改密码</div><div onclick="showAbout();">联系管理员</div><div class="menu-sep"></div><div onclick="logoutFun();">退出系统</div></div></div><div data-options="region:'west',split:true,title:'菜单导航'" style="width:200px"><!-- easyui-accordion手风琴组件 --><div class="easyui-accordion" fit="true" border="false"><div title="基本功能" data-options="iconCls:'icon-mini-add'" style="overflow:auto"><!-- zTree的依托标签 --><ul id="treeMenu" class="ztree"></ul></div><div title="系统管理" data-options="iconCls:'icon-mini-add'" style="overflow:auto"><ul id="adminMenu" class="ztree"></ul></div></div></div><div data-options="region:'center'"><div id="tabs" fit="true" class="easyui-tabs" border="false"><div title="消息中心" id="subWarp" style="width:100%;height:100%;overflow:hidden"><!-- 网页中插入其他页面利器 --><iframe src="./home.html" style="width:100%;height:100%;border:0;"></iframe></div></div></div><div data-options="region:'south',border:false" style="height:50px;padding:10px;"><table style="width: 100%;"><tbody><tr><td style="width: 400px;"><div style="color: #999; font-size: 8pt;">BOSv2.0综合物流管理平台 | Powered by <a href="http://www.itcast.cn/">传智播客</a></div></td><td style="width: *;" class="co1"><span id="online" style="background: url(./images/online.png) no-repeat left;padding-left:18px;margin-left:3px;font-size:8pt;color:#005590;">在线人数:1</span></td></tr></tbody></table></div><!--easyui的window组件 初始为关闭状态--><div id="editPwdWindow" class="easyui-window" title="修改密码" collapsible="false" minimizable="false" modal="true" closed="true" resizable="false" maximizable="false" icon="icon-save" style="width: 300px; height: 160px; padding: 5px;background: #fafafa"><div class="easyui-layout" fit="true"><div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;"><table cellpadding=3><tr><td>新密码:</td><td><input id="txtNewPass" type="Password" class="txt01" /></td></tr><tr><td>确认密码:</td><td><input id="txtRePass" type="Password" class="txt01" /></td></tr></table></div><div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;"><a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)">确定</a><a id="btnCancel" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">取消</a></div></div></div><!-- easyui-menu组件的右键菜单填充内容 --><div id="mm" class="easyui-menu" style="width:120px;"><div data-options="name:'Close'">关闭当前窗口</div><div data-options="name:'CloseOthers'">关闭其它窗口</div><div class="menu-sep"></div><div data-options="iconCls:'icon-cancel',name:'CloseAll'">关闭全部窗口</div></div><script type="text/javascript">
$(function() {/** 开始Ztree的设置*/var setting = {data : {simpleData : { // 简单数据 
                enable : true}},//注意这里的callback回调一定不能卸载data中,他们是并列关系
        callback : {onClick : onClick}};//通过AJAX获取json数据生成zTree
    $.post("./data/menu.json",function(data){$.fn.zTree.init($("#treeMenu"), setting, data);},"json");//zTree可以根据一个setting生成多个
    $.post("./data/admin.json",function(data){$.fn.zTree.init($("#adminMenu"), setting, data);},"json");// 等待3秒后执行EasyUI中的messager
    window.setTimeout(function(){$.messager.show({title:"消息提示",msg:'欢迎登录,超级管理员! <a href="javascript:void" onclick="top.showAbout();">联系管理员</a>',timeout:5000});},3000);$("#btnCancel").click(function(){$('#editPwdWindow').window('close');});$("#btnEp").click(function(){alert("修改密码");});// 设置全局变量 保存当前正在右键的tabs 标题 var currentRightTitle  ;// 为选项卡,添加右键菜单 easyui的tabs的onContextMenu事件三个参数
    $('#tabs').tabs({onContextMenu : function(e,title,index){currentRightTitle = title ; //easyui中menu的show方法
            $('#mm').menu('show', { left: e.pageX,top: e.pageY });e.preventDefault(); // 禁用原来的右键效果 
        }});//easyui中menu的点击事件
    $('#mm').menu({ onClick:function(item){ if(item.name==='Close'){$('#tabs').tabs('close',currentRightTitle);}else if(item.name === 'CloseOthers'){//返回所有tabs选项卡var tabs = $('#tabs').tabs('tabs');$(tabs).each(function(){if($(this).panel('options').title != '消息中心' && $(this).panel('options').title != currentRightTitle){$('#tabs').tabs('close',$(this).panel('options').title);}});}else if(item.name === 'CloseAll'){var tabs = $('#tabs').tabs('tabs');$(tabs).each(function(){if($(this).panel('options').title != '消息中心'){$('#tabs').tabs('close',$(this).panel('options').title);}});}} }); 
});function onClick(event, treeId, treeNode, clickFlag) {// 判断树菜单节点是否含有 page属性if (treeNode.page!=undefined && treeNode.page!= "") {if ($("#tabs").tabs('exists', treeNode.name)) {// 判断tab是否存在
            $('#tabs').tabs('select', treeNode.name); // 切换tab
        } else {// 开启一个新的tab页面var content = '<div style="width:100%;height:100%;overflow:hidden;">'  '<iframe src="'  treeNode.page  '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';$('#tabs').tabs('add', {title : treeNode.name,content : content,closable : true,tools:[{ iconCls:'icon-reload', // 刷新按钮
                    handler : function(){var tab = $('#tabs').tabs('getTab',treeNode.name);$("iframe[src='" treeNode.page "']").get(0).contentWindow.location.reload(true);}}] });}}
}/*******顶部特效 *******/
/*** 更换EasyUI主题的方法* @param themeName* 主题名称*/
changeTheme = function(themeName) {var $easyuiTheme = $('#easyuiTheme');var url = $easyuiTheme.attr('href');var href = url.substring(0, url.indexOf('themes'))   'themes/'  themeName   '/easyui.css';$easyuiTheme.attr('href', href);var $iframe = $('iframe');if ($iframe.length > 0) {for ( var i = 0; i < $iframe.length; i  ) {var ifr = $iframe[i];$(ifr).contents().find('#easyuiTheme').attr('href', href);}}
};
// 退出登录
function logoutFun() {$.messager.confirm('系统提示','您确定要退出本次登录吗?',function(isConfirm) {if (isConfirm) {location.href = './login.html';}});
}
// 修改密码
function editPassword() {$('#editPwdWindow').window('open');
}
// 版权信息
function showAbout(){$.messager.alert("bos v2.0综合物流管理平台","设计: 传智播客<br/> 管理员邮箱: itcast_search@163.com <br/>");
}
</script></body>
</html>

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jboss4。0下mysql数据源的配置

花了一个小时的时间&#xff0c;搞了一下jboss4。0下mysql数据源的配置。下面是一些具体过程 1、首先安装mysql数据库并将其驱动程序考到jboss的server\default\lib下面 2、将mysql-ds.xml文件放置到server\default\deploy下面 内容如下&#xff1a; <datasources&g…

JavaFX技巧15:ListView自动滚动

我最近不得不为FlexGanttFX实现自动滚动功能&#xff0c;并认为我的解决方案可能对其他人有用。 您可以在下面的清单中找到它的基本概念。 主要思想是使用后台线程来调整列表视图使用的虚拟流节点的像素位置。 当检测到“靠近”顶部或底部边缘的拖拉时&#xff0c;线程开始。 “…

Direct3D学习_绘制

运行了示例&#xff0c;重要步骤记录如下&#xff1a; 1&#xff1a;创建顶点和索引缓存 IDirect3DDevice9::CreateVertexBuffer IDirect3DDevice9::CreateIndexBuffer 2&#xff1a;填充数据 lock ........ unlock 3&#xff1a;设置摄像机 D3DXVECTOR3 position(x,y,z);   …

JZTK项目 驾照题库项目servlet层得到的json字符串在浏览器中 汉字部分出现问号?无法正常显示的解决方法

servlet层中的代码如下&#xff1a; package com.swift.jztk.servlet;import java.io.IOException;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletReque…

【RTOS】基于V7开发板的uCOS-III,uCOS-II,RTX4,RTX5,FreeRTOS原版和带CMSIS-RTOS V2封装层版全部集齐...

RTOS模板制作好后&#xff0c;后面堆各种中间件就方便了。 1、基于V7开发板的最新版uCOS-II V2.92.16程序模板&#xff0c;含MDK和IAR&#xff0c;支持uC/Probehttps://www.cnblogs.com/armfly/p/11255981.html 2、基于V7开发板的最新版uCOS-III V3.07.03程序模板&#xff0c;含…

三极管开关电路设计(转)

三极管开关电路设计 三极管除了可以当做交流信号放大器之外&#xff0c;也可以做为开关之用。严格说起来&#xff0c;三极管与一般的机械接点式开关在动作上并不完全相同&#xff0c;但是它却具有一些机械式开关所没有的特点。图1所示&#xff0c;即为三极管电子开关的基本电路…

poj3009

样例和网上找的测试数据 都过了 还是 wa program poj3009;type starecord x,y:integer; end;var dir:array[1..4,1..2]of integer((1,0),(-1,0),(0,1),(0,-1)); w,h,ans,ansb:integer; map:array[0..21,0..21]of integer; start:sta; flag:boolean; procedur…

大小端测试程序

//大小端测试程序#include <stdio.h>#include <stdlib.h>voidcheckCPUendian();intmain(){ checkCPUendian();return0;}voidcheckCPUendian(){ union{ unsigned inti; unsigned chars[4]; }c; c.i 0x12345678; printf("%s\n", (0x12c.s[0]) ?"大端…

OpenShift上具有NetBeans的Java EE

今天是慕尼黑的NetBeans日 。 我很高兴提出一个关于将Red Hat产品与我著名的IDE集成的会议。 因此&#xff0c;我一直在谈论WildFly &#xff0c; EAP &#xff0c;Git和OpenShift Online&#xff0c;并展示了使用该工具集优化开发工作流程的所有不同方式。 大约有100位与会者…

tomcat.apache startup.bat闪退两种解决方法

tomcat bin文件夹中的startup.bat闪退原因及解决方法两种 方法一&#xff1a;在启动tomcat时闪退&#xff0c;重新检查java的jre运行环境。如果环境变量忘记配置一定会导致了tomcat的闪退。 追加 Apache的bin的环境变量也放到path中 注意检查一下看 JAVA_HOME是否写错&#xff…

产生的DLL (VS2005, MATLAB7.5, mwArray)

from: http://www.simwe.com/forum/thread-801187-1-1.html 程序中使用MATLAB编译产生的DLL &#xff08;VS2005, MATLAB7.5, mwArray&#xff09; 最近有几个帖子都在讨论有关在C程序中使用MATLAB编译产生的动态链接库DLL。本 来想用原来帖子中给出的m代码作为例子&#xff0c…

构建和测试JSF.next

JSF 2.3专家组正在努力确定哪些功能将成为即将发布的版本的一部分。 JSF团队一直在努力改善CDI的一致性。 JSF 2.3代码库中已经有许多新功能可以开始测试。 我将尝试使本文保持最新状态&#xff0c;并添加最新功能。 有关最新参考&#xff0c;请参阅Manfred的博客。 要参考Manf…

启动LINUX下的TFTP服务器

第一步: 我们要确认,LINUX下是不是安装了TFTP-SERVER. 在LINUX下输入: rpm -q tftp-server 如出现如下回复: tftp-server-0.39-2 则表示tftp-server已安装. 第二步: 修改TFTP启动脚本: 方法一: 需要修改ftptpd的启动脚本vi /etc/xinetd.d/tftp加上 disable no 此时即可启动tf…

npm 常用指令

npm install <name>安装nodejs的依赖包 例如npm install express 就会默认安装express的最新版本&#xff0c;也可以通过在后面加版本号的方式安装指定版本&#xff0c;如npm install express3.0.6 npm install <name> -g 将包安装到全局环境中 对应的的是 pac…

简单代码生成器原理剖析(一)

上篇文章&#xff08;深入浅出三层架构&#xff09;分析了简单三层架构的实现。包括Model,DAL&#xff08;数据访问层&#xff09;,BLL&#xff08;业务逻辑层&#xff09;的实现。 实际开发中&#xff0c;由于重复代码的操作&#xff0c;会花费大量时间&#xff0c;如果以代码…

Qt学习之路(4):初探信号槽

看过了简单的Hello, world! 之后&#xff0c;下面来看看Qt最引以为豪的信号槽机制&#xff01;所谓信号槽&#xff0c;简单来说&#xff0c;就像是插销一样&#xff1a;一个插头和一个插座。怎么说呢&#xff1f;当某种事件发生之后&#xff0c;比如&#xff0c;点击了一下鼠标…

当字符串为空但不为空时

介绍 我团队中的一名初级程序员遇到了一个有趣的错误。 我已经不止一次看到它的症状。 这篇文章是寻找什么以及将来如何防止它。 我还将探讨该问题的不同解决方案。 病征 有问题的代码看起来做得不错。&#xff1a; if(trouble ! null && !trouble.isEmpty()) { Syst…

注解的力量 -----Spring 2.5 JPA hibernate 使用方法的点滴整理(六): 一些常用的数据库 注解...

一、 实体 Bean 每个持久化POJO类都是一个实体Bean, 通过在类的定义中使用 Entity 注解来进行声明。 声明实体Bean Entitypublic class Flight implements Serializable { Long id; Id public Long getId() { return id; } public void setId(Long id) { this.id id; }} E…

SWT鼠标单击实现

最近&#xff0c;我做了一些SWT定制小部件的开发&#xff0c;偶然发现了一个问题&#xff0c; 为什么没有默认的SWT鼠标单击侦听器&#xff1f; 由于这个主题有时会提出&#xff0c;所以我认为写一两句话来说明背后的理性基础以及如何实现鼠标单击通常不会受到伤害。 SWT鼠标请…

第三周进度总结

本周大部分时间花费在了考驾照上&#xff0c;所以没有在学习上用太多的时间。在不多的时间里看完了老师推荐的《大道至简》这本书&#xff0c;从书中学到了很多编程方面的思想&#xff0c;受益匪浅。还完成了2个代码的编译&#xff0c;一个是判断AB和C的关系&#xff0c;这个并…