Question

我需要显示每列的所有数据，而不使用省略号。实际上，我的数据会与相邻的行崩溃。如何显示连续的所有数据？实际上列文本会很大（不知道它来自服务器的文本的长度）但是我需要显示整个文本。请告诉我如何显示所有列文本这是我的代码

<div id="scrollingTable" ng-if="isservicedataloadedProperly">
            <ion-scroll overflow-scroll="true"  ng-style="viewHeight">
               <div class="row brd rowclass" collection-repeat="column in tasklist_records track by $index" ng-class="{white:$index%2 == 0,grey:$index%2 == 1,firstrow:$first}" collection-item-height="40">

                  <div class="col brbrdleft_right dleft_right col-10 text-center"></div>
               </div>
               <div ng-if="!haveNorecordFound" class="norecordfoundcss"> No record found.</div>
            </ion-scroll>
         </div>

更新：

已经使用高度的css

/* Styles go here */

.rowclass {

  height:50%;
}

什么都没有用..

Answer 1

我的同事根据以前的问题/答案给我的印象是移动设备不是您的主要目标。我得出了这个结论，因为我反复指出Ionic针对提供给移动设备的应用程序进行了优化，因此，UI元素专为触摸而设计，因此不建议更改标题，按钮和其他触摸目标的大小。我进一步指出，表格数据的大网格不利于在移动设备上显示，并且产生非常差的可用性。

我从来没有得到过关于为什么你继续使用你的设计方法的解释，尽管有这些要点，所以，我只能假设移动设备不是你的目标。如果这是正确的（你没有设计移动或响应式应用程序），那么这里有一些选择：

使用表格。我之前已向Pallavi推荐了这个。鉴于您的数据本质上是表格式的，因此表格很有意义。此外，还有像UI Grid这样的解决方案可以为处理复杂数据集提供一些开箱即用的支持，并为列排序和搜索，分页，分组和汇总行提供了许多内置功能。它是一只可以使用的熊，但根据您的要求，它值得了解（同样，假设您没有为移动设备构建）。
请勿使用collection-repeat并选择ng-repeat。 collection-repeat指令旨在向 mobile 设备提供大型数据集。目的是在具有较小屏幕分辨率的低功率设备上提供更好的性能。因此，collection-repeat ONLY仅呈现当前视图中的集合项。为了有效地执行此操作，指令需要具有一致的行高，以便它可以计算可见项的数量。我尝试并测试了几种方法来解决这个问题，但最后简单的答案是性能最高的：使用ng-repeat代替。使用one-time bindings和过滤器可以极大地提高ng-repeat的性能，这些过滤器可以弥补collection-repeat提供的性能提升。

特别是如果我对移动部件有误，那么您应该考虑第三个选项是完全更改UI向量。这不关我的事，但我确实有25年的设计和构建企业软件产品的经验，所以如果我没有指出你当前的UI设计不再是我的话，那将是我的疏忽而不是MS Excel的非功能版本。用户的利益在哪里？如何在分页网格中查看大约5000条记录，以帮助它们在作业环境中对该数据进行操作？就个人而言，我会重温我的角色（或实际的用户利益相关者），并提出这两个问题。您可能会发现最好的方法是废弃所有内容并将其替换为其他UI（例如搜索界面或列表界面）。事实上，我确实模拟了两种替代方法，但经过测试，我认为在桌面应用程序的上下文中，努力和附加绑定没有意义。所以，再一次，在我理解你的要求的背景下，我推荐上面两个选项。

为什么相邻行的文字崩溃？

1 个答案: