使用os3grid操作Html 表格

wangyihust

浏览: 445530 次

最近访客更多访客>>

xuHuihui

woodding2008

wxn_yxm

qcsjliu

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (401)

社区版块

存档分类

HTML JavaScript CSS 脚本 .net

os3grid 开源，目前version 为0.6，功能和界面都还可以，扩展也较方便，平台通用性很强。主要使用javascript脚本语言操纵Grid。

Demo实例：

<html>
<head>
    <link type="text/css" rel="stylesheet" href="os3grid.css" />
    <script src="os3grid.js" type="text/javascript"></script>
    <script src="form_validators.js" type="text/javascript"></script>
</head>
<body >
    我的os3grid测试<br>
    <div id="grid"></div>

<script type="text/javascript">
               function val_changed ( grid, x, y, new_val )
    {
     alert ( "On grid: " + grid.id + " x: " + x + " y: " + y + " - value changed to: " + new_val );
    }

    //txt: ”Plain” cell content to be manipulated before output.
    function bold_render( txt )
    {
     return '<span style="font-weight: bold; color: red;">' + txt + '<\/span>';
    }

     // Create an OS3Grid instance
    var g = new OS3Grid ();

// Grid Headers are the grid column names
g.set_headers ( 'feat.no', 'Name', 'Descr', 'Importance' );

// 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", "blue" );

    // Now, we add some rows to the grid
    g.add_row ( 1, 'Layout', 'OS3Grid looks like a standard spreadsheet grid', 10 );
    g.add_row ( 2, 'Row Colors', 'You can change the colors of every singular row in the grid', 5 );
    g.add_row ( 3, 'Sorting', 'Rows can be sorted ascending or descending by clicking on column names', 15 );

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

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

    //第1列居中，第4列居右
    g.set_col_align ( 0, "center" );
    g.set_col_align ( 3, "right" );

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

    /*
    OS3Grid cell data can be manipulated before being output to the browser. To do
    so, you simply have to define a column renderer, a JavaScript funtion that will
    be called by the OS3Grid itself each time it needs to render some data inside a
    given cell of a specific column.
    */
    g.set_col_render ( 1, bold_render );    //第1列，bold_render为js函数

    //on_change callback
    g.onchange = val_changed;

    //chars: A string containing all the chars that the user can input inside the column edit box.
    g.set_col_valid_chars ( 3, "0123456789" );   //第4列只能输入0123456789几个字符的子集

    g.set_col_validation ( 3, check_integer );   //判断第4列的输入是否合法，check_integer为js函数

    g.resize_cols = true;

    g.sort_on_edit = true;

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


    //取得表格中的数据，这样我们可以将表格中的数据序列化或写入持久化(xml or 数据库)
     var i, data;

                 for ( i= 0; i < g.length (); i ++ )
                 {
                     data = g.get_row (i );
                     alert(data[0]);
                  }
</script>
</body>
</html>

下载：http://os3grid.sourceforge.net，将几个css和js文件拷到对应目录下。

分享到：