如何在流星中应用少显示和多显示反应性表格的单元格

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个字符，然后添加一些机制，以便用户可以点击或滚动查看整个'描述'文本。

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

1. 对于技术含量低滚动更新选项，将该文本截断，只显示前100个字符，添加一个省略号（...），以文字的结尾，然后使用title属性在span元素展示翻转全文。

首先，您需要定义一个'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. 对于稍微复杂选项，可以采取类似的方法，但添加的可点击链接，将显示更多或更少的细节。为了使它起作用，你必须定义一些Reactive Vars，定义一个事件处理程序，并相应地更改你的'Description'模板。这是一个应该起作用的粗略解决方案。

像这样改变你的模板。

<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 } 
    ..., 
]; 

请注意，第二个选项使用流星的反应性来解决问题。如果您需要关于第二种解决方案如何工作的额外解释，请告知我们。

这应该做到这一点！

开始=“2”>