问题

I want to use a specific native JavaScript library (DataTables) from GWT using Elemental2.
The initialization API for the library is of the type:

$('#example').DataTable({
        paging: false,
        ordering: false,
        info: false,
        columnDefs:
                [
                    { targets: [2,3], orderable: false },
                    { targets: [0], width : "150px" },
                    { targets: [3], width : "90px"}
                ]
    });

The accepted initialization parameters are quite variable, extensive, and optional.

This is how I initially tried to map it - it worked but is quite tedious to implement.

@JsType(isNative = true,name = "DataTable", namespace = JsPackage.GLOBAL)
public class DataTable
{
    public DataTable(String selector, FeatureOptions options){}
    public native Api clear();
    public native Api draw();
    // and so on...
}

@JsType(isNative = true, name = "Object", namespace = JsPackage.GLOBAL)
public class FeatureOptions
{
    public String  scrollY;
    public boolean scrollCollapse;
    public boolean paging;
    public boolean searching;
    // and so on...
}

At some point I ended up reverting to JSNI.... especially because of the complex type "columnDefs" (it would have required a lot of additional classes).

public native void drawTable(String tableID)/*-{
        var table = $wnd.$('#'+tableID).DataTable({
                searching : false,
                "columnDefs":
                [
                    { targets: [2,3], orderable: false },
                    { targets: [0], "width" : "150px" },
                    { targets: [3], "width" : "90px"}
                ]
            });
    }-*/;

Am I missing an obvious simple and efficient way to generate pure Elemental2 based Java code to implement such native interfaces? E.g. could I use some sort of Map to populate just the parameters I need and pass it as a JSON String or something?

For reference some useful question/answers - none that fit though:
(https://stackoverflow.com/questions/60062698/gwt-using-a-java-bean-parameter-directly-in-a-native-method)
(https://stackoverflow.com/questions/32905027/use-third-party-javascript-library-with-window-references-in-gwt)

$('#example').DataTable({
        paging: false,
        ordering: false,
        info: false,
        columnDefs:
                [
                    { targets: [2,3], orderable: false },
                    { targets: [0], width : "150px" },
                    { targets: [3], width : "90px"}
                ]
    });

@JsType(isNative = true,name = "DataTable", namespace = JsPackage.GLOBAL)
public class DataTable
{
    public DataTable(String selector, FeatureOptions options){}
    public native Api clear();
    public native Api draw();
    // and so on...
}

@JsType(isNative = true, name = "Object", namespace = JsPackage.GLOBAL)
public class FeatureOptions
{
    public String  scrollY;
    public boolean scrollCollapse;
    public boolean paging;
    public boolean searching;
    // and so on...
}

public native void drawTable(String tableID)/*-{
        var table = $wnd.$('#'+tableID).DataTable({
                searching : false,
                "columnDefs":
                [
                    { targets: [2,3], orderable: false },
                    { targets: [0], "width" : "150px" },
                    { targets: [3], "width" : "90px"}
                ]
            });
    }-*/;

答案1

得分: 0

有一个名为Tabulator的JS库，位于https://tabulator.info/docs/4.9/columns，它具有相当复杂的配置选项，还有人为其创建了一个GWT JsInterop接口，可以在这里找到：https://github.com/peruncs/gwt/tree/master/gwt-tabulator/src/main/java/com/peruncs/gwt/tabulator。如何完成这个操作可能与您需要完成的操作有相似之处。

另一种方法是使用JsPropertyMap对象：https://github.com/google/jsinterop-base/blob/master/java/jsinterop/base/JsPropertyMap.java。