jquery easyui選單樹顯示

阿新 • • 發佈：2019-01-18

目前做了一個easyui專案需要顯示多級選單，選單配置到資料庫中，因此每級選單都需要到資料庫中取，用了jQuery EasyUI方便多了。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>樹選單操作 - jQuery EasyUI 範例 - 何問起</title><base target="_blank" />
 6     <link rel="stylesheet" type 
="text/css" href="http://hovertree.com/jeasyui/themes/default/easyui.css">
 7     <link rel="stylesheet" type="text/css" href="http://hovertree.com/jeasyui/themes/icon.css">
 8     <link rel="stylesheet" type="text/css" href="http://hovertree.com/jeasyui/demo/demo.css">
 9     <script type="text/javascript" 
 src="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js"></script>
10     <script type="text/javascript" src="http://hovertree.com/jeasyui/jquery.easyui.min.js"></script>
11     <style>a{color:black;text-decoration:none;}</style>
12 </head>
13 <body>
14     < 
h2>樹選單操作</h2>
15     <p>點選下列按鈕體驗效果.</p>
16     <div style="margin:20px 0;">
17         <a href="javascript:;" class="easyui-linkbutton" onclick="collapseAll()" target="_self">全部收起</a>
18         <a href="javascript:;" class="easyui-linkbutton" onclick="expandAll()" target="_self">全部展開</a>
19         <a href="javascript:;" class="easyui-linkbutton" onclick="expandTo()" target="_self">展開選擇指定項</a>
20         <a href="javascript:;" class="easyui-linkbutton" onclick="getSelected()" target="_self">獲取選擇項值</a>
21     </div>
22     <div class="easyui-panel" style="padding:5px">
23         <ul id="tt" class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
24     </div>
25     <br /><br />
26     <a href="http://hovertree.com/">首頁</a>
27     <script type="text/javascript">
28         function collapseAll(){
29             $('#tt').tree('collapseAll');
30         }
31         function expandAll(){
32             $('#tt').tree('expandAll');
33         }
34         function expandTo(){
35             var node = $('#tt').tree('find',113);
36             $('#tt').tree('expandTo', node.target).tree('select', node.target);
37         }
38         function getSelected(){
39             var node = $('#tt').tree('getSelected');
40             if (node){
41                 var s = node.text;
42                 if (node.attributes){
43                     s += ","+node.attributes.p1+","+node.attributes.p2;
44                 }
45                 alert(s);
46             }
47         }
48     </script>
49 </body>
50 </html>

選單項的json檔案程式碼：

[
{
"id": 1,
"text": "Tree選單",
"children": [
{
"id": 11,
"text": "Photos",
"state": "closed",
"children": [
{
"id": 111,
"text": "<a href='http://hovertree.com'>何問起</a>"
},
{
"id": 112,
"text": "<a href='http://hovertree.com/jeasyui/'>EasyUI</a>"
},
{
"id": 113,
"text": "<a href='http://hovertree.com/menu/jquery/'>jQuery</a>"
}
]
},
{
"id": 12,
"text": "Program Files",
"children": [
{
"id": 121,
"text": "<a href='http://hovertree.com/h/bjaf/hoverclock.htm'>HoverClock</a>"
},
{
"id": 122,
"text": "<a href='http://hovertree.com/h/bjaf/easysector.htm'>畫餅圖</a>",
"attributes": {
"p1": "Custom Attribute1",
"p2": "Custom Attribute2"
}
},
{
"id": 123,
"text": "<a href='http://hovertree.com/h/bjaf/hovertreebatch.htm'>批量重新命名</a>"
},
{
"id": 124,
"text": "<a href='http://tool.hovertree.com/a/base64/'>影象轉碼</a>",
"checked": true
}
]
},
{
"id": 13,
"text": "<a href='http://hovertree.com/texiao/game/'>見縫插針</a>"
},
{
"id": 14,
"text": "<a href='http://hovertree.com/shortanswer/bjaf/j43wyyvr.htm'>選擇題</a>"
},
{
"id": 15,
"text": "<a href='http://hovertree.com/h/bjaf/css3icon.htm'>圖示</a>"
},
{
"id": 16,
"text": "<a href='http://hovertree.com/h/bjaf/treeaction.htm'>原文</a>"
}
]
}
]

jquery easyui選單樹顯示

目前做了一個easyui專案需要顯示多級選單，選單配置到資料庫中，因此每級選單都需要到資料庫中取，用了jQuery EasyUI方便多了。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta char

jQuery EasyUI-非同步樹後臺程式碼與資料庫設計

easyui的非同步樹建立很簡單,只需要指定一個獲取樹的JSON資料的URL地址就可以了,API是這樣寫的：非同步樹後臺程式碼設計方式有很多種,我說下我的設計。資料庫表設計 Tree表先來解釋下每個欄位的含義： id：節點ID,用於後臺接

jQuery EasyUI 組合樹(ComboTree)用法

jQuery EasyUI 組合樹(ComboTree) 和組合框的用法差不多，只是在顯示上有點差別：一個顯示成樹狀結構，一個顯示成列表結構。下面來介紹一下組合樹(ComboTree)用法的詳細用法：HTML程式碼<select id="cc" style="width

