带参提交一次查询，从服务器加载新数据。这是一个神奇的方法
$('#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=" 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=" 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="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="100%;height:100%;overflow:hidden"> <!-- 网页中插入其他页面利器 --> <iframe src="./home.html" style="100%;height:100%;border:0;"></iframe> </div> </div> </div> <div data-options="region:'south',border:false" style="height:50px;padding:10px;"> <table style=" 100%;"> <tbody> <tr> <td style=" 400px;"> <div style="color: #999; font-size: 8pt;"> BOSv2.0综合物流管理平台 | Powered by <a href="http://www.itcast.cn/">传智播客</a> </div> </td> <td style=" *;" 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=" 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="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="100%;height:100%;overflow:hidden;">' + '<iframe src="' + treeNode.page + '" scrolling="auto" style="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>