easyui修改Tree樹的預設圖示
阿新 • • 發佈：2018-11-08
easyui是一種基於jQuery的使用者介面外掛集合。官網http://www.jeasyui.net/。
預設樹形控制元件樣式如下：
並不是所有的圖示樣式都是這樣，所有就要自定義一些自己的圖示。
本文主要利用css修改了預設的圖示。也可以採用其他方式（去掉class,採用自定義的class樣式）
下面是修改後的樣式：
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="./themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="./themes/icon.css"> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.easyui.min.js"></script> <style> /*重點程式碼*/ /*預設*/ .tree-icon{ background:url('./img/m1.png') no-repeat center center !important; } /*摺疊時圖片*/ .tree-folder{ background:url('./img/check.png') no-repeat center center !important; } /*展開時圖片*/ .tree-folder-open { background:url('./img/add2.png') no-repeat center center !important; } </style> </head> <body> <h2>Tree Actions</h2> <p>Click the buttons below to perform actions.</p> <div style="margin:20px 0;"> <a href="#" class="easyui-linkbutton" onclick="collapseAll()">CollapseAll</a> <a href="#" class="easyui-linkbutton" onclick="expandAll()">ExpandAll</a> <a href="#" class="easyui-linkbutton" onclick="expandTo()">ExpandTo</a> <a href="#" class="easyui-linkbutton" onclick="getSelected()">GetSelected</a> </div> <div class="easyui-panel" style="padding:5px"> <ul id="tt" class="easyui-tree" data-options="method:'get',animate:true, onLoadSuccess: changeIco "> <li> <span>My Documents</span> <ul> <li> <span>Program Files</span> <ul> <li> <span>JAVA</span> </li> <li> <span>C++</span> </li> </ul> </li> </ul> </li> <li data-options="state:'closed'"> <span>Microsoft Office</span> <ul> <li> <span>Word</span> </li> </ul> </li> <li> <span>Other</span> </li> </ul> </div> <script type="text/javascript"> function changeIco() { // 找到 #treeBox 樹形 id， 再移除圖示 // $('#tt').find("span.tree-icon").removeClass('tree-icon tree-folder tree-folder-open'); // $('#tt').find("span.tree-hit").removeClass('tree-expanded'); // var icons3 = $('#tt').find("span.tree-file").removeClass('tree-file'); } function collapseAll(){ $('#tt').tree('collapseAll'); } function expandAll(){ $('#tt').tree('expandAll'); } function expandTo(){ var node = $('#tt').tree('find',113); $('#tt').tree('expandTo', node.target).tree('select', node.target); } function getSelected(){ var node = $('#tt').tree('getSelected'); if (node){ var s = node.text; if (node.attributes){ s += ","+node.attributes.p1+","+node.attributes.p2; } alert(s); } } </script> </body> </html>