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更改了所有单元格值。然而，如果我在保存网格时手动点击已经具有NEW值（进入/离开/更改焦点）的单元格，则该值在该特定单元格中是正确的。也许这是一个提示我如何解决这个问题。

我如何提取Grid值的代码：

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

Grid的模型是List的{{1}}：

MyCustomRow

我有几个假设，但无论我尝试过什么，都没有奏效。我记得myGrid1.setModel(new ListModelList(List<MyCustomRow> populatedList));事件和jQuery是不同的，可能在不同的背景下被隔离。（虽然我试图从jQuery中激活事件等等。）

你有什么建议吗？总的来说，我的方法是正确的，还是有另一种方法可以做到这一点？感谢您提前的时间！

Answer 1

你的问题正是你所期待的 Zk有它自己的事件系统，不关心你的jq，
因为它的jq和zk没有观察到DOM。

解决问题的方法。

使用“ZK-Way”：
只需在服务器端收听并在那里查找东西我不确定是否选择了Tabs 是可更新的，但我相信你可以更新Grid
Tab的选择事件上的组件。
点燃自己的zk事件：
所有你需要知道的，写在zk doc 基本上，您在客户端收集数据，发送
通过Event向服务器zAu.send()提取来自服务器端的json对象的数据并更新您的Grids

我更喜欢第一个，因为它的工作量较少而且不应该有流量的显着差异。

Answer 2

我发布了我们提出的解决方案：

这是附加到Z-Grid中每个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请求，其中包含对必要单元的更新。

如何从jQuery更新ZK网格值

2 个答案: