`
winzenghua
  • 浏览: 1330173 次
  • 性别: Icon_minigender_2
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

使用os3grid操作Html 表格

HTMLJavaScriptCSS脚本.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文件拷到对应目录下。
分享到：
| 中国电力集团公司旗下电厂分布
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics