结构示意图:
如何根据HTML模板创建DataGrid整个结构?
1.首先创建 表头 主体 等各区域:
TableBody.addClass(‘TableBody’);
TableBody.wrap(“<div id='”+MyTableId+”‘ class=’houfeng-table’></div>”);
var MyTable=$(‘#’+MyTableId);
TableBody.data(‘MyTable’,MyTable);
TableBody.before(“<table class=’TableHead’ ></table>”);
var TableHead=MyTable.find(“.TableHead”);
TableBody.data(‘TableHead’,TableHead);
TableBody.wrap(‘<div class=”TableBodyArea”></div>’);
TableHead.wrap(“<div class=’TableHeadArea’ onselectstart=’return false;’></div>”);
var TableBodyArea=MyTable.find(‘.TableBodyArea’);
var TableHeadArea=MyTable.find(‘.TableHeadArea’);
TableBody.data(‘TableBodyArea’,TableBodyArea);
TableBody.data(‘TableHeadArea’,TableHeadArea);
上面代代中红色高亮 TableBody 为表主体, TableHead 为表头
2.创建表头
TableBody.find(‘.header’).clone().prependTo(TableHead);
TableBody 其实便是HTML模板Table , 将 .header 的行移到到表头表格中作为表头.
3.创建表主体
创建表主体,其实便是根据数据源及模板 循环创建每一行 , 这里用了 上篇文章提到的 Repeater 来创建, 详细 请看用javascript实现Repeater.
4.处理当列过多时横向滚动条的问题
TableBodyArea.scroll(function (){
var ml=0-parseInt(TableBodyArea.attr(‘scrollLeft’));
TableHead.css(‘margin-left’,ml);
});
TableBodyArea 为TableBody外包裹的一个Div
5.如何实现单元格编辑
双击td时在td中动态插入一个文件本框为将td的innerHTML给文本框，在文本焦点失去时，将文本框值赋给td的innerHTML，将移除文本框 代码如下：
TableBody.find(‘td’).live(‘dblclick’,function(){
var td=$(this);
if(td.attr(‘editable’)==’true’)
{
var text=td.text();
var html=”<input type=’text’ class=’TdEditTextBox’ value='”+$.trim(text)+”‘ />”;
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”);
});
}
});
6. 如何排序：
由时间问题请容我下回分解！！
源码下载: /201007/yuanma/DataGrid.rar
作者：houfeng
