選取合適的dHtml Grid方案

目前網上主流的有四種方案：

1 dhtmlxGrid
http://www.scbr.com/docs/products/dhtmlxGrid/index.shtml
免費版可以填充表格，表格也非常漂亮。但是無法得到資料，或者將修改過的表格內容序列化成xml，只有專業版才可以。

2 activewidgets-grid 1.0.0
http://www.activewidgets.com/
功能非常強大，甚至可以分頁，介面也有好看的皮膚。但1.0 同樣無法取資料。2.0也不是免費的，

3 DHTMLGrid Ver0.92
http://dhtmlgrid.sourceforge.net/
功能及其簡單，介面比較難看

4 os3grid 0.6
http://os3grid.sourceforge.net
功能還可以，不過介面簡單。雖然架構不好，但是可以擴充套件，而且畢竟是LGPL的許可。

最終我還是選用os3grid來做工資錄入介面.

建立介面的程式碼為:
    // Create an OS3Grid instance
    var g = new OS3Grid ();

    // Set the callback for modifications
    g.onchange = row_modified;

    g.set_size ( "400px", "200px" );
    
    // Grid Headers are the grid column names
    g.set_headers ( 'nick', 'name', 'email addr' );

    // If contents is bigger than container, Grid will automatically show scrollbars
    g.set_scrollbars ( true );

    // The grid will have a solid border (these are CSS attributes)
    g.set_border ( 1, "solid", "#cccccc" );

    // Now, we add some rows
    g.add_row ( "fsoft", "Fabio Rotondo", "fsoft (@) sourceforge (dot) net" );
    g.set_row_attr ( -1, 'magic', 'magic-fsoft' );
    g.set_row_attr ( -1, 'changed', 'NO' );

    g.add_row ( "nick", "Nick Fury", "nick (@) sourceforge (dot) net" );
    g.set_row_attr ( -1, 'magic', 'magic-nick' );
    g.set_row_attr ( -1, 'changed', 'NO' );

    g.add_row ( "john", "John JJ Jameson", "john (@) sourceforge (dot) net" );
    g.set_row_attr ( -1, 'magic', 'magic-john' );
    g.set_row_attr ( -1, 'changed', 'NO' );

    g.add_row ( "reds", "Mary Jane Watson", "mj (@) sourceforge (dot) net" );
    g.set_row_attr ( -1, 'magic', 'magic-mj' );
    g.set_row_attr ( -1, 'changed', 'NO' );

    g.add_row ( "white", "Barry White", "barryw (@) sourceforge (dot) net" );
    g.set_row_attr ( -1, 'magic', 'magic-barryw' );
    g.set_row_attr ( -1, 'changed', 'NO' );

    // Enable sortable rows
    g.set_sortable ( true );

    // Enable highlight of rows with the mouse
    g.set_highlight ( true );

    g.set_col_editable ( 1, "txt" );
    g.set_col_editable ( 2, "txt" );

    g.sort_on_edit = true;

    // Show the grid replacing the original HTML object with the "grid" ID.
    g.render ( 'grid' );

取得資料的程式碼，這是最關鍵的

     var l = g.length ();
     var t;
     var data, attrs;
     var s = "";
     var i, v;

     for ( t = 0; t < l; t ++ )
     {
      data = g.get_row ( t );
      alert(data[0]+data[1]+data[2]);

     }

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=667744