使用智能表在按钮的单击事件上搜索数据

尼古尼·索尼

我对智能表很陌生。我已经阅读了有关Smart Table的文档但是我还没有找到如何在智能表中的单击事件上绑定数据?代码很大,但是我想在这里发布。

<div class="table-scroll-x" st-table="backlinksData" st-safe-src="backlinks" st-set-filter="myStrictFilter">
  <div class="crawlhealthshowcontent">
    <div class="crawlhealthshowcontent-right">
      <input type="text" class="crserachinput" placeholder="My URL" st-search="{{TargetUrl}}" />
      <a class="bluebtn">Search</a>
    </div>
    <div class="clearfix"></div>
  </div>
  <br />
  <div class="table-header clearfix">
    <div class="row">
      <div class="col-sm-6_5">
        <div st-sort="SourceUrl" st-skip-natural="true">
          Page URL
        </div>
      </div>
      <div class="col-sm-2">
        <div st-sort="SourceAnchor" st-skip-natural="true">
          Anchor Text
        </div>
      </div>
      <div class="col-sm-1">
        <div st-sort="ExternalLinksCount" st-skip-natural="true">
          External<br />Links
        </div>
      </div>
      <div class="col-sm-1">
        <div st-sort="InternalLinksCount" st-skip-natural="true">
          Internal<br />Links
        </div>
      </div>
      <div class="col-sm-1">
        <div st-sort="IsFollow" st-skip-natural="true">
          Type
        </div>
      </div>

    </div>
  </div>
  <div class="table-body clearfix">
    <div class="row" ng-repeat="backlink in backlinksData" ng-if="backlinks.length > 0">
      <div class="col-sm-6_5">
        <div class="pos-rel">
          <span class="display-inline wrapWord" tool-tip="{{ backlink.SourceUrl }}"><b>Backlink source:</b> <a target="_blank" href="{{backlink.SourceUrl}}">{{ backlink.SourceUrl }}</a></span><br />
          <span class="display-inline wrapWord" tool-tip="{{ backlink.SourceTitle }}"><b>Link description:</b> {{ backlink.SourceTitle }}</span> <br />
          <span class="display-inline wrapWord" tool-tip="{{ backlink.TargetUrl }}"><b>My URL:</b> <a target="_blank" href="{{backlink.TargetUrl}}">{{ backlink.TargetUrl }}</a></span><br />
        </div>
      </div>
      <div class="col-sm-2">
        <div class="pos-rel">
          {{ backlink.SourceAnchor }}
        </div>
      </div>
      <div class="col-sm-1">
        <div>
          {{ backlink.ExternalLinksCount }}
        </div>
      </div>
      <div class="col-sm-1">
        <div>
          {{ backlink.InternalLinksCount }}
        </div>
      </div>
      <div class="col-sm-1">
        <div ng-if="!backlink.IsFollow">
          No Follow
        </div>
      </div>
    </div>
    <div class="row" ng-if="backlinks.length == 0">
      No backlinks exists for selected location.
    </div>
  </div>
  <div class="pos-rel" st-pagination="" st-displayed-pages="10" st-template="Home/PaginationCustom"></div>
</div>

我的js代码在这里。

module.controller('backlinksController', [
  '$scope','$filter', 'mcatSharedDataService', 'globalVariables', 'backlinksService',
  function ($scope,$filter, mcatSharedDataService, globalVariables, backlinksService) {

    $scope.dataExistsValues = globalVariables.dataExistsValues;

    var initialize = function () {
      $scope.backlinks = undefined;
      $scope.sortOrderAsc = true;
      $scope.sortColumnIndex = 0;

    };

    initialize();

    $scope.itemsByPage = 5;

    var updateTableStartPage = function () {
      // clear table before loading
      $scope.backlinks = [];
      // end clear table before loading

      updateTableData();
    };

    var updateTableData = function () {

      var property = mcatSharedDataService.PropertyDetails();
      if (property == undefined || property.Primary == null || property.Primary == undefined || property.Primary.PropertyId <= 0) {
        return;
      }
      var params = {
        PropertyId: property.Primary.PropertyId
      };

      var backLinksDataPromise = backlinksService.getBackLinksData($scope, params);

      $scope.Loading = backLinksDataPromise;
    };

    mcatSharedDataService.subscribeCustomerLocationsChanged($scope, updateTableStartPage);
  }
]);
module.filter('myStrictFilter', function ($filter) {
  return function (input, predicate) {
    return $filter('filter')(input, predicate, true);
  }
});

但是,在文本框上直接搜索可以很好地工作。但是根据要求,我必须在单击按钮时执行它。您的建议和帮助将不胜感激。提前致谢。

斯瓦罗格

您可以通过一些简单的调整来搜索特定的行。

  1. 在上添加一个过滤器ng-repeat,然后按要在按钮点击时插入的模型进行过滤,如下所示:<tr ng-repeat="row in rowCollection | filter: searchQuery">
  2. 在您的视图中,将该模型(使用ng-model添加到输入标签中,然后在您的控制器中进行定义
  3. 然后在您单击搜索按钮时将值传递给过滤器

这是一个展示这一点的小品

您可以使用filter:searchQuery:true严格搜索

编辑:

好的,所以OP的最大问题是分页时过滤后的值无法正确显示,过滤器查询是从输入框中进行的,而不是使用事实上的st-search插件,因此我提到了github中已经存在的问题类似),我已经抽出了这个小插件,并对其进行了稍微的修改,以适应有疑问的用例。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在按钮单击事件上绑定dxSelectBox

来自分类Dev

在按钮单击事件上绑定dxSelectBox

来自分类Dev

如何使用React Hooks在按钮单击上获取数据

来自分类Dev

如何在按钮单击事件中向数据表添加行?

来自分类Dev

如何使用 Angular 在按钮(单击)上的列表中执行搜索?

来自分类Dev

如何使用C#在按钮单击事件上的textBox中设置光标位置?

来自分类Dev

在按钮单击事件上初始化AMCharts

来自分类Dev

访问在按钮外部单击事件上创建的标签

来自分类Dev

如何在按钮单击事件中将两个源数据加载到数据表中

来自分类Dev

如何使用jquery在按钮单击上过滤表中的数据

来自分类Dev

如何在按钮单击事件中将JavaFX Table数据转换为Apache POI Excel工作表?

来自分类Dev

如何在按钮上单击ios更改UICollectionView的数据?

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

数据在按钮onClick事件上更新两次

来自分类Dev

使用 C# WPF 在按钮单击事件上使用文本框值更新 SQL 条目

来自分类Dev

使用Jquery在按钮单击上显示模态

来自分类Dev

使用Jquery在按钮单击上隐藏/显示Div

来自分类Dev

如何在按钮上单击使用TypeScript

来自分类Dev

如何使用JavaScript在按钮单击上显示内容

来自分类Dev

使用引导程序将输入集中在按钮单击上

来自分类Dev

在按钮上添加数字单击使用jQuery吗?

来自分类Dev

在按钮上单击使用devexpress xtragrid导出到csv

来自分类Dev

使用javascript在按钮单击上添加文本框

来自分类Dev

使用jquery ajax在按钮单击上的POST表单

来自分类Dev

如何使用AngularJS在按钮单击上显示(隐藏的)<td>?

来自分类Dev

使用AngularJS在按钮单击上重复代码

来自分类Dev

通过数据表 jquery 插件添加按钮上的 jQuery 单击事件

来自分类Dev

将焦点重新放在按钮单击事件C#winforms上以前集中的控件上

Related 相关文章

  1. 1

    在按钮单击事件上绑定dxSelectBox

  2. 2

    在按钮单击事件上绑定dxSelectBox

  3. 3

    如何使用React Hooks在按钮单击上获取数据

  4. 4

    如何在按钮单击事件中向数据表添加行?

  5. 5

    如何使用 Angular 在按钮(单击)上的列表中执行搜索?

  6. 6

    如何使用C#在按钮单击事件上的textBox中设置光标位置?

  7. 7

    在按钮单击事件上初始化AMCharts

  8. 8

    访问在按钮外部单击事件上创建的标签

  9. 9

    如何在按钮单击事件中将两个源数据加载到数据表中

  10. 10

    如何使用jquery在按钮单击上过滤表中的数据

  11. 11

    如何在按钮单击事件中将JavaFX Table数据转换为Apache POI Excel工作表?

  12. 12

    如何在按钮上单击ios更改UICollectionView的数据?

  13. 13

    UIAlertController在按钮上单击

  14. 14

    UIAlertController在按钮上单击

  15. 15

    数据在按钮onClick事件上更新两次

  16. 16

    使用 C# WPF 在按钮单击事件上使用文本框值更新 SQL 条目

  17. 17

    使用Jquery在按钮单击上显示模态

  18. 18

    使用Jquery在按钮单击上隐藏/显示Div

  19. 19

    如何在按钮上单击使用TypeScript

  20. 20

    如何使用JavaScript在按钮单击上显示内容

  21. 21

    使用引导程序将输入集中在按钮单击上

  22. 22

    在按钮上添加数字单击使用jQuery吗?

  23. 23

    在按钮上单击使用devexpress xtragrid导出到csv

  24. 24

    使用javascript在按钮单击上添加文本框

  25. 25

    使用jquery ajax在按钮单击上的POST表单

  26. 26

    如何使用AngularJS在按钮单击上显示(隐藏的)<td>?

  27. 27

    使用AngularJS在按钮单击上重复代码

  28. 28

    通过数据表 jquery 插件添加按钮上的 jQuery 单击事件

  29. 29

    将焦点重新放在按钮单击事件C#winforms上以前集中的控件上

热门标签

归档