该组件支持三种渲染形态，因为有些简单的表格没必要去做太复杂的处理。
支持自适应页面宽度和可以设置固定宽度，理论上是所有浏览器都支持，但是因为我引用了一些工具类，处理数组的filter、map 所以向前兼容可以自己实现这些方法
第一种：不需要固定头和列，纯普通表格。
第二种：只需要固定头，滚动内容区域
第三种：需要固定列。
本身想采用虚拟DOM来常渲染，因为这种组件对性能消耗挺大，后面想了一下本来就是来提供大家一个思路的例子没必要写的太复杂，现在的话写的还算比较简单只有几百行，如果代码量很多对于一个想研究这类组件的同学可能压力很多。
require(['yg'], function () { (function () { function FTable(columns) { this.columns = columns; this.unionColumns = concatColumn(columns); this.colgroup = null; this.thead = null; this.tbody = null; this.wrapper = $('<div>'); this.element = $('<table class="fx-table">').appendTo(this.wrapper); this.initColgroup(); } FTable.prototype.getFixedColumns=function() { return Yg._.filter(this.unionColumns, { fixed: true }) } FTable.prototype.forColumnWidth = function (viewWidth,callback) { var unionColumns = this.unionColumns, count = unionColumns.length, totalWidth = 0, surplusWidth, columnWidth; function getValue(value) { value = parseInt(value); return String(value).indexOf('%') != -1 ? value / 100 * viewWidth : value; } for (var i = 0; i < count; i++) { if (callback(unionColumns[i])===true) { totalWidth += getValue(unionColumns[i].width); } } return totalWidth; } FTable.prototype.getColumnWidth = function (viewWidth) { return Math.max(this.forColumnWidth(viewWidth, function (c) { return Yg._.has(c, 'width');}), viewWidth) } FTable.prototype.getFixedColumnWidth = function (viewWidth) { return this.forColumnWidth(viewWidth, function (c) { return Yg._.has(c, 'width')&&c.fixed; }); } FTable.prototype.getHeight=function() { return this.element.outerHeight(); } FTable.prototype.getWidth = function () { return this.element.outerWidth(); } FTable.prototype.setWidth = function (width) { this.element.width(width); } FTable.prototype.setHeight = function (height) { this.element.height(height); } FTable.prototype.setOuterWidth = function (width) { this.wrapper.width(width); } FTable.prototype.setOuterHeight = function (height) { this.wrapper.height(height); } FTable.prototype.setStyle=function(styles) { this.element.css(styles); } FTable.prototype.clone=function() { return new FTable(this.columns); } FTable.prototype.initColgroup=function() { this.colgroup = new Colgroup(this.unionColumns); } FTable.prototype.setHead = function (thead) { this.thead = thead; } FTable.prototype.initHead = function (visibleNoFixed) { this.thead = new FTHead(this.columns, visibleNoFixed); } FTable.prototype.initBody = function (visibleNoFixed) { this.tbody = new FTBody(this.unionColumns, visibleNoFixed); } FTable.prototype.renderData=function(data) { this.tbody.renderData(data); this.trigger('onRenderData',data); } FTable.prototype.render=function(parent) { this.colgroup.render(this.element); this.thead && this.thead.render(this.element); this.tbody && this.tbody.render(this.element); parent.append(this.wrapper); } Yg.extend(FTable.prototype, Yg.Events); function Colgroup(columns) { this.element = $('<colgroup>'); Yg.each(columns, Yg.bind(this.addCol, this)); } Colgroup.prototype.addCol = function (column) { var col = $('<col>'); if (column.hasOwnProperty('width')) { col.css({ width: column.width }); } col.appendTo(this.element); } Colgroup.prototype.render=function(parent) { parent.append(this.element); } function FTHead(columns, visibleNoFixed) { this.visibleNoFixed = visibleNoFixed; this.element = $('<thead>'); this.addRow(columns); } FTHead.prototype.rowDepth = function (columns, len) { var childColumns = []; for (var i = 0, length = columns.length; i < length; i++) { if (Yg._.has(columns[i], 'columns') && columns[i].columns.length > 0) { childColumns = childColumns.concat(columns[i].columns); } } if(childColumns.length>0) { return this.rowDepth(childColumns,len+1); } return len; } FTHead.prototype.colDepth = function (columns, len) { var childColumns = [], length = columns.length; for (var i = 0; i < length; i++) { if (Yg._.has(columns[i], 'columns') && columns[i].columns.length > 0) { childColumns = childColumns.concat(columns[i].columns); } } if (childColumns.length > 0) { return this.colDepth(childColumns, len +length-1); } return len + length; } FTHead.prototype.addRow = function (columns) { var tr = $('<tr>'), childColumns = [], that = this, rowSpan = this.rowDepth(columns,1); Yg.each(columns, function (column) { that.addCell(tr, column, rowSpan); if (Yg._.has(column, 'columns')) { childColumns = childColumns.concat(column.columns); } }); this.element.append(tr); if(childColumns.length>0) { this.addRow(childColumns); } } FTHead.prototype.addCell = function (parent, column, rowSpan) { var cell = $('<th>'), crowSpan = 0, attrs = {}; if (Yg._.has(column, "headFormat")) { var template = Yg._.isFunction(column.headFormat) ? column.headFormat : Yg._.template(column.headFormat) cell.html(template(column)); } else { cell.text(column.title); } if (Yg._.has(column, "headAttrs")) { attrs = Yg.extend(attrs, column.headAttrs); } if (Yg._.has(column, 'columns') && column.columns.length>0) { attrs.colspan = this.colDepth(column.columns, 0); crowSpan = this.rowDepth(column.columns, 1) } if (this.visibleNoFixed && !column.fixed) { cell.addClass('fx-hidden'); } rowSpan -= crowSpan; if (rowSpan > 1) { attrs.rowspan = rowSpan; } cell.attr(attrs); parent.append(cell); } FTHead.prototype.render = function (parent) { parent.append(this.element); } function concatColumn(unionColumns) { var column, columns=[]; for (var i = 0, len = unionColumns.length; i < len; i++) { column = unionColumns[i]; if (Yg._.has(column, 'columns')) { Yg.each(column.columns,function(c){ c.fixed=column.field; }); columns.push.apply(columns,concatColumn(column.columns)); } else { columns.push(column); } } return columns; } function FTBody(columns, visibleNoFixed) { Yg.bindAll(this, 'addRow'); this.visibleNoFixed = visibleNoFixed; this.columns = columns; this.element = $('<tbody>'); } FTBody.prototype.addRow = function (rowData) { var that=this, tr = $('<tr>'), columns=this.columns; Yg.each(columns, function (column) { that.addCell(tr, column,rowData); }); this.element.append(tr); } FTBody.prototype.addCell = function (parent, column, rowData) { var cell = $('<td>'), attrs = {}; if (Yg._.has(column, "format")) { var template = Yg._.isFunction(column.format) ? column.format : Yg._.template(column.format) cell.html(template(rowData, column)); } else { cell.text(rowData[column.field]); } if (Yg._.has(column, "attrs")) { attrs = Yg.extend(attrs, column.attrs); } if (this.visibleNoFixed &&!column.fixed) { cell.addClass('fx-hidden'); } cell.attr(attrs); if (Yg._.has(column, "rowSpan")) { var rowSpan = column.rowSpan(rowData, column),isNumber=typeof rowSpan=="number"; if (isNumber && rowSpan > 1) { cell.attr('rowspan', rowSpan); } else if (isNumber && rowSpan < 0) { return; } } parent.append(cell); } FTBody.prototype.renderData = function (data) { data = data || []; this.element.empty(); Yg.each(data, this.addRow); } FTBody.prototype.render = function (parent) { parent.append(this.element); } function getStyleValue(value,defaultValue) { return value != 'auto' && value != null ?parseInt(value):defaultValue; } var defaultOptions = { columns: [], dataSource: null, autobind: true, width: 'auto', height: 'auto' }; var Grid = function (element,options) { this.options = $.extend({}, defaultOptions, options); this.container = $(element).addClass('fx-table-container'); this.contentTable = null; this.wrapper = $('<div class="fx-table-wrapper"><div class="fx-head"></div><div class="fx-body"></div></div>').appendTo(this.container); this.initViewSize(); this.init(); } Grid.prototype.initViewSize = function () { var viewWidth = this.container.width(), options = this.options; this._width = getStyleValue(options.width, 0); this._height = getStyleValue(options.height, 0); this.isScroll = this._width > 0 || this._height > 0; this.viewWidth = viewWidth; if (this._width > 0) { this.container.css({ width: this._width }); } } Grid.prototype.init=function() { var options = this.options; Yg.bindAll(this, '_successHandler','_failHandler'); this.dataSource = Yg.parseDataSource(this.options.dataSource); this.dataSource.then(this._successHandler, this._failHandler); this.render(); if (options.autobind) { this.dataSource.read(); } } Grid.prototype._successHandler=function(data) { this.contentTable.renderData(data); } Grid.prototype._failHandler = function () { } Grid.prototype.initTable= function () { this.contentTable = new FTable(this.options.columns); this.isFixedColumn = this.contentTable.getFixedColumns().length > 0; } Grid.prototype.initBody = function () { } Grid.prototype._setHeadStyle=function(element) { element.addClass('fx-head-table fx-hidden-scroll'); } Grid.prototype._setBodyStyle = function (element) { element.addClass('fx-body-table fx-body-scroll'); } Grid.prototype._setFixedHeadStyle = function (element) { element.addClass('fx-head-table fx-head-fixed fx-hidden-scroll'); } Grid.prototype._setFixedBodyStyle = function (element) { element.addClass('fx-body-table fx-hidden-scroll fx-body-fixed'); } Grid.prototype.initFixedTable=function() { var that = this, options = that.options, viewWidth=that.viewWidth, width = that._width, height = that._height, contentTable = that.contentTable, isFixedColumn = that.isFixedColumn, elFxHead = that.wrapper.children('.fx-head'), elFxBody = that.wrapper.children('.fx-body'), fHead = contentTable.clone(), fixedBody, fixedHead, isScrollY = false, isScrollX=false; fHead.wrapper.addClass('fx-head-table fx-hidden-scroll'); contentTable.wrapper.addClass('fx-body-table fx-body-scroll'); //获取表格宽度 var tableWidth = contentTable.getColumnWidth(width); var fixedWidth = contentTable.getFixedColumnWidth(width); function setTableLayout() { if (width > 0) { // 设置固定宽度 fHead.setWidth(tableWidth); fHead.setOuterWidth(width); contentTable.setWidth(tableWidth); contentTable.setOuterWidth(width); } if (height > 0&&width>0 && isScrollY) { fHead.setOuterWidth(width-17); contentTable.setOuterHeight(height); } else if (height > 0 && isScrollY) { fHead.wrapper.css("marginRight",'17px'); contentTable.setOuterHeight(height); } if(isFixedColumn) { fixedHead.setOuterWidth(fixedWidth); fixedHead.setWidth(tableWidth); fixedBody.setOuterWidth(fixedWidth); fixedBody.setWidth(tableWidth); contentTable.wrapper.css({ width: (width - fixedWidth) + 'px', marginLeft: fixedWidth+'px' }); contentTable.element.css({ marginLeft: (-fixedWidth) + 'px' }); } if (isFixedColumn && height > 0 && isScrollX) { fixedBody.setOuterHeight(height-17); } } if (isFixedColumn) { fixedHead = contentTable.clone(); fixedHead.initHead(true); fixedBody = contentTable.clone(); fixedBody.initBody(true); fixedHead.render(elFxHead); fixedBody.render(elFxBody); fixedHead.wrapper.addClass('fx-head-table fx-head-fixed fx-hidden-scroll'); fixedBody.wrapper.addClass('fx-body-table fx-hidden-scroll fx-body-fixed'); } // setTableLayout(); // 初始化 contentTable.initBody(); fHead.initHead(); // 渲染 fHead.render(elFxHead); contentTable.render(elFxBody); contentTable.on('onRenderData', function (data) { if (isFixedColumn) { fixedBody.renderData(data); } // 设置 布局 isScrollX = contentTable.wrapper[0].scrollWidth > width isScrollY = contentTable.wrapper[0].scrollHeight > height setTableLayout(); }); contentTable.wrapper.on('scroll', function () { fHead&&(fHead.wrapper[0].scrollLeft = this.scrollLeft); fixedBody && (fixedBody.wrapper[0].scrollTop = this.scrollTop); }); } Grid.prototype.render=function() { var that = this; this.initTable(); if (this.isFixedColumn || this.isScroll) { this.initFixedTable(); } else { this.contentTable.initHead(); this.contentTable.initBody(); this.contentTable.render({ append: function (child) { that.wrapper.html(child); } }); } } new Grid('#grid', { dataSource: { data: [{ name: "李三", rowspan:3, age: 43, work: '北京', work2: '上海' }, { name: "", rowspan:-1, age: 43, work: '北京', work2: '上海' }, { name: "", rowspan:-1, age: 43, work: '北京', work2: '上海' }, { name: "李四", age: 43, work: '北京', work2: '上海' }, { name: "李三", age: 43, work: '北京', work2: '上海' }, { name: "李四", age: 43, work: '北京', work2: '上海' }, { name: "李三", age: 43, work: '北京', work2: '上海' }, { name: "李四", age: 43, work: '北京', work2: '上海' }, { name: "李三", age: 43, work: '北京', work2: '上海' }, { name: "李四", age: 43, work: '北京', work2: '上海' }, { name: "李三", age: 43, work: '北京', work2: '上海' }, { name: "李四", age: 43, work: '北京', work2: '上海' }] }, width:700, height:150, columns: [ { title: '姓名', field: 'name', fixed: true, width: '200px', headAttrs: { style: 'text-align:center' }, rowSpan:function(row,c) { return row.rowspan; } }, { title: '年龄', field: 'age', width: 100, // fixed: , headAttrs: { style: 'text-align:center' } } , { title: '工作经历', headAttrs: { style: 'text-align:center' }, columns: [ { title: '工作经历2', headAttrs: { style: 'text-align:center' }, columns: [ { title: '工作经历2', field: 'work', width: 100, }, { title: '工作经历5', field: 'work2', width: 200, }] }, { title: '工作经历5', field: 'work2', width: 300, } ] }, { title: '呵呵', field: 'age', headAttrs: { style: 'text-align:center' }, width: 100, } ] }); }()); //$('#scrollBody').on('scroll', function () { // $('#scrollHead')[0].scrollLeft = this.scrollLeft; // $('#scrollBodyY')[0].scrollTop = this.scrollTop; //}); });
