0

我有三个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是：ListMyCustomRow

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

我有几个假设，但无论我尝试过什么，都没有奏效。我记住了这些jQuery事件并且ZK-Events在不同的上下文中是不同的并且可能是孤立的。（虽然我试图从 jQuery 等触发事件..）

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

4

2 回答 2

2

Your problem is exactly what you are expecting.
Zk has it's own event system and do not care about your jq,
cos it's jq and zk don't observ the DOM.

The ways to solve your problem.

  1. Use the "ZK-Way":
    Simply listen at server-side and chage things there.
    I am not sure if not selected Tabs
    are updateable, but I am sure you could update the Grid
    components on the select event of the Tab.

  2. Fire an zk-event your self:
    All you need to know, is written in the zk doc.
    Basically, you collect your data at client side, send
    an Event to the server via zAu.send() extract the
    data from the json object at serverside and update your Grids

I would prefer the first one, cos it's less work and there should not be
a notable difference in traffic.

于 2013-05-15T11:48:04.667 回答
0

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

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

于 2013-05-20T08:19:55.707 回答