Question

这里即将面临一个与ion-col相关的问题，我将我的动态数据绑定到离子行并在离子列中显示数据，这里表格很大而且它正在切断，下面不稳定的宽度是我的鳕鱼

<ion-grid class="contnr">
      <ion-row style="" class="grid-head">
        <ion-col width-40>
          Transaction
        </ion-col>
        <ion-col width-40>
          Count
        </ion-col>
        <ion-col width-40 >
         Overall  Gross Amount
        </ion-col>
        <ion-col width-40 >
          Overall Disc
        </ion-col>
        <ion-col  width-40>
          Overall Tax
        </ion-col >
        <ion-col  width-40>
         Overall ServiceTax
        </ion-col>
        <ion-col  width-40>
         Overall Charge
        </ion-col>
        <ion-col  width-40>
          Overall Net
        </ion-col>
      </ion-row>
      <ion-row *ngFor="let value of resultData" style="background:#eff0f1" class="cont-rows">

        <ion-col width-40>
          {{value.TransacType}}
        </ion-col>
        <ion-col width-40>
          {{value.Transactions}}
        </ion-col>
        <ion-col width-40>
          {{value.Count}}
        </ion-col>
        <ion-col width-40>
          {{value.OverallSales}}
        </ion-col>
        <ion-col width-40>
          {{value.Discount}}
        </ion-col>
        <ion-col width-40>
          {{value.OverallTax}}
        </ion-col>
        <ion-col width-40>
          {{value.MandatoryTax}}
        </ion-col>
        <ion-col width-40>
          {{value.ServiceCharge}}
        </ion-col>
        <ion-col width-40>
          {{value.NetAmt}}
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          Total
        </ion-col>

        <ion-col>
          {{grossTotal}}
        </ion-col>
        <ion-col>
          {{Nets}}
        </ion-col>

      </ion-row>
    </ion-grid>

这里的问题表格很长，以至于它正在切断，即使我使用scss设置但是col和col数据没有正确对齐

Answer 1

您可以使用Responsive attributes轻松完成。

stackblitz

要为所有设备和屏幕自定义列的宽度，请添加 col- *属性。这些属性指示列占用*列超出可用的列。

$objTextBox1 = New-Object System.Windows.Forms.TextBox 
$objTextBox1.Multiline = $True;
$objTextBox1.Location = New-Object System.Drawing.Size(150,10) 
$objTextBox1.Size = New-Object System.Drawing.Size(300,200)
$objTextBox1.Scrollbars = "Vertical" 
$objForm1.Controls.Add($objTextBox1)

根据screen breakpoints，您也可以<ion-grid> <ion-row> <ion-col col-4> 1 of 4 </ion-col> <ion-col col-2> 2 of 4 </ion-col> <ion-col col-2> 3 of 4 </ion-col> <ion-col col-4> 4 of 4 </ion-col> </ion-row> </ion-grid>列。

注意：此处show/hide hides断点上的所有列。

stackblitz

.scss

md

html的

@media (min-width: 768px) and (max-width:991px) {
  .hidden-md {
    display: none;
  }
}

Answer 2

首先，这是一个用户体验问题而不是开发问题。

其次，桌子应该是桌子，而不是网格!!您的HTML代码应该是语义的。

我之前在我正在处理的某个应用程序上遇到过这个问题，这里我做了什么（可能不是所有情况下的最佳解决方案），具体取决于您的需求，以及数据在其他数据旁边可视化的优先级（例如，将上个月的利润与当月比较。）

<强> SASS：

ion-grid
{
   overflow-x: scroll;
}

ion-row
{
    display: table;       
    white-space: nowrap;
}

确保这些样式仅应用于所需的页面，因此请使用css说明符，或用ID替换标记。

Answer 3

如果要修改网格列，可以通过Sass变量修改其填充。

$grid-columns是一个离子sass变量，主要用于生成每个列的宽度（以百分比表示）。

$grid-padding-width是用于网格填充的另一个变量，同时这也允许您设置特定于断点的宽度，这些宽度在填充左侧和填充右侧以及填充顶部和填充网格和列的底部。

通常，您可以根据设备设置不同的断点。如下：

$grid-breakpoints: (
  sm: 0,
  md: 768px,
  lg: 1024px
);

对于该断点，您可以按如下方式设置最大宽度：

$grid-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

在Ionic check this link

中实现有关响应式网格的更多信息

Answer 4

尝试Tablesaw

npm install tablesaw

Tablesaw（无依赖关系）

<link rel="stylesheet" href="tablesaw.css">
<script src="tablesaw.js"></script>
<script src="tablesaw-init.js"></script>

Tablesaw（jQuery插件）

<link rel="stylesheet" href="tablesaw.css">
<!-- load your own jQuery -->
<script src="jquery.js"></script>
<script src="tablesaw.jquery.js"></script>
<script src="tablesaw-init.js"></script>

不要忘记添加表格标记！对于堆栈表，这就是它的外观：

<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">

它也支持。

列切换模式

滑动模式

迷你地图

可排序

全部检查

以下github链接可以为您提供更详细的信息。

GitHub

Demo

如何使用ion-col设置响应的大型动态表数据

4 个答案: