Question

我正在尝试在HTML表格中创建treeView，并希望为每个访问列将放在每个节点的前面 复选框

这是我的HTML代码：

<table>
<thead>
    <tr>
        <th>
            Object
        </th>
        <th>
            access 1
        </th>
        <th>
            access 2
        </th>
        <th>
            access 3
        </th>
        <th>
            access 4
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <th rowspan="4">
            <div id="m_tree_1" class="tree-demo">
                <ul>
                    <li id="module1">
                        module 1
                        <ul>
                            <li data-jstree='{ "icon" : "fa fa-crosshairs m--font-focus " }'>
                                <span class="m--font-bold">
                                    Entity
                                </span>
                            </li>
                            <li data-jstree='{ "icon" : "fa fa-crosshairs m--font-focus " }'>
                                <span class="m--font-bold">
                                    Entity
                                </span>
                            </li>
                            <li data-jstree='{ "icon" : "fa fa-crosshairs m--font-focus " }'>
                                <span class="m--font-bold">
                                    Entity
                                </span>
                            </li>
                            <li data-jstree='{ "icon" : "fa fa-crosshairs m--font-focus " }'>
                                <span class="m--font-bold">
                                    Entitée
                                </span>
                            </li>

                        </ul>
                    </li>
                    <li id="module2">
                        module 2
                        <ul>
                            <li data-jstree='{ "icon" : "fa fa-crosshairs m--font-focus " }'>
                                <span class="m--font-bold">
                                    Entity
                                </span>
                            </li>
                            <li data-jstree='{ "icon" : "fa fa-crosshairs m--font-focus " }'>
                                <span class="m--font-bold">
                                    Entity
                                </span>
                            </li>
                            <li data-jstree='{ "icon" : "fa fa-crosshairs m--font-focus " }'>
                                <span class="m--font-bold">
                                    Entity
                                </span>
                            </li>
                            <li data-jstree='{ "icon" : "fa fa-crosshairs m--font-focus " }'>
                                <span class="m--font-bold">
                                    Entitée
                                </span>
                            </li>

                        </ul>
                    </li>
                    <li id="module3">
                        module 3
                        <ul>
                            <li data-jstree='{ "icon" : "fa fa-crosshairs m--font-focus " }'>
                                <span class="m--font-bold">
                                    Entity
                                </span>
                            </li>
                            <li data-jstree='{ "icon" : "fa fa-crosshairs m--font-focus " }'>
                                <span class="m--font-bold">
                                    Entity
                                </span>
                            </li>
                            <li data-jstree='{ "icon" : "fa fa-crosshairs m--font-focus " }'>
                                <span class="m--font-bold">
                                    Entity
                                </span>
                            </li>
                            <li data-jstree='{ "icon" : "fa fa-crosshairs m--font-focus " }'>
                                <span class="m--font-bold">
                                    Entitée
                                </span>
                            </li>

                        </ul>
                    </li>
                </ul>
            </div>
        </th>
        <input for="administrationModule" type="checkbox">
    </tr>





</tbody>

我正在尝试为每个树视图节点创建一个每列的复选框，如下图所示：

Answer 1

我创建了一个JSFiddle供您查看。您的问题中有多个用例。但没有太多的细节。如果您希望在点击时发生某些事件，那么您应该展示更多关于您所做的事情的示例。您的示例表明您只编写了一个HTML表，您需要一个后端来处理事件，您尝试过哪些库（jQuery，Angular等）。 JSFiddle将为您提供布局和单击事件。我希望它有助于它开始。

以下是HTML必须要完成其余的事情：

  search_results = [] 
  dlog('search details: '+str(details)) 

  lib_album_match = False 
  if details['artist'] and details['title'] and search_personal_library:
      lib_results = [item for item in library if s_in_s(details['artist'],item.get('artist')) and s_in_s(details['title'],item.get('title'))] 
      dlog('lib search results: '+str(len(lib_results))) 
      for result in lib_results: 
          if s_in_s(result['album'],details['album']): 
              lib_album_match = True 
          item = {} 
          item[u'track'] = result 
          item[u'score'] = 200 
          search_results.append(item)

每个treeView节点前面的复选框

1 个答案: