8

jQuery Mobile Foo Tableで少し助けが必要です。テーブルにデータを動的に追加しています。

HTML:

    <table id="tblSRNDetails" class="footable">
        <thead>
            <tr>
                <th data-class="expand">SRN</th>
                <th >Failure Date</th>  
                <th >Complaint Report Date</th>                 
                <th>Promised Date</th>  
                <th >Customer Name</th>
                <th >Log Time</th>
                <th >Create FSR</th>    
                <th  data-hide="phone,tablet">Days Open</th>        
                <th  data-hide="phone,tablet">SRN Allocated Time</th>   
                <th  data-hide="phone,tablet"> SRN Status</th>  
                <th  data-hide="phone,tablet"> ESN Number</th>  
                <th  data-hide="phone,tablet"> Request Type</th>    
                <th  data-hide="phone,tablet">Service Request Details</th>                          
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

js コード:

$("#page-id").live('pagebeforeshow', function() {
    console.log("Page before show");
    $("#tblSRNDetails > tbody tr").remove();
    for (var indx = 0; indx < 2; indx++ )
    {
        $("#tblSRNDetails > tbody").append("<tr>"+
        "<td>Name</td>"+
        "<td>failureDate</td>"+
        "<td>complaintReportDate</td>"+
        "<td>promisedDate</td>"+
        "<td>custName</td>"+
        "<td><a href='#'><b>Log Time</b></a></td>"+
        "<td><b>Create FSR</b></td>"+
        "<td>daysOpen</td>"+
        "<td>allocatedTime</td>"+
        "<td>srn_status</td>"+
        "<td>ESNNumber</td>"+
        "<td>requestType</td>"+
        "<td>customerComplaint</td>"+
        "</tr>");   
    }
    $('#tblSRNDetails').footable();
});

これにより、初めて開いたときに FooTable が適切に適用されます。ホームページ ボタンをクリックして戻り、そのページに再びアクセスすると、FooTable が正しく適用されません。

スクリーンショット:

ここに画像の説明を入力

その際、私が直面している問題には次のようなものがあります。

  1. 非表示のフィールドが表示されます。(Footable が適用されていないことを意味します): この問題は、デバイスの向きを 2 回変更すると解決します。

  2. 最初のフィールドにはデータ展開ボタンが含まれなくなりました (フッタブルが適用されないことを意味します):

問題は、古い行を削除して新しい行を追加しているためだと思います。remove 呼び出しを行わずに試しました。その時点で、古い行は適切に表示されていました。スクリーンショットに示すように、新しく追加されたフィールドに問題がありました。

誰かがこれで私を助けることができますか?

PS: これを Android WebView でレンダリングしています。また、ブラウザでも同じ問題が再現されます。

4

3 に答える 3

2

「Footable」は「jQuery Mobile」とうまく連携します。コードスニペットでその使用法を説明します。

フッタブルの初期化、

function initFootable() {
    $(function () {
        $('.footable').footable({ //.footable is my class for table
            breakpoints: {
                phone: 480, //Breakpoint width for phones
                tablet: 1024 //Breakpoint width for tablets
            }
        });
    });
}

jQuery AJAX呼び出しを使用して新しいテーブルデータを取得し、テンプレートメソッドを使用してそれらをテーブルに追加しています。テンプレートに handlebars.js を使用しています。(このテンプレート化方法は必須ではないことに注意してください。独自の方法を使用して、新しい行をテーブルに追加できます。)

そのため、新しいデータをテーブルに更新した後、再初期化のためにフッタブルをトリガーする必要があります。これがコードスニペットです。

function updateFootable() {
    var paramTable = $('.footable');
    paramTable.footable();
    paramTable.trigger('footable_initialize'); //Reinitialize
    paramTable.trigger('footable_redraw'); //Redraw the table
    paramTable.trigger('footable_resize'); //Resize the table
}

ここでのすべてのトリガーは必要ありません。再初期化/再描画/サイズ変更で発生している問題に応じて、どのトリガーを呼び出すだけで十分かを確認してください。

これで、jQuery Mobile で footable を使用する際に問題が発生することはなくなります。

重要:ただし、updateFootable() を呼び出すときは注意が必要です。テーブルを含む div またはテーブルを含むページが非表示の場合、テーブルは応答してサイズ変更されません。更新を呼び出している間、テーブルが表示されていることを確認する必要があります。

リンク:

フッタブル トリガーのドキュメントは次のとおりです - http://fooplugins.com/footable/demos/triggers.htm#docs

フッタブル ドキュメントを確認してください - http://fooplugins.com/footable-demos/

于 2015-01-26T07:18:12.310 に答える