一个可绑定数据源的jQuery数据表格插件_jquery

姓名	性别	年龄	住址
{姓名}	{性别}	{年龄}	{住址}

//测试数据
var dataJsonStr='{tablename:"",rows:[{"姓名":"曹操","性别":"男","年龄":"51","住址":"许昌"},{"姓名":"诸葛亮","性别":"男","年龄":"40","住址":"南阳"},{"姓名":"周瑜","性别":"男","年龄":"40","住址":"江东"},{"姓名":"大乔","性别":"女","年龄":"30","住址":"江东"},{"姓名":"小乔","性别":"女","年龄":"28","住址":"江东"},{"姓名":"曹操","性别":"男","年龄":"51","住址":"许昌"},{"姓名":"诸葛亮","性别":"男","年龄":"40","住址":"南阳"},{"姓名":"周瑜","性别":"男","年龄":"40","住址":"江东"},{"姓名":"大乔","性别":"女","年龄":"30","住址":"江东"},{"姓名":"小乔","性别":"女","年龄":"28","住址":"江东"}]}';
//清空数据
$('#test').DataGridClear();
//设定行样式
$('#test').DataGridSetItemClass("tr1","tr2","trhover");
//绑定数据，并设置宽度高度
$('#test').DataGrid("100%",200,dataJsonStr);

TableBody.addClass('TableBody');
TableBody.wrap("");
var MyTable=$('#'+MyTableId);
TableBody.data('MyTable',MyTable);
TableBody.before("");
var TableHead=MyTable.find(".TableHead");
TableBody.data('TableHead',TableHead);
TableBody.wrap('');
TableHead.wrap("");
var TableBodyArea=MyTable.find('.TableBodyArea');
var TableHeadArea=MyTable.find('.TableHeadArea');
TableBody.data('TableBodyArea',TableBodyArea);
TableBody.data('TableHeadArea',TableHeadArea);

TableBody.find('.header').clone().prependTo(TableHead);

TableBodyArea.scroll(function (){
var ml=0-parseInt(TableBodyArea.attr('scrollLeft'));
TableHead.css('margin-left',ml);
});

TableBody.find('td').live('dblclick',function(){
var td=$(this);
if(td.attr('editable')=='true')
{
var text=td.text();
var html="";
td.html(html);
td.addClass("tdediting");
//
$(this).find('.TdEditTextBox').focus().focus().focus().focus();
$(this).find('.TdEditTextBox').blur(function(){
var val=$(this).val();
td.html(val);
td.removeClass("tdediting");
});
}
});