التعامل مع النقر فوق خانة الاختيار في رأس CellTable

Question

أحاول إنشاء CellTable الذي يحتوي على عمود يحتوي على بعض النصوص ومربع اختيار، والذي سيتم استخدامه كمربع اختيار لتحديد الكل (انظر الرسم أدناه، "cb" هو مربع اختيار).أستخدم حاليًا فئة مشتقة من الرأس وأتجاوز طريقة العرض الخاصة بها لإخراج النص ومربع الاختيار.أنا أتجاوز onBrowserEvent() ولكنه يمنحني فقط أحداث onChange، والتي قد تعمل بشكل جيد باستثناء أن مربع الاختيار لا يعمل بشكل صحيح.هل يوجد احد لديه افكار فى هذا؟

+-------+------------+
| col 1 | Select All |
|       |     cb     | 
+-------+------------+
| row 1 |     cb     |
+-------+------------+

تتمثل المشكلات التي أواجهها مع مربع الاختيار في أنه عندما لا يتم تحديده، يتعين عليك النقر فوقه مرتين حتى تظهر علامة الاختيار (على الأقل في Chrome)، على الرغم من أن الخاصية "المحددة" صحيحة في المرة الأولى.نقرة واحدة تؤدي إلى إلغاء تحديده بشكل صحيح.

هنا بعض التعليمات البرمجية:

إعداد أعمدة CellTable:

/** Setup the table's columns. */
private void setupTableColumns() {
    // Add the first column:
    TextColumn<MyObject> column1 = new TextColumn<MyObject>() {
        @Override
        public String getValue(final MyObject object) {
            return object.getColumn1Text();
        }
    };
    table.addColumn(macColumn, SafeHtmlUtils.fromSafeConstant("Column1"));

    // the checkbox column for selecting the lease
    Column<MyObject, Boolean> checkColumn = new Column<MyObject, Boolean>(
            new CheckboxCell(true, false)) {
        @Override
        public Boolean getValue(final MyObject object) {
            return selectionModel.isSelected(object);
        }
    };

    SelectAllHeader selectAll = new SelectAllHeader();
    selectAll.setSelectAllHandler(new SelectHandler());
    table.addColumn(checkColumn, selectAll);
}

رأس تحديد الكل الخاص بي:

public static class SelectAllHeader extends Header<Boolean> {
    private final String checkboxID = "selectAllCheckbox";
    private ISelectAllHandler handler = null;

    @Override
    public void render(final Context context, final SafeHtmlBuilder sb) {
        String html = "<div>Select All<div><input type=\"checkbox\" id=\"" + checkboxID + "\"/>";

        sb.appendHtmlConstant(html);
    }

    private final Boolean allSelected;

    public SelectAllHeader() {
        super(new CheckboxCell());

        allSelected = false;
    }

    @Override
    public Boolean getValue() {
        Element checkboxElem = DOM.getElementById(checkboxID);

        return checkboxElem.getPropertyBoolean("checked");

    }

    @Override
    public void onBrowserEvent(final Context context, final Element element, final NativeEvent event) {
        Event evt = Event.as(event);
        int eventType = evt.getTypeInt();

        super.onBrowserEvent(context, element, event);

        switch (eventType) {
            case Event.ONCHANGE:
                handler.onSelectAllClicked(getValue());
                event.preventDefault();
                break;

            default:
                break;
        }

    }


    public void setSelectAllHandler(final ISelectAllHandler handler) {
        this.handler = handler;
    }

}

Answer 1

يبدو أنك تعرض مربع اختيار غير محدد عندما تعرض الرأس، مما قد يؤدي إلى مسح حالة التحديد عند إعادة عرض الجدول الخلوي.

حاول تخزين الحالة المحددة وعرض مربع الاختيار مع الحالة.يبدو أنك في منتصف الطريق مع allSelected, ، أنت فقط لا تستخدمه.

يحرر فيما يلي تطبيق عملي كتبته للتو لـ Zanata (انظر SearchResultsView.java).يتم تنفيذ واجهة HasValue بحيث يمكن التعامل مع أحداث تغيير القيمة بطريقة قياسية.لم أتجاوز طريقة العرض، إذا كنت تريد القيام بذلك تأكد من استخدامها getValue() لتحديد ما إذا كنت تعرض مربع اختيار محددًا أم غير محدد.تتم معالجة منطق الاختيار/إلغاء التحديد في فئة مقدم العرض المرتبطة (انظر نتائج البحثPresenter.java).

private class CheckboxHeader extends Header<Boolean> implements HasValue<Boolean> {

   private boolean checked;
   private HandlerManager handlerManager;

   public CheckboxHeader()
   {
      //TODO consider custom cell with text
      super(new CheckboxCell());
      checked = false;
   }

   // This method is invoked to pass the value to the CheckboxCell's render method
   @Override
   public Boolean getValue()
   {
      return checked;
   }

   @Override
   public void onBrowserEvent(Context context, Element elem, NativeEvent nativeEvent)
   {
      int eventType = Event.as(nativeEvent).getTypeInt();
      if (eventType == Event.ONCHANGE)
      {
         nativeEvent.preventDefault();
         //use value setter to easily fire change event to handlers
         setValue(!checked, true);
      }
   }

   @Override
   public HandlerRegistration addValueChangeHandler(ValueChangeHandler<Boolean> handler)
   {
      return ensureHandlerManager().addHandler(ValueChangeEvent.getType(), handler);
   }

   @Override
   public void fireEvent(GwtEvent<?> event)
   {
      ensureHandlerManager().fireEvent(event);
   }

   @Override
   public void setValue(Boolean value)
   {
      checked = value;
   }

   @Override
   public void setValue(Boolean value, boolean fireEvents)
   {
      checked = value;
      if (fireEvents)
      {
         ValueChangeEvent.fire(this, value);
      }
   }

   private HandlerManager ensureHandlerManager()
   {
      if (handlerManager == null)
      {
         handlerManager = new HandlerManager(this);
      }
      return handlerManager;
   }
}