Question

我有一个通过淘汰JS foreach循环填充的html表。这种方法的主要原因是网格的功能和绑定到我的MVC模型的回发。我一直在尝试使用不同的插件进行分页，但是所有这些都需要一个我无法提供的数据源。我想使用knockout生成我的表，但然后添加分页到该表。任何想法或建议？下面是我的表格的简化版本。

<table id="AgencyTable" class="table">
        <thead>
            <tr>
                <th>Address1</th>
                <th>Address2</th>
                <th>City</th>
                <th>State</th>
                <th>Zip</th>
                <th>Active</th>
            </tr>
        </thead>
        <tbody id="AgencyGrid" data-bind="foreach:{data: Agencies, as: 'agency'}">
            <tr data-bind="attr: { index: $index }" class="marginTopSmall">

                <td class="marginTopSmall">
                    <input data-bind="value: agency.Address1, attr: { name: 'Agencies[' + $index() + '].Address1'}" />
                </td>
                <td class="marginTopSmall">
                    <input data-bind="value: agency.Address2, attr: { name: 'Agencies[' + $index() + '].Address2'}" />
                </td>
                <td class="marginTopSmall">
                    <input data-bind="value: agency.City, attr: { name: 'Agencies[' + $index() + '].City'}" />
                </td>
                <td class="marginTopSmall">
                    <input id="StateInput" data-bind="value: agency.State, attr: { name: 'Agencies[' + $index() + '].State'}" />
                </td>
                <td class="marginTopSmall">
                    <input id="ZipInput" data-bind="value: agency.Zip, attr: { name: 'Agencies[' + $index() + '].Zip'}" />
                </td>
                <td class="marginTopSmall">
                    <input type="checkbox" class="active" data-bind="checked: agency.Active" />
                    <input type="hidden" data-bind="value: agency.Active, attr: { name: 'Agencies[' + $index() + '].Active'}">
                </td>
                <td class="marginTopSmall">
                    <input type="button" data-bind="click: $parent.removeAgency, visible: agency.IsNew" value="Remove" />
                </td>
            </tr>
        </tbody>
    </table>

Answer 1

有一个很棒的example of this in the Knockout documentation。在该示例中，使用了simpleGrid custom binding，可以通过同一文档页here找到。

结果标记很简单：

<div class='liveExample'> 
    <div data-bind='simpleGrid: gridViewModel'> </div>

    <button data-bind='click: addItem'>
        Add item
    </button>

    <button data-bind='click: sortByName'>
        Sort by name
    </button>

    <button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
        Jump to first page
    </button>
</div>

添加简单的Paging到HTML表？

1 个答案: