EasyUI Forum
September 14, 2025, 02:00:39 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Change icons of tree widget  (Read 12150 times)
snowsnow
Newbie
*
Posts: 6


View Profile
« on: November 24, 2014, 07:02:30 AM »

How do I change the icons tree widget displays in front of its nodes? I am aware that I could modify the CSS, but I am looking for 'best practises'.
Thanks!  Smiley


Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: November 24, 2014, 07:08:02 AM »

This sample illustrates how to add icons to tree node.
http://www.jeasyui.com/demo/main/index.php?plugin=Tree&theme=default&dir=ltr&pitem=Tree%20Node%20Icons
Logged
snowsnow
Newbie
*
Posts: 6


View Profile
« Reply #2 on: November 24, 2014, 11:24:12 AM »

Thank you for the link.
So the icon type is configured in the JSON passed to the widget?
Logged
Pierre
Sr. Member
****
Posts: 439


View Profile Email
« Reply #3 on: November 26, 2014, 06:37:06 AM »

Hello
here is example of JSON which is used to fill tree:

Code:
[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]

from help:
Many events callback function can take the 'node' parameter, which contains following properties:

id: An identity value bind to the node.
text: Text to be showed.
iconCls: The css class to display icon.
checked: Whether the node is checked.
state: The node state, 'open' or 'closed'.
attributes: Custom attributes bind to the node.
target: Target DOM object.
« Last Edit: November 26, 2014, 06:38:46 AM by Pierre » Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!