如何在meteor中反应表的单元格上应用显示较少和显示较多

Question

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);
            }
          }

        ]
    };
}

我想要显示描述条目有显示更多和显示更少的功能.As的描述是足够长的。所以在100个字符之后，它会显示切换按钮。

Answer 1

如果我没理解错的话，你正试图在反应表中只显示'Description‘栏的前100个字符，然后添加一些机制，这样用户就可以点击或翻转来查看整个'Description’文本。

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

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

首先，你需要定义一个'truncate‘模板帮助器(我会让它成为一个全局的帮助器，这样你就可以在你的应用中的任何地方使用它了)。

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>

最后，将Reactive Table配置更改为使用模板。

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();
  },
});

最后，确保您的Reactive Table配置仍然设置为使用该字段的模板。

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

请注意，第二个选项利用Meteor的Reactivity来解决问题。如果你需要关于第二个解决方案如何工作的额外解释，请告诉我。

这应该就行了！