كيف تفعل توسيع صف واحد مع celltable؟

Question

أحاول استخدام عنصر واجهة مستخدم GWT CellTable الجديدة ، لكن جدولي يحتاج إلى دعم توسيع صف واحد ، أي أن هناك Zippy على يسار الصف ، وعندما يتم النقر عليه ، يجب أن يتوسع الصف لتوفير مزيد من المعلومات التفصيلية ويجب أن يكون هذا الصف هذا الصف تمتد عبر جميع الأعمدة. هل من الممكن تحقيق ذلك مع celltable؟ كيف يمكنني إضافة صف يمتد على جميع الأعمدة بين الصفوف الأخرى ديناميكيًا؟

سيكون موضع تقدير أي مساعدة!

Answer 1

سيضيف GWT 2.5 CellTableBuilder مع الهدف الدقيق المتمثل في السماح لهذا النوع من الأشياء.

يمكنك العثور على مثال مباشر في http://showcase2.jlabanca-testing.appspot.com/# !cwcustomDatagrid (انقر على خلايا "عرض الأصدقاء")

Answer 2

لا يمكنك جعل الصف الإضافي غير مرئي باستخدام getRowElement(int row) واستخدام أساليب DOM لتعيين العرض "لا شيء" عند تقديمه وبشكل فارغ عند إظهاره ، لإظهاره ، يتم الضغط عليه.

Answer 3

أنا أعمل على الحل أيضًا ، وتتمثل خطتي في الوقت الحالي في استخدام فصول CSS + معالجة الأنماط اليدوية لجعلها تبدو كما أحتاج. لست متأكدًا مما إذا كنت قادرًا على سعيد مع GWT على الرغم من: http://jsfiddle.net/7wfcf/

Answer 4

اتخذت نهجا مختلفا لحل هذه المشكلة نفسها.

المفهوم الأساسي هو استخدام عناصر DOM لإضافة وإزالة الصفوف بناءً على حدث ما. الكود التالي هو امتداد مجردة لـ CellTable. ستحتاج إلى استدعاء هذه الطريقة من الحدث الذي يتم إطلاقه من النقر لتوسيع صف.

import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NodeList;

public abstract class ActionCellTable<T> extends CellTable<T> {
    protected abstract void addActionsColumn();

Integer previousSelectedRow = null;

public void displayRowDetail(int selectedRow, Element e){
    //Get the tbody of the Cell Table
    //Assumption that we want the first (only?) tbody.
    Element tbody = this.getElement().getElementsByTagName("tbody").getItem(0);
    //Get all the trs in the body
    NodeList<Element> trs = tbody.getElementsByTagName("tr");

    //remove previously selected view, if there was one
    if(previousSelectedRow!=null){
        trs.getItem(previousSelectedRow+1).removeFromParent();
        //If the current is further down the list then the current your index will be one off.
        if(selectedRow>previousSelectedRow)selectedRow--;
    }
    if(previousSelectedRow==null || selectedRow != previousSelectedRow){// if the are equal we don't want to do anything else
        Element td = Document.get().createTDElement();
        td.setAttribute("colspan", Integer.toString(trs.getItem(selectedRow).getChildNodes().getLength()));
        td.appendChild(e);

        Element tr = Document.get().createTRElement();
        tr.appendChild(td);
        tbody.insertAfter(tr, trs.getItem(selectedRow));
        previousSelectedRow=selectedRow;
    } else {
        previousSelectedRow=null;
    }
}

}

يتم استخدام SequeSelectedRow لتتبع العنصر "موسع" ، وربما يمكن تحقيق ذلك باستخدام الفئات أو المعرفات. إذا لزم الأمر ، يمكنني توضيح المزيد على celltable والأحداث والآراء والأنشطة.