1

編集可能なYUIデータテーブルのデータソースとして使用しているjavascript配列があります。

var data = [
    { Col1: "one", Col2: 1 },  
    { Col1: "two", Col2: 2 },      
    { Col1: "three", Col2: 3 },
    { Col1: "four", Col2: 4 }
];
var customFormatter = function (elLiner, oRecord, oColumn, oData) {
    elLiner.innerHTML = "Click me";
    $(elLiner).click(function () {
        var rsvalue = oRecord.getData("Col1");
        var datavalue = data[oRecord.getCount()].Col1;;
        alert("rs:" + rsvalue + ", data:" + datavalue);
    });
};
var coldefs = [
    { key: "Col1", editor: new YAHOO.widget.TextboxCellEditor() },
    { key: "Col2" },
    { key: "Col3", formatter: customFormatter }
];
var datasource = new YAHOO.util.DataSource(data);
datasource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
datasource.responseSchema = { fields: [ "Col1", "Col2" ] };
var datatable = new YAHOO.widget.DataTable("mytable", coldefs, datasource);
datatable.subscribe("cellClickEvent", datatable.onEventShowCellEditor);

編集可能なセルの値を変更すると、データテーブルのレコードが新しい値で更新されますが、基になるdata配列は更新されません。ユーザーがデータの編集を終えたら、このjavascript配列(またはこの形状の別の配列)を操作したいと思います。そこでは、後処理を行ってサーバーに送信する必要があります。一般的に優れたYUIの例では、データテーブル内で行われた変更を基になるデータソースに調整しようとすることはありません。このような例はありますか?data変更をアレイにプッシュバックするための最良の方法は何ですか?

これが私の小さなテストでのjsfiddleです:http://jsfiddle.net/cfarmerga/uArKs/1/

DataTableのsをキャッチしeditorSaveEvent、レコードセットを調べてjavascript配列を更新する必要がありますか?

4

1 に答える 1

2

可能であれば、ユーザーが編集を終了した後、データの配列を再構築し、後処理を行ってから、サーバーに送信することをお勧めします。これは、個々の編集のたびにデータソースとアレイの同期を維持しようとするよりも効率的です。配列を再構築するには、データテーブルのRecordSetをループします。

var rs = datatable.getRecordSet(),
    len = rs.getLength(),
    data = [];

for (var index=0; index < len; index++) {
    data.push(rs.getRecord(index).getData());
}

getData()は、レコード全体を表すオブジェクトを返すことに注意してください。個々のキーをgetData()(getData( "Col1")など)に渡して、レコードの個々のフィールドを取得することもできます。

于 2011-02-10T17:32:36.700 に答える