ASP.NET中应用Excel：(6)在服务器端生成HTML表格

读写数据都完成了，现在来看看如何生成客户端界面。使用Atals的TabContainer是个不错的选择。比较的是如何保持单元格原有的格式，特别是在有单元格合并的情况下。

首先，你得有一个TabContainer控件在页面中，然后需要根据工作表的数量添加相应的TabPanel。可以以如下方式添加：

XmlNodeList sheet_node_list = xml.GetElementsByTagName("WORKSHEET");for (int m = 0; m < sheet_node_list.Count; m++) // 遍历所有的工作表{    AjaxControlToolkit.TabPanel panel = null; // TabPanel控件，我们的表格将放在其中    if (TabContainer1.Controls.Count < m + 1) // TabContainer可能包含有TabPanel，通常放置TabContainer控件后，会有1个    {        panel = new AjaxControlToolkit.TabPanel(); // 需要添加新的TabPanel        TabContainer1.Controls.Add(panel);    }    else        panel = TabContainer1.Tabs[m]; // 使用已经存在的TabPanel    panel.HeaderText = sheet_node_list[m].Attributes["name"].Value; // 将TabPanel的标签设置为工作表的名字    panel.ID = "Panel" + m; // 设置ID    panel.Attributes.Add("Width", sheet_node_list[m].Attributes["width"].Value); // 关于表格尺寸的获取，后面再说    panel.Attributes.Add("Height", sheet_node_list[m].Attributes["height"].Value);     int _rowNum = Math.Max(1, int.Parse(sheet_node_list[m].Attributes["row"].Value) + 1); // 获取表格最大行列数    int _colNum = Math.Max(1, int.Parse(sheet_node_list[m].Attributes["col"].Value) + 1);    // create table    Table tbl = new Table(); // 我们的表格，总是生成新滴    tbl.ID = panel.HeaderText + "_Table"; // 设置ID，其客户端ClintID将是ctrl_xxx_yy_工作表名_Table的形式，JS脚本将会用到    tbl.Attributes.Add("activeCell", "null"); // 当前活动的单元格，用于JS脚本    tbl.Attributes.Add("cellspacing", "0"); // 设置表格的界面表现格式    tbl.Attributes.Add("cellpadding", "0");    tbl.BorderColor = System.Drawing.Color.AliceBlue; // 加个边框    tbl.BorderStyle = BorderStyle.Solid;    tbl.BorderWidth = 1;    createTableHeader(tbl, _rowNum, _colNum);   // 创建表头，模拟Excel的行列标识    fillTableData(tbl, _rowNum, _colNum, sheet_node_list[m]); //填充单元格数据    panel.Controls.Add(tbl); //将表格添加到TabPanel中}

 最后在浏览器中显示的结果如下图所示：

 

 现在来看看createTableHeader()方法，该方法生成表头：

