在 angularjs 中编辑 syncfusion Grid 中的列样式

Question

我试图通过向网格中显示但完全无法做到的数据添加更多边距或填充来使 syncfusion 网格呼吸一点。我已经尝试了很多东西，比如 cssClass，然后在 e-column 中添加了一个 div，但对我来说没有任何效果。

我真的被困在这一天了。你能帮我解决这个问题吗？

代码如下：


<div style="color:black;" ej-grid e-datasource="FarmersModal" e-gridlines="vertical" 
e-allowfiltering="true" e-allowpaging="true" e-allowsorting="true" e-enableColumnResizing="true" 
e-allowselection="true" e-filtersettings-filterType="excel">

      <div e-columns>
         <e-column e-type="string" e-field="FarmerId" e-headertext="vis" e-width="10" margin="30px"></e-column>
         <div e-column e-type="string" e-field="FarmerId" e-headertext="Farmer Id" e-width="10" ></div>
         <div e-column e-type="string" e-field="FarmerName" e-headertext="Farmer Name" e-width="20"></div>
         <div e-column e-type="string" e-field="RegistrationId" e-headertext="Registration ID" e-width="20"></div>
         <div e-column e-type="string" e-field="RegistrationDate" e-headertext="Registration Date" e-width="30"></div>



      </div>
</div>

我尝试了不同的方法来让它发挥作用，所以我使用了不同的标签并试图知道我该如何做这些事情。我只想给 table 单元格添加边距，这样 table 数据就不会显得拥挤。

在此先感谢并让我知道我在哪里做错了。

Answer 1

因此，根据您的要求，我们准备了一个示例，并通过使用外部 CSS 实现了您的要求。请参考下面的代码示例和示例以获取更多信息。

<style>
    .e-grid .e-gridcontent .e-rowcell {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }
</style>

在 angularjs 中编辑 syncfusion Grid 中的列样式

Edit column style in syncfusion Grid in angularjs

html

css

syncfusion