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

        ]
    };
}

我想显示描述条目显示更多并显示更少的功能。由于描述足够长。因此，在100个字符后，它会显示切换按钮。

Answer 1

如果我理解正确，您只是尝试在Reactive Table中显示“Description”列的前100个字符，然后添加一些机制，以便用户可以单击或翻转以查看整个“Description”文本

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

对于低技术翻转选项，截断文本仅显示前100个字符，在文本末尾添加省略号（...），然后使用{{1}中的title属性元素显示翻转的全文。

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

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

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

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

对于稍微复杂的选项，您可以采用类似的方法，但添加一个可显示或多或少细节的可点击链接。要使其工作，您必须定义一些Reactive Vars，定义事件处理程序，并相应地更改“描述”模板。这是一个应该有效的粗略解决方案。

更改模板。

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

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

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

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

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

请注意，第二个选项使用Meteor的Reactivity来解决问题。如果您需要有关第二种解决方案如何工作的其他说明，请与我们联系。

应该这样做！

如何应用显示更少，并在流星中的反应表的单元格上显示更多

1 个答案: