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>
EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法的更多相关文章
- OkHttp框架从入门到放弃，解析图片使用Picasso裁剪，二次封装OkHttpUtils，Post提交表单数据
OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据 我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的 ...
- springmvc+ztree v3实现类似表单回显功能
在做权限管理系统时,可能会用到插件zTree v3,这是一个功能丰富强大的前端插件,应用很广泛,如异步加载菜单制作.下拉选择.权限分配等.在集成SpringMVC中,我分别实现了zTree的添删改查, ...
- iframe中使用模态框提交表单后,iframe加载父页面的解决方法
在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...
- Java Dom对XML的解析和修改操作
与Dom4J和JDom对XML的操作类似,JDK提供的JavaDom解析器用起来一样方便,在解析XML方面Java DOM甚至更甚前两者一筹!其不足之处在于对XML的增删改比较繁琐,特开篇介绍... ...
- easyUi load方法重新加载表单的数据
1.表单回显数据的方法 <script> //方法一 function loadLocal(){ $('#ff').form('load',{ name:'myname', email:' ...
- easyui -validatebox 验证框加载
问题: easyui验证狂框有时会验证输入字符的位数,或者验证有效字符组合 解决: 使用easyui的验证框,继承验证框,指定输入框为验证框即可 $(function(){ $.extend($.fn ...
- 使用jquery的load方法设计动态加载，并解决被加载页面JavaScript失效问题
一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根 ...
- Jquery easyui开启行编辑模式增删改操作
Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...
- [转]Jquery easyui开启行编辑模式增删改操作
本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...
随机推荐
- hashlib库的使用
这个模块实现了许多不同的安全哈希和消息摘要算法的通用接口.包括FIPS安全哈希算法SHA1.SHA224.SHA256.SHA384和SHA512(在FIPS 180-2中定义)以及RSA的MD5算法 ...
- （三）css之浮动&定位
众所周知,一个页面可能包含多个div,如何对这些div进行排列,以便具有较好的显示效果呢? css提供了浮动和定位两个属性进行div的排列,下面主要针对浮动和定位进行详细地阐述. (一)何为浮动? 浮 ...
- 线程安全的Dictionary
线程安全的DictionaryConcurrentDictionary<TKey, TValue> 类
- spring cloud provider报“Error parsing HTTP request header”，feign端报“Read timed out“
这两天在调试spring cloud feign+hystrix报了如下错误: spring cloud provider报“Error parsing HTTP request header”,fe ...
- oracle学习篇七：更新操作、事务处理
----------------1.数据库更新操作----------------------------- select * from tab;--查询表 drop table siebel_use ...
- java线程安全问题原理性分析
1.什么是线程安全问题? 从某个线程开始访问到访问结束的整个过程,如果有一个访问对象被其他线程修改,那么对于当前线程而言就发生了线程安全问题:如果在整个访问过程中,无一对象被其他线程修改,就是线程安全 ...
- vue+axios+easy-mock+element-ui实现表格分页功能
废话不多,效果如图: LineSource.vue文件内代码如下: <template> <div class="c-main auth userControl" ...
- Android FlycoDialog 简单实用的自定义Android弹窗对话框之Dialog篇
效果图镇楼 FlycoDialog是一款非常棒的弹窗对话框处理框架,今天在这里主要讲一下他的自定义弹出对话框的功能,这里以第二幅效果图为例,图片已经放在博客最下方,X号自己随便找一个东西代替吧. ...
- jQuery Event.stopImmediatePropagation() 函数详解
stopImmediatePropagation()函数用于阻止剩余的事件处理函数的执行,并防止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈 ...
- Oracle：environment variable "PATH" does not exceed the recommended length
今天重新安装oracle11g,突然在检测时报了以下错误: Environment variable: "PATH" - This test checks whether the ...