Jquery easyUI treeGride用js初始化後不顯示樹結構的解決方案

問題: 已知treeGride 1.44以及之前的版本中,用js的方式載入json資料來初始化一個treeGride可能會出現沒有樹結構的情況; 原因以及解決方法: js初始化時候,treeField中指定的欄位,一定要在columns中出現,如果沒有

jQuery EasyUI實現樹形選單及顯示列表資訊

目的：點選目錄即可顯示該部門下員工詳細資訊，應用於OA辦公系統開發新增各種SH支援，H3core +S2 EMPDAO /* * 根據部門編號查詢部門員工資訊 (non-Jav

動態控制jQuery easyui datagrid工具欄顯示隱藏

第一條 button 一個按鈕 yui query 控制 show disable //隱藏第一個按鈕 $(‘div.datagrid-toolbar a‘).eq(0).hide(); //隱藏第一條分隔線 $(‘div.datagrid-toolbar div‘).e

jQuery EasyUI 數據樹控件（Tree）的簡單使用實例

itl scripts get 提示鏈接 size 顯示 attr style 1，首先寫了一個輔助的Model（CityEasyTree EasyUI Tree需要的的數據格式要符合json。標明 EasyUI Tree的API 中常用屬性） 1

jquery easyui datagrid/table 右邊線顯示不全

eight AI 分享 inf jquer alt 顯示 col info <table id="dg" style="height:400px"></table> 右邊線顯示不全解決：在外面套一個panel，邊框隱藏：border:hidden

jquery easyui 右鍵選單

本帖最後由 lishunwen0825 於 2013-03-01 12:23:39 編輯 &nbs

jQuery EasyUI中window/dialog 視窗摺疊和展開方法（顯示）

在jQuery的EasyUI中新視窗或訊息框是通過class="easyui-window"和class="easyui-dialog"定義，並可以通過其collapsible、minimizable、maximizable、closable、closed分別控

jQuery EasyUI使用教程之建立非同步樹

想要建立非同步，每個樹節點必須要有一個“id”屬性，此屬性將提交回伺服器去檢索子節點的資料。建立樹 1 2 <ul id="tt" class="easyui-tree" url="tree2_getdata.php">

easyui menu tree 實現左側選單樹

@ResponseBody @RequestMapping("menuTreeEasyUI") public String menuTreeEasyUI(HttpServletRequest request,HttpServletResponse response) { Ht

jquery easyui 在子tab頁中開啟新tab頁(關於easyUI在子頁面增加顯示tabs的一個問題)

文章轉自:http://breezylee.iteye.com/blog/1762811 在父頁面點個連結能動態看到子頁面的情況太簡單，請看easyUI官網：http://www.jeasyui.com/tutorial/layout/tabs2.php 現在說的是在

基於MVC4+EasyUI的Web開發框架經驗總結（1）-利用jQuery Tags Input 外掛顯示選擇記錄

最近花了不少時間在重構和進一步提煉我的Web開發框架上，力求在使用者體驗和介面設計方面，和Winform開發框架保持一致，而在Web上，我主要採用EasyUI的前端介面處理技術，走MVC的技術路線，在重構完善過程中，很多細節花費不少時間進行研究和提煉，一步步走過來，也積累了不

ztree樹形選單與jQuery EasyUI的選項卡tabs結合使用

jquery-easyui中列表控制元件datagrid沒有資料時顯示列表為空資訊

jquery-easyui控制元件datagrid下，如果有資料，會顯示按照列表顯示，如果沒有資料，那麼會顯示如下的介面。沒有任何提示。為了讓沒有資料的情況下，提示“列表為空”，我們需要設定datagrid屬性。這個屬性就是emptyMsg。預設情況下，這個屬性是為空，沒有值。

JQuery EasyUI Combobox 實現省市二級聯動選單

//編輯修改或新增頁面聯動可以這樣寫 jQuery(function(){ // 省級 $('#province').combobox({ valueField:'itemvalue', //值欄位 textField:'itemtex

使用Struts2和jQuery EasyUI實現簡單CRUD系統（五）——jsp,json,EasyUI的結合

元素 word cli resultset sheet 傳輸 charset {} tco 這部分比較復雜，之前看過自己的同學開發一個選課系統的時候用到了JSON，可是一直不知道有什麽用。寫東西也沒用到。所以沒去學他。然後如今以這樣的懷著好奇心，這是做什麽用的，這是怎麽用

jquery easyui的使用

tracking p s article -c font 結構效果 js報錯 3.0 第一步下載jquery easyui 下載地址：http://www.jeasyui.com/download/index.php 第二步創建Java web項目第三步導入相關的

jquery easyui grid 表格特殊字符處理

數據庫字段一個 cti enc formatter val 提示 ddr 特殊字符 grid 獲取的數據中，如果數據存在測試的字符，或者js語句，會導致頁面布局錯亂，如下方法，讓獲取到的數據全部當成文本進行顯示此操作主要防止以下亮點 1. 由於業務需要，查詢的數據中

jquery easyui選單樹顯示

相關推薦