knockout - 冻结标题和列时的问题

Question

我正在使用跟随table的敲除绑定：

<table cellspacing="0" id="GridView1">
    <tr class="container-table" id="trHeaders">
        <!-- ko foreach: ColumnNames-->
        <!-- ko if: $data.FieldName == 'S.No.' -->
        <th class="td-border-left table-sr-no">
            <a style="cursor:pointer" data-bind="text: $data.DisplayName"></a>
            <input type="checkbox" />
        </th>
        <!-- /ko -->
        <!-- ko if: $data.FieldName != 'S.No.' -->
        <th>
            <a style="cursor:pointer" data-bind="text: $data.DisplayName, click: function(data, event, index){$root.headerClick(data, event, $data.DisplayName)}"></a>
            <div class="both"></div>
        </th>
        <!-- /ko -->
        <!-- /ko -->
        <th class="td-border-right">&nbsp;</th>
    </tr>
    <!-- ko foreach: SResumeListingData -->
    <tr class="sticky-td">
        <!-- ko foreach: $parent.ColumnNames -->
        <!-- ko if: $data.FieldName == 'S.No.' -->
        <td data-bind="attr:{ class: $root.SetPackageExpireCss($parent.expiryflag) }">
            <span data-bind="text: $parent[$data.DisplayName]"></span>
            <input type="checkbox" />
        </td>
        <!-- /ko -->
        <!-- ko if: $data.FieldName == 'ID' -->
        <td>
            <a data-bind="text: $parent[$data.DisplayName], attr: { href:  $root.SetViewResumeURL($parent.Pk_Id) }" target="_blank"></a>
        </td>
        <!-- /ko -->
        <!-- ko if: $data.FieldName == 'FullName' -->
        <td>
            <!-- ko if: $root.CheckIfSummaryColumnExists($parent) -->
            <div class="tooltip">
                <div class="user-name" data-bind="text: $parent[$data.DisplayName]"></div>
                <div class="name-bg">
                    <div class="name-title">Background </div>
                    <div class="user-bg">
                        <img src="../Content/images/name-user.png">
                        <div class="user-title"><!-- ko text: $parent[$data.DisplayName] --><!-- /ko --><span data-bind="text: $parent['PopupDesignation']"></span></div>
                    </div>
                    <p class="content" data-bind="text: $parent['PopupSummary']"></p>
                </div>
            </div>
            <!-- /ko -->
            <!-- ko ifnot: $root.CheckIfSummaryColumnExists($parent) -->
            <!-- ko text: $parent[$data.DisplayName] --><!-- /ko -->
            <!-- /ko -->
        </td>
        <!-- /ko -->
        <!-- ko if: $data.FieldName != 'S.No.' && $data.FieldName != 'ID' && $data.FieldName != 'FullName' && $data.FieldName != 'Domain' && $data.FieldName != 'SubDomain' && $data.FieldName != 'Function' && $data.FieldName != 'SubFunction' -->
        <!-- ko if: $data.CanRequestForInfo -->
        <td>
            <!-- ko if: $parent[$data.DisplayName] == 'RequestForInfo' -->
            <div class="tooltip">
                <a href="javascript:;" class="email-error" data-bind="click: function(data, event, resumeId, fieldName, displayName){ $root.getRequestInfo(data, event, $parent.Pk_Id, $data.FieldName, $data.DisplayName)}"></a>
                <span class="tooltip-span" data-bind="text: $root.SetRequestForTooltip($data.DisplayName)"></span>
            </div>
            <!-- /ko -->
            <!-- ko if: $parent[$data.DisplayName] == 'RequestInProcess' -->
            <div class="tooltip">
                <a href="javascript:;" class="email-process"></a>
                <span class="tooltip-span" data-bind="text: $root.SetRequestInProcessTooltip($data.DisplayName)"></span>
            </div>
            <!-- /ko -->
            <!-- ko if: $parent[$data.DisplayName] != 'RequestForInfo' && $parent[$data.DisplayName] != 'RequestInProcess' -->
            <span data-bind="text: $parent[$data.DisplayName]"></span>
            <!-- /ko -->
        </td>
        <!-- /ko -->
        <!-- ko ifnot: $data.CanRequestForInfo -->
        <td>
            <span data-bind="text: $parent[$data.DisplayName]"></span>
        </td>
        <!-- /ko -->
        <!-- /ko -->
        <!-- ko if: $data.FieldName == 'Domain' || $data.FieldName == 'SubDomain' || $data.FieldName == 'Function' || $data.FieldName == 'SubFunction' -->
        <td>
            <span class="domain-tag" data-bind="click: function(resumeId){ $root.getTaggingInfo($parent.Pk_Id)}"></span>
            <!-- ko text: $parent[$data.DisplayName] --><!-- /ko -->
        </td>
        <!-- /ko -->
        <!-- /ko -->
        <td class="td-border-right">
            &nbsp;
        </td>
    </tr>
    <!-- /ko -->
</table>

我使用this jQuery插件使用以下代码冻结列：

$('#GridView1').gridviewScroll({
                width: "99.99%",
                height: 300,
                railcolor: "#F0F0F0",
                barcolor: "#CDCDCD",
                barhovercolor: "#606060",
                bgcolor: "#F0F0F0",
                freezesize: 3,
                arrowsize: 0,
                varrowtopimg: "freez/arrowvt.png",
                varrowbottomimg: "freez/arrowvb.png",
                harrowleftimg: "freez/arrowhl.png",
                harrowrightimg: "freez/arrowhr.png",
                headerrowcount: 1,
                railsize: 20,
                barsize: 4
            });

可见的列和列的顺序由用户配置，我正在使用ColumnNames可观察数组。我面临的问题是在应用冻结代码后，表格被分成单独的div's，导致标题排序函数headerClick无法在冻结部分中工作。每当用户对列进行排序时，我必须从db获取已排序的数据并在表中再次绑定。由于table在页面加载时已经分为divs，因此只有网格的未冻结部分才会更新。那么我可以使用上面使用的knockout绑定的任何其他插件吗？无论如何在不使用任何header插件的情况下实施column和jQuery冻结？

我主要想实现标题和列冻结而不会干扰我上面写的淘汰绑定逻辑。