标签: smart-table

我正在使用AngularJS和Bootstrap 3创建一个App.我想显示一个包含数千行的表/网格.AngularJS和Bootstrap的最佳可用控件是什么,具有排序,搜索,分页等功能.

我正在使用棱角分距v1.3.15.我通过点击api并将其通过范围传递到智能表来获取数据

以下是控制台上显示的'scope.rowCollection'的数据格式

数据填充正常,但是当我尝试单击表标题并使用st-sort方法对其进行排序时,表值显然为空,而不是对列进行排序.这是我的html片段的视图

你能告诉我我做错了什么吗？我使用自己的数据收集集(非硬编码)的那一刻,整个表格值变得混乱.我感觉它与我在角度端使用的变量名称有关.非常感谢任何帮助....谢谢

有没有办法用智能表搜索日期字段？我需要在给定日期之后过滤日期.

我是java脚本的新手,所以如果这看起来很基本,我必须道歉.

如何使用Angularjs在Smart-Table中编辑行表？新智能表似乎没有教程.我想创建一个简单的表单,供用户输入特定地点的营业时间.

我创建了可以在表上添加和删除行的按钮,但是当我添加contenteditable ="true"时,更新对象时没有任何更改持久存在.我知道contenteditable是一个独立于smart-table的特定html5参数,但我不明白我如何更新数据或如何检索更新的数据.

通过mean.js路径从angularjs控制器检索数据.

<div class="controls">
    <table st-table="place.openHours" class="table table-striped">
        <thead>
        <tr>
            <th>Day</th>
            <th>Opening Time</th>
            <th>Closing Time</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in place.openHours" contenteditable="true" >
            <td>{{row.day}}</td>
            <td>{{row.open}}</td>
            <td>{{row.close}}</td>
            <button type="button" ng-click="removeOpenHour(row)" class="btn btn-sm btn-danger">
                <i class="glyphicon glyphicon-remove-circle">
                </i>
            </button>
        </tr>
        </tbody>
    </table>

    <button type="button" ng-click="addOpenHour(row)" class="btn btn-sm btn-success">
        <i class="glyphicon glyphicon-plus">
        </i> Add new Row
    </button>
</div>

在javascript里面:

    $scope.removeOpenHour = function removeOpenHour(row) {
        var index = $scope.place.openHours.indexOf(row);
        if (index !== -1) {
            $scope.rowCollection.splice(index, 1);
        }
    }

    $scope.addOpenHour = …

我在Angular JS中使用SmartTable实现了网格.根据Smart Table文档,为了选择网格项,我们需要添加st-select-row="row".我也加了这个.但我无法选择网格.

可以在plunk中看到已实现的应用程序(下面的URL).任何人都可以帮我使用网格行作为可选择.另外,我想调用一个函数时,点击上排.

Plunkr在这里

我有一个智能表,我正在AngularJS工作.该表使用自定义管道来搜索和排序其数据.我还要求表具有工作分页,以及下拉框,以便您可以选择要显示的行数(想想数据表).

对于搜索和排序,自定义管道会毫无问题地触发我的ajax请求.但是,当我单击任何页码或更改要显示的行数时,管道不会被触发.

页码似乎设置为调用setPage(页面)(这由st-pagination指令设置)但没有任何反应 - 并且不会抛出任何错误.

如何更改显示的行数或在分页控件中单击页面#时,如何触发自定义管道？

这是我的HTML:

<table class="table table-striped table-bordered" st-table="leadsCollection" st-safe-src="leads" st-pipe="serverFilter">
...
<tbody>
   <tr data-toggle="modal" data-target="#modal-source" ng-repeat="source in leadsCollection" ng-click="rowClick($index);">
      <td>{{source.leaddate}}</td>
      <td>{{(source.distance > 100) ? 'Long Distance' : 'Local'}}</td>
      <td>{{source.origin_city}}, {{source.origin_state}}</td>
      <td>{{source.destination_city}}, {{source.destination_state}}</td>
      <td>{{source.est_move_date}}</td>
      <td>{{source.distance}} mi</td>
      <td>{{source.number_bedrooms}} br</td>
      <td></td>
   </tr>
</tbody>
<tfoot>
  <tr>
     <td colspan="8">
        <div class="form-group col-md-1">
            <label>Show:</label> <select class="form-control" ng-model="itemsByPage"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select>
        </div>
        <div class="pull-right" st-pagination="" st-items-by-page="itemsByPage"></div>
     </td>
  </tr>
</tfoot>
</table>

这是控制器:

