zui樹型菜單用法

<nav id="menu" class="menu" data-ride="menu" style="width:300px;"><ul id="treeMenu" class="tree tree-menu" data-ride="tree" style="width:300px;overflow-y:auto;overflow-x: hidden"></ul> </nav> // 手動通過點擊模擬高亮菜單項$('#treeMenu').on('click', 'a', function() {$('#treeMenu li.active').removeClass('active'); var Tthis=$(this);Tthis.closest('li').addClass('active'); //var current_li=Tthis.closest('li');}); function SearchTableName(searchKey) {datafind_searchKey=searchKey;// api/features/tables var t_dmp_url=webconfig.webapiurl_dmp; var t_url =t_dmp_url+"/api/features/tables";//alert(t_url);$.ajax({url: t_url,async: false,cache: false,type: "POST", dataType: "json", success: fnSuccess,error: error}); }; var datafind_searchKey=''; function fnSuccess(result) {var SeriesArray=[];var t_Series='';var t_code='';var t_name='';for(var index=0;index<result.length;index++){t_Series=result[index].Series;t_name=result[index].Name;if(t_name && (datafind_searchKey=='' ||t_name.indexOf(datafind_searchKey)!=-1)){if($.ArrayContains(SeriesArray,t_Series)==false){SeriesArray.push(t_Series);}}}//初始化樹型導航菜單var treeMenu=$('#treeMenu');if(treeMenu && treeMenu[0]){var t_str='';for(var i=0;i<SeriesArray.length;i++){t_str+='<li class="has-list" data-idx="'+(i+1)+'" id="node_'+(i+1)+'">';t_str+='<i class="list-toggle icon"></i>';var t_collapseStr='onClick="javascript:toggleTreeNode(\'node_'+(i+1)+'\');"';t_str+='<a id="node_a_'+(i+1)+'" href="#" '+t_collapseStr+'><i class="icon icon-bars"></i>'+SeriesArray[i]+'</a>';t_str+='<ul data-idx="'+(i+1)+'">';var colIndex=0;for(var index=0;index<result.length;index++){t_Series=result[index].Series;if(t_Series==SeriesArray[i]){t_code=result[index].Code;t_name=result[index].Name;if(t_name && (datafind_searchKey=='' ||t_name.indexOf(datafind_searchKey)!=-1)){colIndex+=1;//t_value=result[index].Value;t_imgStr=GetLayerIconUrl(t_value);t_clickStr='onClick="javascript:SelectLayerEvent(\''+t_code+'\');"'; t_str+='<li data-idx="'+(i+1)+'" data-id="'+(i+1)+'-'+colIndex+'"><a id="table_'+t_code+'" value="'+t_code+'" '+t_clickStr+' >'+t_imgStr+t_name+'</a></li>';}}}t_str+="</ul>"t_str+='</li>'; }treeMenu[0].innerHTML=t_str;} }; function toggleTreeNode(nodeID) {//alert(nodeID);var liObj=$('#'+nodeID);var cName=liObj[0].className;if(cName.indexOf('open')!=-1){liObj.removeClass('open');}else{liObj.addClass('open');} };

總結

以上是生活随笔為你收集整理的zui树型菜单用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。