Question

在表格中，我有多个带水平滚动条的动态列。我需要实现搜索功能，用户搜索列名或列数据。如果列名和数据存在，那么我的滚动条应滚动到特定列。

我试图实现这一点，但无法弄清楚，我无法使用任何第三方库或工具来实现这一小功能。

作为参考，我已经看到谷歌浏览器浏览器具有这样的功能，如果我通过浏览器搜索搜索它直接指向特定列。我想要这样的东西，但不是浏览器搜索或任何第三方工具。

＆＃13;

var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
    $scope.personalDetails = [
        {
            'fname':'Abc',
            'lname':'Abc',
            'email':'Abc@Abc.com',
            'demo': 'xyz.com',
            'Pnumber': '9892XXXXXX',
            'Address': 'XYZ'
        }
        ];
}]);

＆＃13;

.btn-primary{
    margin-right: 10px;
}
.container,.search{
  margin: 20px 0;
}

form{
    width: 200px;
    overflow-y: hidden;
    overflow-x: scroll;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myapp" ng-controller="ListController">     
    <div class="container">
        <div class="row">
            <div class="col-md-8">
               <div class='search'>
                 <input type="search" placeholder="search column" required/>
               </div>
                        <form>
                            <table class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
                                        <th>Firstname</th>
                                        <th>Lastname</th>
                                        <th>Email</th>
                                        <th>demo</th>
                                        <th>Phone number</th>
                                        <th>Address</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="personalDetail in personalDetails">
                                        <td>
                                            <input type="checkbox" ng-model="personalDetail.selected"/></td>
                                        <td>
                                            <input type="text" class="form-control" ng-model="personalDetail.fname" required/></td>
                                        <td>
                                            <input type="text" class="form-control" ng-model="personalDetail.lname" required/></td>
                                        <td>
                                            <input type="email" class="form-control" ng-model="personalDetail.email" required/></td>
                                             <td>
                                            <input type="text" class="form-control" ng-model="personalDetail.demo" required/></td>
                                             <td>
                                            <input type="text" class="form-control" ng-model="personalDetail.Pnumber" required/></td>
                                             <td>
                                            <input type="text" class="form-control" ng-model="personalDetail.Address" required/></td>
                                    </tr>
                                </tbody>
                            </table>

                        </form>
                    </div>
                </div>
            </div>
</body>

＆＃13;

Answer 1

你可以通过使用几个jQuery函数来实现，其中包括angular。这是一个JSFiddle

1）定义一个容器元素，进行滚动

2）找到你的目标元素，然后滚动到它。

控制器中的

$scope.textChanged = function () 
 {
    var $container = $('#myform'),
    $scrollTo = $('th').filter(function() {
    return $(this).text() === $scope.filter;});

    if($scrollTo.length > 0)
    {
        $container.scrollLeft(
        $scrollTo.offset().left - $container.offset().left + $container.scrollLeft());
    }
    else
    {
       $container.scrollLeft(-$container.scrollLeft());
    }

 }

注意：如果您希望匹配为部分，请使用

$scrollTo =  $('th:contains(' + $scope.filter + ')');

然后，在你的html中：

<input type="search" ng-change='textChanged()' ng-model='filter' placeholder="search column" required/>

并在表单中添加id以正确找到它

<form id='myform'>

最后将$scope.filter变量添加到您的控制器

app.controller("ListController", ['$scope', function($scope) {
    $scope.filter = '';

根据angularjs

1 个答案: