javascript - Knockout how add custom column to table during foreach

Hello I need to build in dynamic table with columns(header) from array and rows from other array, first column in array must be static.

<table>
<thead>
<tr>
<th>Static</th>
<th>Dynamic 1</th>
<th>Dynamic 2</th>
<th>Dynamic 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Nam1</th>
<th>value</th>
<th>value</th>
<th>value</th>
</tr>
</tbody>
</table>

I have next Knockout HTML model allRoles this is array with dynamic headers

<table>
            <thead>
                <tr data-bind="template: { name: 'tableHeader', foreach: allRoles, as: 'role',afterRender: addFirstColumn } ">                                                  

                </tr>
            </thead>    
                <tbody data-bind="foreach: {data: userRoles,as:'dep'}">
                <tr>
                    <td>
                       <span data-bind="text: dep.name"></span>
                    </td>                   
                    <td data-bind="foreach: {data: dep.roles, as: 'role'}">
                       <span data-bind="text: role.id"></span>
                    </td>
                </tr>
                </tbody>
            </table>


<script type="text/html" id="tableHeader">
    <th data-bind="text: role.name">

    </th>
</script>

how I can add Static ?

Hello I need to build in dynamic table with columns(header) from array and rows from other array, first column in array must be static.

<table>
<thead>
<tr>
<th>Static</th>
<th>Dynamic 1</th>
<th>Dynamic 2</th>
<th>Dynamic 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Nam1</th>
<th>value</th>
<th>value</th>
<th>value</th>
</tr>
</tbody>
</table>

I have next Knockout HTML model allRoles this is array with dynamic headers

<table>
            <thead>
                <tr data-bind="template: { name: 'tableHeader', foreach: allRoles, as: 'role',afterRender: addFirstColumn } ">                                                  

                </tr>
            </thead>    
                <tbody data-bind="foreach: {data: userRoles,as:'dep'}">
                <tr>
                    <td>
                       <span data-bind="text: dep.name"></span>
                    </td>                   
                    <td data-bind="foreach: {data: dep.roles, as: 'role'}">
                       <span data-bind="text: role.id"></span>
                    </td>
                </tr>
                </tbody>
            </table>


<script type="text/html" id="tableHeader">
    <th data-bind="text: role.name">

    </th>
</script>

how I can add Static ?

Share Improve this question edited Apr 19, 2013 at 16:20 Judah Gabriel Himango 60.1k39 gold badges161 silver badges215 bronze badges asked Apr 19, 2013 at 16:16 Arbejdsglæde 14.1k26 gold badges82 silver badges150 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

You might be looking for the containerless control flow syntax of Knockout. It would look something like this:

<table>
    <thead>
        <tr>
            <th>Static</th>
            <!-- ko foreach: allRoles -->
                <th data-bind="text: name"></th>
            <!-- /ko -->
        </tr>
    </thead>
</table>

See Note 4 here: http://knockoutjs./documentation/foreach-binding.html

Change your binding to be:

<thead>
    <tr>                                                  
        <th>Static</th>
        <!-- ko  template: { name: 'tableHeader', foreach: allRoles, as: 'role',afterRender: addFirstColumn } -->
        <!-- /ko -->
    </tr>
</thead>

This uses something that knockout describes as a Virtual Element to render your foreach binding without the need for a parent node.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Knockout how add custom column to table during foreach - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)