1. 程式人生 > >easyUI( accordion +tree)動態生成導航選單(資料庫讀取資料)

easyUI( accordion +tree)動態生成導航選單(資料庫讀取資料)

$(function() { $.ajax({ type: 'POST', async: false, dataType: "json", url: '${pageContext.request.contextPath}/queryPMenu',//獲取選單 success: function(data) { $.each(data, function
(i, n) {
//載入父類節點即一級選單 var id = n.id; var text1 = n.text; if(i == 0) { //顯示第一個一級選單下的二級選單 $('#layout_west_accordion').accordion('add', { title: n.text, iconCls: n.iconCls, selected: true
, //可在這加HTML程式碼,改變佈局 content: '<div style="padding:10px 0px"><ul id="tree' + id + '"></ul></div>', }); } else { $('#layout_west_accordion'
).accordion('add', { title: n.text, iconCls: n.iconCls, selected: false, content: '<div style="padding:10px 0px"><ul id="tree' + id + '"></ul></div>', }); } $.ajax({ type: 'POST', async: false, dataType: "json", url: '${pageContext.request.contextPath}/queryCMenuById?pId=' + id, success: function(data) { $("#tree" + id).tree({ data: data, animate: true, //iconCls: icon-blank, //在樹節點加圖片 formatter:function(node){ return '<img src="images/admin.gif"/><br>'+node.text; }, //lines: true, //顯示虛線效果 onClick: function(node) { // 在使用者點選一個子節點即二級選單時觸發addTab()方法,用於新增tabs //if(node.url){//判斷url是否存在,存在則建立tabs if(node) { addTab(node); } } }); } }); }) } }); }); //新增標籤頁/選項卡(相當於一個父tabs,其他的都是新增在這個之上,沒有這個下面新增不起tabs) $('#tt').tabs({ border: false, onSelect: function(title) { } }); // add a new tab panel function addTab(node) { //var t=$.trim(t); var tabExitOrNot = $('#tt').tabs('exists', node.text);//判斷此選項卡是否已存在 if(tabExitOrNot == true) { $('#mt-tabs').tabs('select', node.text); return; } //新增選項卡 $('#tt').tabs('add', { title: node.text, //content: '<iframe scrolling="auto" frameborder="0" src="${pageContext.request.contextPath}'+ node.url +'" style="width:100%;height:600px;"></iframe>', closable: true, tools:[{ iconCls:'icon-mini-refresh', handler:function(){ alert('refresh'); } }] }); }