Question

我在使用ngHandsontable的角度应用程序上使用handsontable。我可以看到我需要在表设置中将搜索设置为true，这应该使查询方法可用有人能解释我是如何通过角度控制器访问该方法的吗？

    <input class="" id="handsonSearch" placeholder="Search..." ng-model="searchQuery" />
    <hot-table settings="tableSettings.settings"
           datarows="mappingData"
           col-headers="true"
           height="700">
        <hot-column data="Column1" title="'Column One'"></hot-column>

    </hot-table>

角

function GlobalMappingController($scope) {
    $scope.tableSettings = {
        settings: {
            contextMenu: true,
            colHeaders: true,
            dropdownMenu: true,
            afterChange: afterChange,
            beforeChange: beforeChange,
            search: true,
            query: $scope.searchQuery
        }
    };

Answer 1

问题是访问由 ng 创建的root handsOnTable实例HandsOnTable并不像您想象的那么直观，但为了访问handsOnTable本身具有的所有功能，您必须执行某些操作像这样。

首先，声明我们将用作表格实例的变量

$scope.handsOnTable;

您可以通过在设置数组

中设置afterInit参数来访问handsOnTable的根目录

$scope.tableSettings = {
        settings: {
            contextMenu: true,
            colHeaders: true,
            dropdownMenu: true,
            afterChange: afterChange,
            beforeChange: beforeChange,
            search: true,
            query: $scope.searchQuery,

            //insert this
            afterInit: function() {
                $scope.handsOnTable = this;
            }
        }
    };

然后，您可以在输入上设置ng-change，如下所示：

function search() {
    $scope.handsOnTable.search.query($scope.searchQuery);
    $scope.handsOnTable.render();
}

您还需要以与afterInit相同的方式，使用相同的语句设置afterchange。如果您有自己的自定义版本的功能，那么只需在其他所有功能运行后将其放入。

请记住，您必须将输入框绑定到searchQuery并添加onChange="search()"，但这应该有效 - 至少它对我有效。

使用ngHandsontable

1 个答案: