如何从jQuery更新ZK网格值

Question

我有三个Tabs，在每个选项卡中，我有一个Grid。

每个Grid的数据来自一个数据库，所以我使用rowRenderer填充网格。以下代码对于所有三个网格都是通用的：

<grid id="myGrid1" width="950px" sizedByContent="true" rowRenderer="com.example.renderer.MyRowRenderer">

行是由Doublebox对象构造的。成功地填充了数据。

问题：

我需要处理客户端的多个单元格编辑。编辑是通过鼠标单击一个特定的单元格并输入一个值来完成的。

例如，假设用户编辑第一行上的第一个单元格，并且该值应该传播到同一行和所有三个网格中的所有其他单元格(也就是用户当前看不到的两个网格，因为它们在tabpanes中)。我正在使用jQuery来进行这个值的传播，它可以正常工作。

我将按以下方式传递jQuery：

doublebox.setWidgetListener(Events.ON_CHANGING, jQuerySelectors);
doublebox.setWidgetListener(Events.ON_CHANGE, jQuerySelectors);

这使得更改1单元格中的值成为可能，并且在由jQuery选择器过滤的所有其他单元格中立即(直观)看到了这种变化。

问题是该值是可视化地分布到所有单元格中的，但是当我试图将Grid数据保存回数据库时，背景值是旧的。我假设ZK-Grid组件不知道jQuery更改了所有的单元格值。不过，如果我手动单击一个已经具有新值的单元格(输入/离开/更改焦点)，当我保存网格时，该特定单元格中的新值是正确的。也许这是个提示我该怎么解决这个问题。

提取Grid值的代码：

Grid tGrid = (Grid) event.getTarget().getFellow("myGrid1");
ListModel model = tGrid.getModel();
MyCustomRow tRow = (MyCustomRow)model.getElementAt(i); 

我的Grid的模型是List of MyCustomRow

myGrid1.setModel(new ListModelList(List<MyCustomRow> populatedList));

我有几个假设，但无论我尝试了什么，都没有奏效。我想，jQuery事件和ZK-Events是不同的，并且可能在不同的上下文中是孤立的。(虽然我试图从jQuery引发事件，等等)

你有什么意见建议？总的来说，我的方法是正确的，还是有其他方法可以做到？谢谢你提前给我时间！

Answer 1

你的问题正是你所期望的。

Zk有自己的事件系统，不关心你的jq，

因为它是jq和zk，不要观察DOM。

解决问题的方法。

1. 使用"ZK-Way"： 只需在服务器端听一听就可以了。 我不确定是否选择了Tabs 是可更新的，但我相信您可以更新Grid Tab的select事件上的组件。
2. 发射zk-让你的自我： 您所需要知道的，是用zk博士编写的。 基本上，您在客户端收集数据，发送 通过Event解压缩到服务器的 来自服务器端json对象的数据并更新您的Grids

我更喜欢第一个，因为它的工作量少，不应该有

交通上的显著差异。

Answer 2

我贴出了我们想出的解决方案：

这是Z中每个Doublebox附带的javascript

//getting the value of the clicked cell
var currVal = jq(this).val(); 

//getting the next cell (on the right of the clicked cell)
objCells = jq(this).parents('td').next().find('.z-doublebox');

// if there's a next cell (returned array has length) - set the value and
// fire ZK onChange Event
if (objCells.length) {
    zk.Widget.$(jq(objCells).attr('id')).setValue(currVal);
    zk.Widget.$(jq(objCells).attr('id')).fireOnChange();
} else {  //otherwise we assume this is the last cell of the current tab
    //So we get the current row, because we want to edit the cells in the same row in the next tabs
    var currRow = jq(this).parents('tr').prevAll().length;

    //finding the next cell, on the same row in the hidden tab and applying the same logic
    objCellsHiddenTabs = jq(this).parents('.z-tabpanel').next().find('.z-row:eq(' + currRow + ')').find('.z-doublebox');
    if (objCellsHiddenTabs.length) {
        zk.Widget.$(jq(objCellsHiddenTabs).attr('id')).setValue(currVal);
        zk.Widget.$(jq(objCellsHiddenTabs).attr('id')).fireOnChange();
    }
}

RowRenderer类中的java代码如下所示：

... 
if (someBean != null) {

      binder.bindBean("tBean", someBean);

      Doublebox box = new Doublebox();
      setDefaultStyle(box);
      row.appendChild(box);
      binder.addBinding(box, "value", "tBean.someSetter");
 ...

 private void setDefaultStyle(Doublebox box) {
    box.setFormat("#.00");
    box.setConstraint("no negative,no empty");
    box.setWidth("50px");

    String customJS = ""; //the JS above

    //this is used to visually see that you're editing multiple cells at once
    String customJSNoFireOnChange = "jq(this).parents('td').nextAll().find('.z-doublebox').val(jq(this).val());";
    box.setWidgetListener(Events.ON_CHANGING, customJSNoFireOnChange);
    box.setWidgetListener(Events.ON_CHANGE, customJS);

}

值得注意的是，ZK优化了这个fireOnChange事件，并且只向服务器发送了1个ajax请求，其中包含了对所需单元格的更新。