ztree 自定義節點樣式圖標

我的小圖標全部在放在同一個.png中，這樣請求只需要請求一次就好（圖片精靈）

引入jquery的JS與css

<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js">

html代碼：

 <div>
        <ul id="ztreeid" class="ztree"></ul>
 </div>

js代碼

 $(document).ready(function(){
            $.fn.zTree.init($("#ztreeid"), setting, nodes);
        });
var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        var nodes =[
              //使用iconSkin定義icon1爲自定義節點 樣式
              //pid表示它的父節點的id爲多少，也可以在父節點中使用children屬性對象來包含子節點
            { id:2, pId:0, name:"展開、摺疊 自定義圖標相同", open:true, iconSkin:"icon1"},
            { id:21, pId:2, name:"葉子節點1"},
            { id:22, pId:2, name:"葉子節點2"},
            { id:23, pId:2, name:"葉子節點3", iconSkin:"ly"},                                           
            { id:3, pId:0, name:"不使用自定義圖標", open:true },
            { id:31, pId:3, name:"葉子節點1"},
            { id:32, pId:3, name:"葉子節點2"},
            { id:33, pId:3, name:"葉子節點3"}

        ];


       

css樣式：ly的iconSkin一樣的設定

//因爲我的圖標全部放在一張圖片中，所以需要background-position進行定位
//根節點打開的樣式圖標 open
.ztree li span.button.icon1_ico_open{margin-right:2px; background:url(../css/img/diy/8.png) no-repeat;background-position:-458px -145px} 
//根節點關閉的樣式圖標 close
.ztree li span.button.icon1_ico_close{margin-right:2px; background: url(../css/img/diy/8.png) no-repeat;background-position:-300px -145px}
//子節點開的樣式圖標 docu
.ztree li span.button.icon1_ico_docu{margin-right:2px; background:url(../css/img/diy/8.png) no-repeat;background-position:-214px -100px}

如果你不清楚小圖標如何定位，可以通過使用畫圖工具打開需要截圖的圖片，自己看需要定位的圖標的左上角的座標顯示在畫圖工具的左下角的xy中，定位值一定要加 -  符號