0 
document_table_Settings : function ()
{
    return{
        rowsPerPage: 5,
        showNavigation: 'auto',
        showColumnToggles: false,
        fields: [
            {key: 'para',label: 'Para',sortable: false},
            {key: 'desc', label: 'Description',sortable: false},
            {
                key: 'rowId', label: 'Delete',sortable: false, fn: function (rowId, object) {
                var html = "<button  name='Del' id=" + rowId + " class='btn btn-danger'>Delete</button>"
                return new Spacebars.SafeString(html);
            }
          },
          {
              key: 'rowId', label: 'Edit',sortable: false, fn: function (rowId, object) {
              var html = "<button  name='edit' id=" + rowId + " class='btn btn-warning'>Edit</button>"
              return new Spacebars.SafeString(html);
            }
          }

        ]
    };
}

我想显示显示更多和显示更少功能的描述条目。因为描述足够长。所以在 100 个字符之后它显示按钮来切换。

4

1 回答 1

0

如果我理解正确，您将尝试仅显示反应表中“描述”列的前 100 个字符，然后添加一些机制，以便用户可以单击或翻转以查看整个“描述”文本。

有几种方法可以实现这一点，我在下面提供了两个选项（为了简单起见）。

  1. 对于技术含量较低的翻转选项，截断文本以仅显示前 100 个字符，在文本末尾添加省略号 (...)，然后使用元素中的title属性在span翻转时显示全文。

首先，您需要定义一个“截断”模板助手（我会将其设为全局助手，以便您可以在应用程序的任何位置使用）。

Template.registerHelper('truncate', function(strValue, length) {
  var len = DEFAULT_TRUNCATE_LENGTH;
  var truncatedString = strValue;

  if (length && length instanceof Number) {
    len = length;
  }

  if (strValue.length > len) {
    truncatedString = strValue.substr(1, len) + "...";
  }

  return truncatedString;
});

然后为该列创建一个新模板。

<template name="field_description">
  <span title="{{data.description}}">{{truncate data.description}}</span>
</template>

最后，更改您的反应表配置以使用模板。

fields: [
  ...,
  { key: 'desc', label: 'Description', tmpl: Template.field_description }
  ...,
];
  1. 对于稍微复杂一点的选项，您可以采用类似的方法，但添加一个可点击的链接，以显示或多或少的细节。为了让它工作，你必须定义一些反应变量，定义一个事件处理程序，并相应地更改你的“描述”模板。这是一个应该可行的粗略解决方案。

像这样更改您的模板。

<template name="field_description">
  <span>{{truncatedDescription}} 
    {{#if showLink}} 
      <a href="#" class="js-more-less">{{linkState}}</a>
    {{/if}}
  </span>
</template>

然后将必要的逻辑添加到您的 field_description 模板（包括事件处理程序）。

import { Template } from 'meteor/templating';

import './field-description.html';

Template.field_descirption.onCreated(function() {
  const MAX_LENGTH = 100;
  this.description = new ReactiveVar(Template.currentData().description);
  this.showMore = new ReactiveVar(true);

  if (this.description.get().length > MAX_LENGTH) {
    this.description.set(Template.currentData().description.substr(1, MAX_LENGTH));
  }

  this.showLink = () => {
    return Template.currentData().description.length > MAX_LENGTH;
  };

  this.toggleTruncate = () => {
    if (this.showMore.get()) {
      this.description.set(Template.currentData().description);
      this.showMore.set(false);
    } else {
      this.description.set(Template.currentData().description.substr(1, MAX_LENGTH));
      this.showMore.set(true);
    }
  };
});

Template.field_descirption.helpers({
  truncatedDescription: function() {
    return Template.instance().description.get();
  },

  showLink: function() {
    return Template.instance().showLink();
  },

  linkState: function() {
    if (Template.instance().showMore.get()) {
      return 'show more';
    } else {
      return 'show less';
    }
  };
});

Template.field_descirption.events({
  'click .js-more-less'(event, instance) {
    instance.toggleTruncate();
  },
});

最后，确保您的反应表配置仍设置为使用该字段的模板。

fields: [
  ...,
  { key: 'desc', label: 'Description', tmpl: Template.field_description }
  ...,
];

请注意，第二个选项利用 Meteor 的反应性来解决问题。如果您需要关于第二个解决方案如何工作的额外说明，请告诉我。

应该这样做！

于 2017-02-22T16:11:35.317 回答