$.fn.zTree 的使用

如圖所示顯示效果為樹狀結構：（jquery.ztree.core-3.5.js)

實現：

html：

<div>
　　<div class="foundation-gridTitle hc-title-area no-border-top-left-right">數據分類</div>
　　<ul id="treeDemo" class="ztree" hr-self-height="$(window).height()-106"></ul>
</div>

js:

function loadTreeData() {
            $http.get(baseURL + "/base/base-code-type/all-type").success(function (data, status) {
                $scope.baseCodeTypes = data;
                $.fn.zTree.init($("#treeDemo"), setting, $scope.baseCodeTypes);//生成樹所需要的數據 （這些數據的格式是有規定的 和 setting 中的data里的定義有關）
            }).error(function (data, status) {
            });
        }
var setting = {
            view: {
                dblClickExpand: dblClickExpand,
                showIcon: false,
                showLine: false
            },
            data: {
                key: {
                    name: "codeTypeDes"//上面data里的數據包含一個codeTypeDes屬性，也就是說從數據庫中對應的表必須有這個字段
                },
                simpleData: {
                    enable: true,
                    idKey: "codeTypeId",//對應樹形中的父子節點關系父節點的值00 則其子節點的值為00100 00101 （數據庫中對應的表也必須有這兩項）
                    pIdKey: "upCodeId"//對應子節點的值
                }
            },
            callback: {
                onClick: zOnClick
            }
        };
function dblClickExpand(treeId, treeNode) {//父節點雙擊展開 return treeNode.level >= 0;
        }
function zOnClick(event, treeId, treeNode) {//子節點單機用於顯示細節點中的內容
            $scope.baseCodes.splice(0);
            $scope.editSysFlag = false;
            if (treeNode.codeTypeClass == 1) {
                $scope.allowAdd = true;
            } else {
                $scope.allowAdd = false;
            }
            $scope.selectedBaseCodeType = treeNode;
            $scope.selectedBaseCode = undefined;
            if (!("children" in treeNode)) {
                $scope.baseCodes.splice(0);
                $http.get(baseURL + "/base/base-code-dict/code-data/" + $scope.selectedBaseCodeType.codeTypeId).success(function (data, status) {
                    $scope.baseCodes = data;
                    if ($scope.baseCodes.length == 0) {
                    } else {
                        $scope.selectedBaseCode = undefined;
                    }
                }).error(function (data, status) {
                });
            }
        }