EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法
生活随笔
收集整理的這篇文章主要介紹了
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
總結
以上是生活随笔為你收集整理的EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： img、列表和table标签
- 下一篇： tomcat.apache startu