1

いくつかのタブがあるWebページを作成しています。それを実装するために、私は改札AjaxTabbedPanelといくつかを使用していAbstractTabます。各タブにはデータを含むテーブルがあり、JavaScriptスクリプトを使用してテーブルを並べ替え可能にしています。

public TabbedPage() {
    List<ITab> tabs = new ArrayList<ITab>();
    tabs.add(new AbstractTab(new Model<String>("first tab")) {
        public Panel getPanel(String panelId) {
            return new TablePanel(panelId);
        }
    });

    tabs.add(new AbstractTab(new Model<String>("second tab")) {
        public Panel getPanel(String panelId) {
            return new TablePanel(panelId);
        }
    });

    add(new AjaxTabbedPanel("tabs", tabs));
}

ページをロードすると、デフォルトで選択されているタブのテーブルが並べ替え可能になります。ただし、リンクをクリックして他のタブ（すでに選択されているタブの1つを含む）にジャンプするとすぐに、どのタブのどのテーブルもそれらを並べ替えることができません（以前に機能していたものを含む-デフォルトタブのテーブル）。ページを更新すると、（更新時に選択したタブの）テーブルを並べ替えることができますが、いずれかのリンクをクリックしてタブを切り替えるとすぐに、テーブルの並べ替え機能が再び機能しなくなります。なぜこれが起こっているのかについての考えはありますか？

編集：AjaxTabbedPanel私がを置き換える場合、私TabbedPanelはこの問題を抱えていないことが わかりました。まだわかりませんが、それはなぜですか。誰かが私を啓発できますか？

    add(new TabbedPanel("tabs", tabs));
4

3 に答える 3

2

JavaScriptでテーブルを並べ替えるのは、特定のDOM-Idで呼び出される関数である可能性が高く、「onLoad」で実行されるようです。次に、現在表示されているテーブルにアクセスして機能します。パネルのコンテンツをAjaxで変更しても、「onLoad」はトリガーされないため、関数は再度実行されません。TabbedPanelはページを再読み込みするため、スクリプトを実行します。動的に生成されたDOM-Idのため、AjaxTabbedPanelを使用して以前の並べ替え可能なテーブルを選択しても機能しません。

解決策は、AjaxCallDecoratorをAjaxTabbedPanelからのリンクに追加するか、スクリプトまたは少なくともタブ付きパネルへの関数呼び出しを含めることです。

少なくともこれは、ソースを見ずに頭に浮かぶことです...

編集：あなたはウィケットウィキ を見たいかもしれません。AjaxLinkをクリックした後にjsを呼び出す方法についての説明があります。それがまさにあなたの問題を解決するはずです。

概要：追加するだけ

link.add(new AttributeAppender("onclick", new Model("myTableSortingScript();"), ";"));

AjaxTabbedPanelによって生成されたリンクへ。

于 2011-04-01T12:27:53.207 に答える
2

Wicket 6.0では、コンポーネントごとにJavaScriptを実行できます。コンポーネントのrenderHead（IHeaderResponse response）をオーバーライドするだけです。

@Override
public void renderHead(IHeaderResponse response) {
    super.renderHead(response);

    response.render(new OnLoadHeaderItem("initalizeMe(\"" + getMarkupId() + "\");"));
}

initializeMe（mycomponentId）は、コンポーネントがAjaxTabbedPanelによってロードされるたびに実行されます。これは、標準のTabbedPanelでも機能します。

于 2014-10-10T16:09:07.797 に答える
0

コードが何をしているのかわからないので、本当の考えはありませんが、PanelManagerで同様の問題が発生しました。基本的に、コンテンツで「innerhtml」スクリプトを使用してHTMLをパネル（divまたは別の要素）に動的にロードする場合、実行されません。

これを回避するために、ロードされたコンテンツで「script」タグをスキャンし、DOMメソッドを使用してそれらを追加します。これにより、スクリプトが実行され、使用できるようになります。私の「ロード」メソッドは次のとおりです。

    // Load Content
Panel.load = function(Content) {

        // "null" the old (to clear it)
    Panel.innerHTML = null;

        // Load the content
    Panel.innerHTML = Content;

        // Load Scripts
    var AllScripts = Panel.getElementsByTagName("script");
    var AllScriptsCnt = AllScripts.length;
    for (var Cnt = 0; Cnt < AllScriptsCnt; Cnt++){
        var CurScript = document.createElement('script');
        CurScript.type = "text/javascript";
        CurScript.text = AllScripts[Cnt].text;
        Panel.appendChild(CurScript);
    };

};

繰り返しになりますが、これが問題であるかどうかはわかりませんが、私の経験からすると、ほぼ目標どおりに聞こえます。

于 2011-04-01T13:06:45.830 に答える