层级复选框树（Hierarchical CheckBox）展开按钮缺失求助

参考层级复选框树插件搭建了Flask应用，项目结构如下：

|-- static
|   |-- hierarchical-checkboxes.css
|   `-- hierarchical-checkboxes.js
|-- templates
|   |-- ssr.html
`-- ui_server.py

现有代码 #

ssr.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
   <head>
      <title>SSR</title>
      <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='hierarchical-checkboxes.css') }}">

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
      </script>

      <script src="{{url_for('static', filename='hierarchical-checkboxes.js')}}">
      </script>
   </head>
   <body>
      <div class="hierarchy-checkboxes" rel="example">
         <input class="hierarchy-root-checkbox" type="checkbox" checked="checked">
         <label class="hierarchy-root-label">Root</label>
         <div class="hierarchy-root-child hierarchy-node">
            <div class="hierarchy-node">
               <input class="hierarchy-checkbox" type="checkbox">
               <label class="hierarchy-label">Node</label>
               <div class="hierarchy-node leaf">
                  <input class="hierarchy-checkbox" type="checkbox">
                  <label class="hierarchy-label">Node (Leaf)</label>
               </div>
               <div class="hierarchy-node leaf">
                  <input class="hierarchy-checkbox" type="checkbox">
                  <label class="hierarchy-label">Node (Leaf)</label>
               </div>
               <div class="hierarchy-node">
                  <input class="hierarchy-checkbox" type="checkbox">
                  <label class="hierarchy-label">Node</label>
                  <div class="hierarchy-node leaf">
                     <input class="hierarchy-checkbox" type="checkbox">
                     <label class="hierarchy-label">Node (Leaf)</label>
                  </div>
                  <div class="hierarchy-node leaf">
                     <input class="hierarchy-checkbox" type="checkbox">
                     <label class="hierarchy-label">Node (Leaf)</label>
                  </div>
                  <div class="hierarchy-node leaf">
                     <input class="hierarchy-checkbox" type="checkbox">
                     <label class="hierarchy-label">Node (Leaf)</label>
                  </div>
               </div>
               <div class="hierarchy-node leaf">
                  <input class="hierarchy-checkbox" type="checkbox">
                  <label class="hierarchy-label">Node (Leaf)</label>
               </div>
            </div>
            <div class="hierarchy-node leaf">
               <input class="hierarchy-checkbox" type="checkbox">
               <label class="hierarchy-label">Node (Leaf)</label>
            </div>
            <div class="hierarchy-node leaf">
               <input class="hierarchy-checkbox" type="checkbox">
               <label class="hierarchy-label">Node (Leaf)</label>
            </div>
            <div class="hierarchy-node leaf">
               <input class="hierarchy-checkbox" type="checkbox">
               <label class="hierarchy-label">Node (Leaf)</label>
            </div>
         </div>
      </div>
   </body>
</html>

ui_server.py

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/ssr", methods=['GET'])
def ssr():
    return render_template('ssr.html')

if __name__ == "__main__":
    app.run(host='127.0.0.1', debug=True, port=5000)

问题描述 #

页面可正常显示树形视图，但展开/折叠的「+/-」按钮缺失，效果如图：

解决方法 #

问题核心是未调用插件的初始化函数，插件需要通过JS初始化才能生成展开/折叠按钮。

修改ssr.html，在</body>标签前添加初始化脚本：

<script>
$(document).ready(function() {
    $('.hierarchy-checkboxes').hierarchicalCheckboxes();
});
</script>

修改后的完整ssr.html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
   <head>
      <title>SSR</title>
      <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='hierarchical-checkboxes.css') }}">

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
      </script>

      <script src="{{url_for('static', filename='hierarchical-checkboxes.js')}}">
      </script>
   </head>
   <body>
      <div class="hierarchy-checkboxes" rel="example">
         <input class="hierarchy-root-checkbox" type="checkbox" checked="checked">
         <label class="hierarchy-root-label">Root</label>
         <div class="hierarchy-root-child hierarchy-node">
            <div class="hierarchy-node">
               <input class="hierarchy-checkbox" type="checkbox">
               <label class="hierarchy-label">Node</label>
               <div class="hierarchy-node leaf">
                  <input class="hierarchy-checkbox" type="checkbox">
                  <label class="hierarchy-label">Node (Leaf)</label>
               </div>
               <div class="hierarchy-node leaf">
                  <input class="hierarchy-checkbox" type="checkbox">
                  <label class="hierarchy-label">Node (Leaf)</label>
               </div>
               <div class="hierarchy-node">
                  <input class="hierarchy-checkbox" type="checkbox">
                  <label class="hierarchy-label">Node</label>
                  <div class="hierarchy-node leaf">
                     <input class="hierarchy-checkbox" type="checkbox">
                     <label class="hierarchy-label">Node (Leaf)</label>
                  </div>
                  <div class="hierarchy-node leaf">
                     <input class="hierarchy-checkbox" type="checkbox">
                     <label class="hierarchy-label">Node (Leaf)</label>
                  </div>
                  <div class="hierarchy-node leaf">
                     <input class="hierarchy-checkbox" type="checkbox">
                     <label class="hierarchy-label">Node (Leaf)</label>
                  </div>
               </div>
               <div class="hierarchy-node leaf">
                  <input class="hierarchy-checkbox" type="checkbox">
                  <label class="hierarchy-label">Node (Leaf)</label>
               </div>
            </div>
            <div class="hierarchy-node leaf">
               <input class="hierarchy-checkbox" type="checkbox">
               <label class="hierarchy-label">Node (Leaf)</label>
            </div>
            <div class="hierarchy-node leaf">
               <input class="hierarchy-checkbox" type="checkbox">
               <label class="hierarchy-label">Node (Leaf)</label>
            </div>
            <div class="hierarchy-node leaf">
               <input class="hierarchy-checkbox" type="checkbox">
               <label class="hierarchy-label">Node (Leaf)</label>
            </div>
         </div>
      </div>
      <script>
      $(document).ready(function() {
          $('.hierarchy-checkboxes').hierarchicalCheckboxes();
      });
      </script>
   </body>
</html>

额外检查 #

1. 确认static目录下的hierarchical-checkboxes.css文件完整，包含展开/折叠按钮的样式定义；
2. 确保jQuery和插件JS文件加载正常（可通过浏览器开发者工具的Network标签检查）。

内容的提问来源于stack exchange，提问作者Akshay J