<!DOCTYPE html> 
 | 
<html lang="zh" xmlns:th="http://www.thymeleaf.org" > 
 | 
<head> 
 | 
    <th:block th:include="include :: header('栏目分类树选择')" /> 
 | 
    <th:block th:include="include :: ztree-css" /> 
 | 
</head> 
 | 
<style> 
 | 
    body{height:auto;font-family: "Microsoft YaHei";} 
 | 
    button{font-family: "SimSun","Helvetica Neue",Helvetica,Arial;} 
 | 
</style> 
 | 
<body class="hold-transition box box-main"> 
 | 
    <input id="treeId"   name="treeId"    type="hidden" th:value="${category?.categoryId}"/> 
 | 
    <input id="treeName" name="treeName"  type="hidden" th:value="${category?.categoryName}"/> 
 | 
    <div class="wrapper"><div class="treeShowHideButton" onclick="$.tree.toggleSearch();"> 
 | 
        <label id="btnShow" title="显示搜索" style="display:none;">︾</label> 
 | 
        <label id="btnHide" title="隐藏搜索">︽</label> 
 | 
    </div> 
 | 
    <div class="treeSearchInput" id="search"> 
 | 
        <label for="keyword">关键字:</label><input type="text" class="empty" id="keyword" maxlength="50"> 
 | 
        <button class="btn" id="btn" onclick="$.tree.searchNode()"> 搜索 </button> 
 | 
    </div> 
 | 
    <div class="treeExpandCollapse"> 
 | 
        <a href="#" onclick="$.tree.expand()">展开</a> / 
 | 
        <a href="#" onclick="$.tree.collapse()">折叠</a> 
 | 
    </div> 
 | 
    <div id="tree" class="ztree treeselect"></div> 
 | 
    </div> 
 | 
    <th:block th:include="include :: footer" /> 
 | 
    <th:block th:include="include :: ztree-js" /> 
 | 
    <script th:inline="javascript"> 
 | 
        $(function() { 
 | 
            var url = ctx + "cms/category/treeData"; 
 | 
            var options = { 
 | 
                url: url, 
 | 
                expandLevel: 2, 
 | 
                onClick : zOnClick 
 | 
            }; 
 | 
            $.tree.init(options); 
 | 
        }); 
 | 
  
 | 
        function zOnClick(event, treeId, treeNode) { 
 | 
            var treeId = treeNode.id; 
 | 
            var treeName = treeNode.name; 
 | 
            $("#treeId").val(treeId); 
 | 
            $("#treeName").val(treeName); 
 | 
        } 
 | 
    </script> 
 | 
</body> 
 | 
</html> 
 |