自定义FooTable

时间:2016-06-24 13:07:19

标签: javascript css footable

我想更改FooTable的显示。

目前我的FooTable看起来像这样 enter image description here

从此代码生成:

pcl::PolygonMesh triangles; 
pcl::PolygonMesh::Ptr meshOutput(new pcl::PolygonMesh()); 
pcl::PolygonMesh::Ptr inp_ptr; 
inp_ptr = triangles;                                           /////???? 
pcl::MeshQuadricDecimationVTK meshDecim; 
meshDecim.setInputMesh(inp_ptr);                     ///// from triangles 
meshDecim.setTargetReductionFactor(0.5); 
meshDecim.process(*meshOutput);

我希望改变风格,使图片首先出现,然后是日期和描述。像这样:

enter image description here

这可能吗?

我注意到FooTable Javascript将结构更改为

<table class="table">
    <thead>
        <tr>
            <th>First Name</th>
            <th data-breakpoints="all" data-type="html" >Picture</th>
            <th data-breakpoints="all">Date</th>
            <th data-breakpoints="all">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td>Dennise</td>
            <td><img src="dummy.png"></td>
            <td>November 8th 2011</td>
            <td>Why does it always rain on me?</td>
        </tr>
        <tr>
            <td>Elodia</td>
            <td><img src="dummy.png"></td>
            <td>October 15th 2010</td>
            <td>Goldfish looks awesome.</td>
        </tr>

    </tbody>
</table>

在这里我只需要将第一行改为

<tbody>
  <tr>
    <th>Picture</th>
    <td style="display: table-cell;">
        <img src="dummy.png"></img>
    </td>
  </tr>
  <tr>
     <th>Date</th>
     <td style="display: table-cell;">
         November 8th 2011
     </td>
   </tr>
   <tr>
      <th>Description</th>
      <td style="display: table-cell;">
          Why does it always rain on me?
      </td>
    </tr>

但我不知道如何实现这一目标。我发现here可以挂钩事件,我想我不知何故需要更改事件footable_row_expanded,但我不知道怎么做。

0 个答案:

没有答案