.controller('Leads', function ($scope, $http) {
$scope.leads = [];
$scope.leadsCollection = [].concat($scope.leads); …

如何在智能表中按日期对数据进行排序？有了st-sort,它就不那么好了.

<table st-table="displayedCollection" st-safe-src="playerCollection" class="table table-hover">
      <thead>
        <tr>
            <th st-sort="id" class="hover">Id</th>
            <th st-sort="firstname" class="hover">Jméno</th>
            <th st-sort="lastname" class="hover">P?íjmení</th>
            <th st-sort="registrationDate" class="hover">Datum registrace</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="player in displayedCollection">
            <td class="hover">{{player.id}}</td>
            <td class="hover">{{player.firstname}}</td>
            <td class="hover">{{player.lastname}}</td>
            <td class="hover">{{player.registrationDate}}</td>
        </tr>
      </tbody>
  </table>

谢谢你的回答.

我正在编写我的第一个非教程angular.js网络应用程序.我正在使用两个智能表和清单模型.下面是一个使用第一个st-safe-src的all_types是看起来像这样JSON对象的数组...

[
  {
    "_id": "56417a9603aba26400fcdb6a",
    "type": "Beer",
    "__v": 0
  },
  {
    "_id": "56456140cb5c3e8f004f4c49",
    "type": "Skiing",
    "__v": 0
  },
  ...

这是我用来显示这些数据的表的html:

  <table st-table="displayedCollection" st-safe-src="all_types" class="table table-striped">
      <thead>
          <tr>
              <th st-sort="type">Types</th>
          </tr>
      </thead>
      <tbody>
          <tr ng-repeat="x in displayedCollection">
              <td><input type="checkbox" checklist-model="vendor.types" checklist-value="x.type">{{x.type}}</td>
          </tr>
          <tr><td>id ({{curid}}) {{vendor.types}}</td></tr>
      </tbody>
      <tfoot>
          <tr>
              <td colspan="5" class="text-center">
                  <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
              </td>
          </tr>
      </tfoot>
  </table>

当我将数据加载到其中时,此表看起来像这样.选中复选框以匹配我的模型中的数据.

但是当我尝试在第二个智能表中做同样的事情时,更完整的json对象看起来像这样......

[
  {
    "_id": "569f047dd90a7874025b344e",
    "product_title": "Plugs",
    "product_img_001": "p001.jpg",
    "product_img_002": "p002.jpg",
    "product_vid_001": "bp.mov",
    "__v": 0,
    "product_sizes": [ …

我试图使用ng2-smart-table这个问题我不知道如何将加号按钮(addButtonContent)与一些创建函数数据绑定.现在这只是为我打开anther raw来插入数据.还有怎么做编辑按钮.我的代码是:

  settings = {
    add: {
      addButtonContent: '<i class="ion-ios-plus-outline"></i>', //how to call some function to this one
      createButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent: '<i class="ion-close"></i>',
    },
    edit: {
      editButtonContent: '<i class="ion-edit"></i>',
      saveButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent: '<i class="ion-close"></i>',
    },
    delete: {
      deleteButtonContent: '<i class="ion-trash-a"></i>',
      confirmDelete: true
    },

和我的模板:

   <ba-card title="Basic Example" baCardClass="with-scroll">
  <div class="form-group">
    <input  #search type="search" class="form-control form-control-lg" placeholder="Search..."  (keyup)="onSearch(search.value)">
  </div>
  <ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)"></ng2-smart-table>
</ba-card>

我正在使用非常好的表库Smart-table来显示我的数据.

我正在使用自定义分页模板.但是,我希望能够从代码中设置第1页.我已经阅读了它暴露的st-pipe指令,但是如果我实现它,我似乎需要自己重写整个过滤/分页/排序代码.

我正在以一种简单的方式以编程方式从st-pagination我表中存在的指令外部设置页面tfoot

<table st-table="displayedCollection" st-safe-src="tags" class="table table-hover">
    <tbody>
        <tr st-select-row="tag" st-select-mode="single" ng-repeat="tag in displayedCollection" ng-click="click(tag)">
            <td>
                <span editable-text="tag.name" e-placeholder="enter a display name..." e-name="name" e-form="editableForm" e-required>
                {{tag.name}}</span>
            </td>
            <td>
                <span editable-text="tag.path" e-placeholder="enter actual value to be used..." e-name="path" e-form="editableForm" e-required>
                {{tag.path}}</span>
            </td>
            <td>
                <form editable-form shown="newItem == tag" onshow="onShow()" name="editableForm" oncancel="oncancel(newItem)" onaftersave="saveForm(tag)">
                    <!-- EDIT -->
                    <button type="button" class="btn btn-sm btn-default" ng-click="editableForm.$show()" tooltip="Edit" tooltip-placement="left" ng-hide="editableForm.$visible">
                        <i class="fa fa-pencil-square-o fa-lg"></i>
                    </button>
                </form>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr> …