protected void createTableHeader(Table tbl, int _rowNum, int _colNum){    bool isHeaderCell = false; // 头部标志    // fill header    for (int r = 0; r < _rowNum; r++) // 遍历行    {       TableRow row = new TableRow(); // 生成行        for (int c = 0; c < _colNum; c++) // 遍历列        {            if ( c == 0 || r == 0 )            {                TableCell cell = new TableCell(); // 生成单元格                  isHeaderCell = false; // 初始化标志                  cell.Style.Add("border-left", "1px solid black"); // 设置格式                  cell.Style.Add("border-top", "1px solid black");                cell.Attributes.Add("width", "83pt"); // 默认宽度                  if ( c == 0 ) // 0列？                  {                    if (r == 0) // 0行？                       {                        cell.Text = " "; // 填个空格                           isHeaderCell = true; // 设置标志                       }                    else                    {                        cell.Text = r.ToString(); // 0列从1-N行表头，填行号                           isHeaderCell = true; // 设置标志                           if (r == _rowNum - 1) cell.Style.Add("border-bottom", "1px solid black"); // 最后一行，画底线                      }                }                else                {                    if ( r == 0 ) // N列(N大于0)0行，列头                       {                        cell.Text = getColLetter(c - 1); // 根据列号生成A-IV的列标识                           isHeaderCell = true; // 设置标志                       }                }                              if ( isHeaderCell ) // 设置表头格式：居中，silver色为底                  {                    cell.Attributes.Add("align", "center");                    cell.Style.Add("background-Color", "silver");                    row.Cells.Add(cell); // 添加单元格到行对象中                  }            }        }                row.Style.Add("border", "1px solid black"); // 设置行边框         tbl.Rows.Add(row); // 将行添加到列    }}

 其中用到的从列号生成A-IV型的Excel列标识的方法，作为课后作业，请同学自行完成。

 生成表头后，再向里面填充数据：

 

protected void fillTableData(Table tbl, int _rowNum, int _colNum, XmlNode  sheet_node){    tbl.Attributes.Add("cellpadding", "0"); // 添加表格属性     tbl.Attributes.Add("cellspacing", "0");     tbl.Style.Add("border-collapse", "collapse"); // 设置表格样式    tbl.Style.Add("table-layout", "fixed");    tbl.Style.Add("width", sheet_node.Attributes["width"].Value + "pt"); // 关于如何取得工作表尺寸的方法，后文再叙    tbl.Style.Add("border", "1px solid black"); // 黑色边框    foreach (XmlNode row_node in sheet_node.ChildNodes) // 遍历行    {        int rowIdx = int.Parse(row_node.Attributes["idx"].Value); //获取行号         tbl.Rows[rowIdx].Attributes.Add("height", row_node.Attributes["height"].Value); // 获取行高               if (row_node.ChildNodes.Count == 0) // 空行？        {           for (int i = 1; i <= _colNum - 1; i++) // 添加空单元格            {                tbl.Rows[rowIdx].Cells.Add(createEmptyCell());           }        }        else        foreach (XmlNode cell_node in row_node.ChildNodes) // 遍历行的单元格         {            int colIdx = int.Parse(cell_node.Attributes["col"].Value); // 列号            int colSpan = int.Parse(cell_node.Attributes["colspan"].Value); // 列合并的跨度            int rowSpan = int.Parse(cell_node.Attributes["rowspan"].Value); // 行合并的跨度            bool hasFormula = bool.Parse(cell_node.Attributes["hasFormula"].Value); // 包含公式？            if (cell_node.PreviousSibling != null) // 是不是第一个有数据的单元格？            {              // 如果相邻两个<CELL>不连续，需要填充中间部分                int prevColIdx = int.Parse(cell_node.PreviousSibling.Attributes["col"].Value), // 前一单元格的列号和列跨度                    prevColSpan = int.Parse(cell_node.PreviousSibling.Attributes["colspan"].Value);                if (prevColIdx + prevColSpan < colIdx) // 如果存在空档，则填充之                  {                    for (int i = prevColIdx + prevColSpan; i < colIdx; i++)                    {                        tbl.Rows[rowIdx].Cells.Add(createEmptyCell()); // 添加空单元格                       }                }            }            else            {                if (colIdx > 1) // 如果起始有数据的单元格不是第一列，则需要填充空白部分                {                    for (int i = 1; i < colIdx; i++)                    {                        tbl.Rows[rowIdx].Cells.Add(createEmptyCell());                    }                }            }            // 现在是戏肉部分，添加有数据的单元格             {                TableCell cell = new TableCell();                // 设置字体样式                  cell.Style.Add("font-family", cell_node.Attributes["font-name"].Value);                cell.Style.Add("color", cell_node.Attributes["font-color"].Value);                cell.Style.Add("font-size", cell_node.Attributes["font-size"].Value);                cell.Style.Add("border", "1px solid black");                cell.Style.Add("width", cell_node.Attributes["width"].Value);                // 设置尺寸                  cell.Attributes.Add("width", cell_node.Attributes["width"].Value);                cell.Attributes.Add("height", cell_node.Attributes["height"].Value);                // 设置对齐方式                  cell.Attributes.Add("align", cell_node.Attributes["align"].Value);                cell.Attributes.Add("valign", cell_node.Attributes["valign"].Value);                // 设置行列跨度                                  // 注意：没有直接设置rowspan属性，而是交给客户端脚本完成                  cell.Attributes.Add("_rowspan", cell_node.Attributes["rowspan"].Value);                cell.Attributes.Add("colspan", cell_node.Attributes["colspan"].Value);                                // 添加数据域                  cell.Attributes.Add("hasFormula", cell_node.Attributes["hasFormula"].Value);                cell.Attributes.Add("formula", cell_node.Attributes["formula"].Value);                cell.Attributes.Add("dataField", hasFormula ? cell_node.Attributes["formula"].Value : cell_node.Attributes["value2"].Value);                cell.Attributes.Add("value2", cell_node.Attributes["value2"].Value); // 使用value2，而不用value，避免与HTML元素属性的冲突                  if (hasFormula) cell.Attributes.Add("title", cell_node.Attributes["formula"].Value); // 添加悬停时的提示，这里只针对公式，也可以是普通单元格                  cell.Text = cell_node.Attributes["value2"].Value; // 设置显示的文本                  tbl.Rows[rowIdx].Cells.Add(cell); // 添加到行            }           // 如果没有后续，需要补完，直到列尾            if (cell_node.NextSibling == null && colIdx + colSpan < _colNum - 1)           {                for (int i = colIdx + 1; i <= _colNum - 1; i++)                {                    tbl.Rows[rowIdx].Cells.Add(createEmptyCell());                }            }        }// for each cell    } // for each row}

 生成空白单元格的方法实现如下：

 

protected TableCell createEmptyCell(){    TableCell cell = new TableCell();    cell.Style.Add("border", "1px solid black"); // 设置样式    cell.Attributes.Add("hasFormula", "false"); // 设置数据域    cell.Attributes.Add("formula", "");    cell.Attributes.Add("dataField", "");    cell.Attributes.Add("value2", "");    cell.Text = " "; // 设置显示的文本    return cell;}

 现在runat="server"端的表格生成工作已经完成，整个表格已经初具雏形，除了行跨度还有问题外。

通过以下脚本，可以解决行跨度问题。本节标题为“服务器端生成”，照理不应该使用客户端脚本，这里只是描述客户端如何实现相应的操作，理论上在服务器端也可以完成相当的工作：

 

for( var i = tbl.cells.length - 1; i > 1; i-- ) // 从后向前遍历行{    var ctrl = tbl.cells[i]; // 单元格对象    if ( ctrl.cellIndex > 0 && ctrl.parentElement.rowIndex > 0) // 0列0行不用处理    {        if ( ctrl._rowspan && ctrl._rowspan > 1 && // 跨度>1并且范围没有超过表格               ctrl.parentElement.rowIndex + 1 < tbl.rows.length )        {            for( var n = 1; n < ctrl._rowspan; n++ ) // 合并单元格              {                if ( ctrl.cellIndex < tbl.rows[ctrl.parentElement.rowIndex + 1].cells.length ) // 合并一次就判断是否超界                    tbl.rows[ctrl.parentElement.rowIndex + 1].deleteCell(ctrl.cellIndex); // 删除下一行同一列的单元格              }            ctrl.rowSpan = ctrl._rowspan; // 最后设置单元格的行跨度        }    }}

 为什么要从后向前遍历行呢？因为当删除一个单元格时，后面的单元格会向前移，倒序处理可以避免这种错位问题。