JSTree 更换图标的方法非常简单记录一下当初学的时候被难住了

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="../ClientGlobalContext.js.aspx"></script>

    <script src="jquery.jqGrid.4.3.2/js/jquery.1.7.2.min.js" type="text/javascript"></script>

    <script src="jquery.jqGrid.4.3.2/js/jquery.ui.1.7.3.custom.min.js" type="text/javascript"></script>

    <script src="scripts/json2.js" type="text/javascript"></script>

    <script src="scripts/SDK.JQuery.js" type="text/javascript"></script>

    <script type="text/javascript" src="jstree/lib/jquery.cookie.js"></script>

    <script type="text/javascript" src="jstree/lib/jquery.hotkeys.js"></script>

    <script type="text/javascript" src="jstree/jquery.jstree.js"></script>

    <script src="CRM2011Main.js" type="text/javascript"></script>

    <link href="jstree/themes/default/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div id="div_AgentFrame" style="width: 100%; text-align: center; display: none">

        <div style="height: 20px; width: 40px; float: right;">

            <a id="a_collapse_expand" href="#" onclick="divhide(this.title)" title="隐藏呼叫中心">

                <img id="img_collapse" width="1" height="1" class="ms-crm-ImageStrip-arrow_ribboncollapse ms-crm-MastHead-Button"

                    alt="隐藏功能区,以便仅显示选项卡名称。" src="/_imgs/imagestrips/transparent_spacer.gif" />

                <img style="display: none" id="img_expand" width="1" height="1" class="ms-crm-ImageStrip-arrow_ribbonexpand ms-crm-MastHead-Button"

                    alt="显示功能区。" src="/_imgs/imagestrips/transparent_spacer.gif" /></a>

        </div>

        <iframe id="AgentFrame" frameborder="0" scrolling="no" width="1000" height="100pz">

        </iframe>

    </div>

    <div id="dialog" title="呼叫中心" style="width: 800px; display: none;">

        <table id="ContactList">

        </table>

        <div id="ContactEmpty" style="display: none">

            没有联系人数据</div>

        <table id="AccountList">

        </table>

        <div id="AccountEmpty" style="display: none">

            没有客户数据</div>

    </div>

    <div id="divTransOut" title="转接" style="display: none;">

        <table>

            <tr>

                <td>

                    输入号码:

                </td>

                <td>

                    <input id="txtTransOutNum" type="text" />

                </td>

            </tr>

        </table>

    </div>

    <div id="divTransIvr" title="转IVR" style="display: none;">

        <table>

            <tr>

                <td>

                    转移模式:

                </td>

                <td>

                    <select id="TransType" style="width: 100px">

                        <option value="0">释放转</option>

                        <option value="1">挂起转</option>

                    </select>

                </td>

            </tr>

            <tr>

                <td>

                    IVR接入码:

                </td>

                <td>

                    <select id="AccessCode" style="width: 100px">

                        <option value="1">报修</option>

                        <option value="2">技术咨询</option>

                    </select>

                </td>

            </tr>

        </table>

    </div>

    <div id="divTeamDialog" title="">

    </div>

    <div id="demo1" class="demo">

    </div>

    <script type="text/javascript">

        $(function () {

            $("#demo1").jstree({

                "json_data": {

                    "data": [

                {

                    "data": { title: "电缆", icon: "img/person.jpg" },

                    "metadata": { id: 23 },

                    "attr": { "icon": { "image": "sdfs.jpg"} },

                    "children": [{

                        "attr": { "id": "li.node.id1" },

                        "data": {

                            "title": "Long format demo",

                            "attr": { "href": "#" }

                        },

                        "metadata": { id: 78 }



                    }, "A Child 2"]

                },

                {

                    "attr": { "id": "li.node.id1" },

                    "data": {

                        "title": "Long format demo",

                        "attr": { "href": "#" }

                    },

                    "metadata": { id: 78 }



                },

                "Node3"

            ]

                },

                "plugins": ["themes", "json_data", "ui"],

                "themes": {

                    "theme": "default",

                    "dots": true,

                    "icons": true

                }



            }).bind("select_node.jstree", function (e, data) { alert(jQuery.data(data.rslt.obj[0]).id) });

        });

    </script>

    <a onclick="TransOutDialogOpen()">CCCCC</a>

    <div id="TeamTree">

    </div>

</body>

</html>

 

你可能感兴趣的:(jstree)