EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法...
2024-05-10 16:49:41
带参提交一次查询，从服务器加载新数据。这是一个神奇的方法
$('#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><metacharset="UTF-8"><title>BOS管理系统 首页</title><linkhref="favicon.ico"rel="icon"type="image/x-icon" /><!--导入jquery核心类库--><scripttype="text/javascript"src="./js/jquery-1.8.3.js"></script><!--导入easyui类库--><linkid="easyuiTheme"rel="stylesheet"type="text/css"href="./js/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="./js/easyui/themes/icon.css"><linkrel="stylesheet"type="text/css"href="./css/default.css"><scripttype="text/javascript"src="./js/easyui/jquery.easyui.min.js"></script><!--导入ztree类库--><linkrel="stylesheet"href="./js/ztree/zTreeStyle.css"type="text/css" /><scriptsrc="./js/ztree/jquery.ztree.all-3.5.js"type="text/javascript"></script><scriptsrc="./js/easyui/locale/easyui-lang-zh_CN.js"type="text/javascript"></script></head><!--easyui-layout进行总体页面布局--><bodyclass="easyui-layout"><divdata-options="region:'north',border:false"style="height:70px;padding:10px;"><div><imgsrc="./images/logo.png"border="0"></div><divid="sessionInfoDiv"style="position: absolute;right: 5px;top:10px;">[<strong>超级管理员</strong>]，欢迎你！您使用[<strong>192.168.1.100</strong>]IP登录！</div><divstyle="position: absolute; right: 5px; bottom: 10px; "><!--两个easyui-menubutton组件的普通方法定义--><ahref="javascript:void(0);"class="easyui-menubutton"data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a><ahref="javascript:void(0);"class="easyui-menubutton"data-options="menu:'#layout_north_kzmbMenu',iconCls:'icon-help'">控制面板</a></div><!--上边两个easyui-menubutton组件的填充--><divid="layout_north_pfMenu"style="width: 120px; display: none;"><divonclick="changeTheme('default');">default</div><divonclick="changeTheme('gray');">gray</div><divonclick="changeTheme('black');">black</div><divonclick="changeTheme('bootstrap');">bootstrap</div><divonclick="changeTheme('metro');">metro</div></div><divid="layout_north_kzmbMenu"style="width: 100px; display: none;"><divonclick="editPassword();">修改密码</div><divonclick="showAbout();">联系管理员</div><divclass="menu-sep"></div><divonclick="logoutFun();">退出系统</div></div></div><divdata-options="region:'west',split:true,title:'菜单导航'"style="width:200px"><!--easyui-accordion手风琴组件--><divclass="easyui-accordion"fit="true"border="false"><divtitle="基本功能"data-options="iconCls:'icon-mini-add'"style="overflow:auto"><!--zTree的依托标签--><ulid="treeMenu"class="ztree"></ul></div><divtitle="系统管理"data-options="iconCls:'icon-mini-add'"style="overflow:auto"><ulid="adminMenu"class="ztree"></ul></div></div></div><divdata-options="region:'center'"><divid="tabs"fit="true"class="easyui-tabs"border="false"><divtitle="消息中心"id="subWarp"style="width:100%;height:100%;overflow:hidden"><!--网页中插入其他页面利器--><iframesrc="./home.html"style="width:100%;height:100%;border:0;"></iframe></div></div></div><divdata-options="region:'south',border:false"style="height:50px;padding:10px;"><tablestyle="width: 100%;"><tbody><tr><tdstyle="width: 400px;"><divstyle="color: #999; font-size: 8pt;">BOSv2.0综合物流管理平台 | Powered by<ahref="http://www.itcast.cn/">传智播客</a></div></td><tdstyle="width: *;"class="co1"><spanid="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组件 初始为关闭状态--><divid="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"><divclass="easyui-layout"fit="true"><divregion="center"border="false"style="padding: 10px; background: #fff; border: 1px solid #ccc;"><tablecellpadding=3><tr><td>新密码：</td><td><inputid="txtNewPass"type="Password"class="txt01" /></td></tr><tr><td>确认密码：</td><td><inputid="txtRePass"type="Password"class="txt01" /></td></tr></table></div><divregion="south"border="false"style="text-align: right; height: 30px; line-height: 30px;"><aid="btnEp"class="easyui-linkbutton"icon="icon-ok"href="javascript:void(0)">确定</a><aid="btnCancel"class="easyui-linkbutton"icon="icon-cancel"href="javascript:void(0)">取消</a></div></div></div><!--easyui-menu组件的右键菜单填充内容--><divid="mm"class="easyui-menu"style="width:120px;"><divdata-options="name:'Close'">关闭当前窗口</div><divdata-options="name:'CloseOthers'">关闭其它窗口</div><divclass="menu-sep"></div><divdata-options="iconCls:'icon-cancel',name:'CloseAll'">关闭全部窗口</div></div><scripttype="text/javascript">$(function() {/** 开始Ztree的设置*/varsetting={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" οnclick="top.showAbout();">联系管理员</a>',timeout:5000});},3000);$("#btnCancel").click(function(){$('#editPwdWindow').window('close');});$("#btnEp").click(function(){alert("修改密码");});//设置全局变量 保存当前正在右键的tabs 标题varcurrentRightTitle ;//为选项卡，添加右键菜单 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选项卡vartabs=$('#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'){vartabs=$('#tabs').tabs('tabs');$(tabs).each(function(){if($(this).panel('options').title!= '消息中心'){$('#tabs').tabs('close',$(this).panel('options').title);}});}} }); });functiononClick(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页面varcontent= '<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(){vartab=$('#tabs').tabs('getTab',treeNode.name);$("iframe[src='"+treeNode.page+"']").get(0).contentWindow.location.reload(true);}}] });}} }/*******顶部特效 *******/ /*** 更换EasyUI主题的方法* @param themeName* 主题名称*/changeTheme= function(themeName) {var$easyuiTheme=$('#easyuiTheme');varurl=$easyuiTheme.attr('href');varhref=url.substring(0, url.indexOf('themes'))+ 'themes/'+themeName+ '/easyui.css';$easyuiTheme.attr('href', href);var$iframe=$('iframe');if($iframe.length> 0) {for(vari= 0; i<$iframe.length; i++) {varifr=$iframe[i];$(ifr).contents().find('#easyuiTheme').attr('href', href);}} };//退出登录 functionlogoutFun() {$.messager.confirm('系统提示','您确定要退出本次登录吗?',function(isConfirm) {if(isConfirm) {location.href= './login.html';}}); }//修改密码 functioneditPassword() {$('#editPwdWindow').window('open'); }//版权信息 functionshowAbout(){$.messager.alert("bos v2.0综合物流管理平台","设计: 传智播客<br/> 管理员邮箱: itcast_search@163.com <br/>"); }</script></body> </html>
转载于:https://www.cnblogs.com/qingyundian/p/9191417.html
EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法...相关推荐
- EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{code: '01',name: 'name01' }); easyui修改操作的回显方法 ...
- OkHttp框架从入门到放弃，解析图片使用Picasso裁剪，二次封装OkHttpUtils，Post提交表单数据...
OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据 我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的 ...
- OkHttp框架从入门到放弃，解析图片使用Picasso裁剪，二次封装OkHttpUtils，Post提交表单数据
OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据 我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的 ...
- springmvc+ztree v3实现类似表单回显功能
在做权限管理系统时,可能会用到插件zTree v3,这是一个功能丰富强大的前端插件,应用很广泛,如异步加载菜单制作.下拉选择.权限分配等.在集成SpringMVC中,我分别实现了zTree的添删改查, ...
- vue页面回显数据_解决vue表单回显数据无法修改的问题
前言:今天在做修改操作的时候遇到了一个问题,数据回显到修改表单之后,发现无法输入,也不能实现修改 项目环境:springboot+vue前后端分离 问题:修改操作数据回显无法输入值 一.问题截图 二. ...
- 全志 修改485转CAN串口回显 Patch
问题起因:平台:全志A40I 系统:Android6.0 IC:TJ1050 客户:XX项目主板 发送指令给 XX设备, 会收到设备回复 ,同时会收到回显的信息.主板测试 把串口和TJA1050这个芯 ...
- 使用ajax技术对内容进行修改，使内容回显到组件框中
使用ajax技术对页面进行修改需要回显内容时,可将修改按钮的click事件绑定一个方法,方法的参数为要修改的ID,然后对弹出的修改 框进行页面回显,都是用XXX.val()即可.如果表单内容太多,可使 ...
- easyUi load方法重新加载表单的数据
1.表单回显数据的方法 <script> //方法一function loadLocal(){$('#ff').form('load',{name:'myname',email:'myma ...
- easyUi load方法重新加载表单的数据
1.表单回显数据的方法 <script> //方法一function loadLocal(){$('#ff').form('load',{name:'myname',email:'myma ...
最新文章
- 现实版“神笔马良”！“90后”小伙把贫困村画成网红景点，网友：一个人带动整个村GDP...
- dede自定义表单增加添加时间怎么弄
- DFTug - Running the Test DRC Debugger
- （1）定义一个抽象类Weapon,该抽象类有两个抽象方法attack()，move() 这两个方法分别表示武器的攻击方式和移动方式。 （2）定义3个类：Tank,Fl
- 三星折叠屏手机出事！才用两天就“挂了”
- vue 打包html静态页面,vue项目打包、vue项目打包后空白界面解决办法
- keepalived详解（三）——keepalived与Nginx配合实战
- OpenGL学习笔记_图形渲染管线及典型渲染流程(绘制一个三角形)
- 内置的常用层：LayerColor、LayerGradient
- 【伸手党福利】开发人员重装系统顺序
- CacheCloud详解（一）----------CacheCloud搭建（Redis云平台）
- c 语言翻译软件,分享一款 程序员秒懂的翻译软件
- 【UU主机加速】PC无线热点直接加速switch（无需路由器）
- NUC140之I2C和AT24C32
- 一、springboot项目集成大众点评cat
- qqc什么梗_qqc是什么
- 光头老法师手持尼康却能玩出佳能的效果
- 浏览器首页劫持到www.2345.com修复一例
- 分享一款简单易用的视频剪辑|合并|转换软件
- VisualSVN Server版本库搭建