easyUi 學習筆記 （一） 使用easyui 和ztree 創建前端框架
阿新 • • 發佈：2017-08-03
function itl tab javascrip div pos lan 20px wid
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 4 <%@ include file="/common/page.jsp" %> // 這裏是引用的公共代碼 ，主要是css和js jstl 的引用 easyui核心js都在裏面 5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 6 <html> 7 <head> 8 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 9 <link rel="stylesheet" href="${pageContext.request.contextPath }/ztree/css/demo.css" type="text/css"> 10 <link rel="stylesheet" href="${pageContext.request.contextPath }/ztree/css/zTreeStyle/zTreeStyle.css"type="text/css"> 11 <script type="text/javascript" src="${pageContext.request.contextPath }/ztree/js/jquery.ztree.core.js"></script> 12 <style type="text/css"> 13 *{ 14 margin: 0 0 ; 15 } 16 </style> 28 29 <title>Insert title here</title> 30 </head> 31 <body class="easyui-layout"> 32 33 <div data-options="region:‘north‘,border:false" style="height:60px;background:#B3DFDA;padding:10px"> 34 <h3>xxx 系統</h3> 35 </div> 36 <!-- collapsible 是否顯示 可折疊按鈕 --> 37 <div id="west" data-options="region:‘west‘,split:false,title:‘West‘,collapsible:true" style="width:150px;padding:10px;"> 38 39 <div id="treeDemo" class="ztree"></div> 40 41 </div> 42 <div data-options="region:‘south‘,border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div> 43 <div data-options="region:‘center‘,title:‘Center‘" id="center" >
//這裏是使用easyui 的tabs標簽， 每次點擊樹形菜單（ztree），使用tabs創建一個標簽
44 <div id="tt" class="easyui-tabs" style="width: 100%;height: 100%;"> 53 </div> 54 55 </body> 56 57 <script type="text/javascript"> 58 59 /* $(‘#tt‘).tabs({ 60 border:false, 61 onSelect:function(title){ 62 alert(title+‘ is selected‘); 63 } 64 }); 65 66 function addNode() { 67 $("#tt").append("<div title=‘Tab4‘ data-options=‘closable:true‘style=‘overflow:auto;padding: 20px;‘>這裏有個添加問題啊啊啊 </div>"); 68 } 69 */ 70 71 function addTab(title, url){ 72 if ($(‘#tt‘).tabs(‘exists‘,title)){ 73 $(‘#tt‘).tabs(‘select‘,title); 74 } else { 75 var content = ‘<iframe scrolling="auto" frameborder="0" src="‘+url+‘" style="width:100%;height:100%;"></iframe>‘; 76 $(‘#tt‘).tabs(‘add‘,{ 77 title:title, 78 content:content, 79 closable:true, 80 tools:[{ 81 82 }] 83 }); 84 } 85 }
//ztree的callback 調用的方法 86 function openTab(event, treeId, treeNode){ 87 if(treeNode.isParent){ 88 return; 89 }
//調用easyui方法 ，判斷是否創建標簽 90 if(!$("#tt").tabs(‘exists‘,treeNode.mname)){ // 如果不存在此tab則創建 91 if(treeNode.url!="") 92 $("#tt").tabs(‘add‘,{ 93 title:treeNode.mname, 94 href:treeNode.url, 95 closable:true, 96 }); 97 }else{ // 如果已經打開則選中 98 $("#content_tabs").tabs(‘select‘,treeNode.mname); 99 } 100 } 101 102 </script> 103 <SCRIPT type="text/javascript"> 104 //ztree 樹的創建方法 105 var setting = { 106 data: { 107 key:{ 108 name: "mname", 109 url:‘_url‘ 110 }, 111 simpleData: { 112 enable: true, 113 idKey: "mid", 114 pIdKey: "pmid" 115 } 116 117 }, 118 callback:{ 119 onClick:openTab // 單擊ztree的響應函數 120 } 121 }; 122 123 124 125 $(document).ready(function(){ 126 $.post(‘loadMenus.action‘,function(zNodes){ 127 $.fn.zTree.init($("#treeDemo"), setting, zNodes); 128 }) 129 130 }); 131 132 </SCRIPT> 133 </html>
easyUi 學習筆記 （一） 使用easyui 和ztree 創建前端框架