有没有一种方法来添加列数据表中没有重新描绘整个表 [英] Is there a way to add columns datatable without rerendering the entire table

问题描述

我同时使用JSF 2.0和jQuery / javascript中，在需要的地方。

我想要添加和删除一个数据表列以动态的方式。 问题是 - 据我知道我必须重新渲染整个表添加或删除列，这就需要取一个表中的所有数据，而事实上，在大多数情况下它时并不需要。

例如（打字的问题说明的目的，语法错误可能存在，但认为他们不这样做）：

 ＆LT; H：dataTable中的id =表＆GT;
 ＆LT; H：列ID =CUL1呈现=＃{mrBean.isCul1_rendered}＆GT;
  ...
 ＆LT; / H：列＆GT;

 ＆LT; H：列ID =cul2呈现=＃{mrBean.isCul2_rendered}＆GT;
  ...
 ＆LT; / H：列＆GT;
＆LT; / H：dataTable的＆GT;

＆LT; F：AJAX渲染=表/＆GT;
  ＆LT; H：的commandButton行动=＃{mrBean.switchIsCul1}＆GT;开关CUL1＆LT; / H：的commandButton＆GT;
  ＆LT; H：的commandButton行动=＃{mrBean.switchIsCul2}＆GT;开关Cul2＆LT; / H：的commandButton＆GT;
＆LT; / F：AJAX＆GT;
 

如图所示，渲染和未呈现列时，整个表被重新呈现。有没有一种方法，只呈现不断变化的列？ （据我所知，渲染=CUL1 ，将无法正常工作）

谢谢！

解决方案

不幸的是没有，这是不可能的。表列不能由一个单一的HTML元素psented重新$ P $。它实际上是松散的℃的集合; TD＆GT; 元素。从技术上讲，你需要引用的每一个＆LT; TD＆GT; 单独为了能与JSF AJAX的渲染。正如你不能给每个＆LT; TD＆GT; 与JSF客户端ID，就止于此。你可以给他们每人一个共同的类名，但JSF AJAX 渲染 attribtue不能与类名的工作。

您最好的选择是显示/纯CSS / JS隐藏起来。设置显示：无; 在＆LT; TD＆GT; 一列的元素，然后用JS将其切换到显示：块; ，并设置显示：无; 在＆LT; TD＆GT; 其他列的元素。您可以为＆LT; TD＆GT; 秒的个人专栏中使用 columnClasses 属性的特定类名。

开球例如：

＆LT; H：dataTable中的id =表绑定=＃{表}columnClasses =COL1，COL2 ＆GT;   ＆LT; H：列＆GT; ...＆LT; / H：列＆GT;   ＆LT; H：列＆GT; ...＆LT; / H：列＆GT; ＆LT; / H：dataTable的＆GT; ＆LT; F：AJAX＆GT;   ＆LT; H：的commandButton ...的onclick =switchToCol1（'＃{table.clientId}'）/＆GT;   ＆LT; H：的commandButton ...的onclick =switchToCol2（'＃{table.clientId}'）/＆GT; ＆LT; / F：AJAX＆GT;

（实际上，如果没有豆动作需要调用，那么一个普通的＆LT;按钮＆GT; 也足够了）的

这个CSS

.col1 {     显示：无; }

和这个JS / jQuery的：

函数switchToCol1（TABLEID）{     变量$表= $（[ID ='+ TABLEID +']）;     $（'。COL1'，$表）.show（）;     $（'COL2'，$表）.hide（）; } 功能switchToCol2（TABLEID）{     变量$表= $（[ID ='+ TABLEID +']）;     $（'。COL1'，$表）.hide（）;     $（'COL2'，$表）.show（）; }

I'm using both JSF 2.0 and jQuery/javaScript, where needed.

I'm trying to add and remove column from a datatable in a dynamic manner. Problem is - As far as I know I have to re-render the entire table to add or remove columns and that entails a fetch for all the data in the table when in fact, in most cases it isn't neccessary.

For example (typing this for the purpose of problem illustration, syntax errors might exist but assume they don't):

<h:dataTable id="table">
 <h:column id="cul1" rendered="#{mrBean.isCul1_rendered} >
  ...
 </h:column>

 <h:column id="cul2" rendered="#{mrBean.isCul2_rendered} >
  ...
 </h:column>
</h:dataTable>

<f:ajax render="table" />
  <h:commandButton action="#{mrBean.switchIsCul1}" >Switch Cul1</h:commandButton>
  <h:commandButton action="#{mrBean.switchIsCul2}" >Switch Cul2</h:commandButton>
</f:ajax>

As illustrated, when rendering and un-rendering a column, the whole table gets re-rendered. Is there a way to only render the changing column? (As far As i know, render="cul1, won't work)

Thanks!

解决方案

Unfortunately no, that's not possible. A table column can't be represented by a single HTML element. It's actually a collection of loose <td> elements. Technically, you'd need to reference every single <td> individually in order to be able to ajax-render it with JSF. As you can't give each <td> a client ID with JSF, it stops here. You can give them each a common class name, but the JSF ajax render attribtue doesn't work with class names.

Your best bet is to show/hide them with pure CSS/JS. Set a display: none; on the <td> elements of one column and then use JS to toggle it to display: block; and set display: none; on the <td> elements of the other column. You can give the <td>s of an individual column a specific classname using columnClasses attribute.

Kickoff example:

<h:dataTable id="table" binding="#{table}" columnClasses="col1,col2">
  <h:column>...</h:column>
  <h:column>...</h:column>
</h:dataTable>
<f:ajax>
  <h:commandButton ... onclick="switchToCol1('#{table.clientId}')" />
  <h:commandButton ... onclick="switchToCol2('#{table.clientId}')" />
</f:ajax>

(actually, if no bean action needs to be invoked, then a plain <button> is also sufficient)

with this CSS

.col1 {
    display: none;
}

and this JS/jQuery:

function switchToCol1(tableId) {
    var $table = $("[id='" + tableId + "']");
    $('.col1', $table).show();
    $('.col2', $table).hide();
}

function switchToCol2(tableId) {
    var $table = $("[id='" + tableId + "']");
    $('.col1', $table).hide();
    $('.col2', $table).show();
}

这篇关于有没有一种方法来添加列数据表中没有重新描绘整个表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！