Print Page - Change icons of tree widget

General Category => EasyUI for jQuery => Topic started by: snowsnow on November 24, 2014, 07:02:30 AM

Title: Change icons of tree widget
Post by: snowsnow 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! :)

Title: Re: Change icons of tree widget
Post by: stworthy 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

Title: Re: Change icons of tree widget
Post by: snowsnow 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?

Title: Re: Change icons of tree widget
Post by: Pierre 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.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: snowsnow on November 24, 2014, 07:02:30 AM