lundi 23 avril 2018

checkbox in front of each treeView node

I am trying to create a treeView inside an html table and I want to put in front of each node a checkbox for each access column.

This my HTML code:

<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>

what i am trying to do is to create for each treeview node a check box by each column. check this screen shot : https://imageshack.com/a/img922/3112/GHQZiM.png Thanks in advance.




Aucun commentaire:

Enregistrer un commentaire