模拟Windows Listview的HTC组件

 //分隔条
 with (columns[colIndex].splitter)
 {
  position = "absolute" ;
  if (freezeCols == 'false')
   onmousedown = new Function("splitterDown(" + colIndex + ")");
 }
 with (columns[colIndex].splitter.style)
 {
  left = headerWidth - 4;
  width = 4;
  height = 20;
  if (freezeCols == 'false')
   cursor = "col-resize";
  backgroundImage = "url(" + splitterImage + ")";
 }
 header.insertAdjacentElement("beforeEnd", columns[colIndex].splitter);

 //调整dataTable的宽度
 dataTable.width = headerWidth - 2;
}

//内部函数，事件onresize
function resize()
{
 with (bodySpan.style)
 {
  width = parseInt(element.clientWidth);
  height = parseInt(element.clientHeight) - 20;
 }
}

//内部函数，体滚动事件onscroll
function bodyScroll()
{
 header.style.marginLeft = (-window.event.srcElement.scrollLeft) ;
}

//取消选择
function cancelSelect()
{
 with (window.event)
 {
  cancelBubble = true ;
  returnValue = false ;
 }
 return false ;
}

var downSpliterIndex = -1;
var eventX1;
var eventX2;

//内部函数，分隔条点下
function splitterDown(index)
{
 with (window.event)
 {
  eventX1 = parseInt(clientX);
  cancelBubble = true;
  returnValue = false;
 }
 element.setCapture();

 downSpliterIndex = index;
 downType = 1;
 with (objSizeItem.style)
 {
  top = element.offsetTop;
  height = element.offsetHeight;
  posLeft = window.event.clientX - 3;
  visibility = "visible";
 }
}

//内部函数，事件onmousemove
function mouseMove()
{
 switch (true)
 {
  case downType == 1:
   objSizeItem.style.posLeft = window.event.clientX - 2;
  break;

  default:
  break;
 }
}

//内部函数，事件onmouseup
function mouseUp()
{
 if (downType == -1)
  return;
  
 with (window.event)
 {
  eventX2 = parseInt(clientX);
  cancelBubble = true;
  returnValue = false;
 }

 switch (true)
 {
  case downType == 1:
   var dx = eventX2 - eventX1;
   var colWidth = parseInt(columns[downSpliterIndex].colHeader.style.width);
   if (colWidth + dx < 1) dx = 1-colWidth;
   colWidth += dx;
   columns[downSpliterIndex].colHeader.style.width = colWidth;
   dataTable.width = parseInt(dataTable.width) + dx;

   for (var i = 0; i < rows.length; ++i)
   {
    //setRowCss(rows[i]);
    for (var j = 0; j < columns.length; ++j)
    {
     if (j == 0)
      rows[i].children[j].style.width = parseInt(columns[j].colHeader.style.width) + 2;
     else
      rows[i].children[j].style.width = parseInt(columns[j].colHeader.style.width) + 4;
    }
   }

   setColWidth();

   header.style.marginLeft = (-bodySpan.scrollLeft);
  break;

  default:
  break;
 }
 
 element.releaseCapture();
 objSizeItem.style.visibility = "hidden";
 downType = -1;
}

//行的事件：click
function clickRow(rowIndex)
{
 if (!window.event.ctrlKey || singleSelect == 'true')
 {
  for (var i = 0; i < selectedRows.length; ++i)
  {
   if (selectedRows[i].rowIndex >= 0)
    selectRow(selectedRows[i].rowIndex, false);
  }
  selectedRows.length = 0;
 }

 if (rowIndex >= 0)
  selectRow(rowIndex, !rows[rowIndex].selected);
}

//内部函数，设置一行选种样式
function setRowCss(row, selected)
{
 if (selected == null)
  selected = row.selected;
 if (selected == null)
  selected = false;

 if (!selected)
 {
  if (row.rowIndex % 2 == 0)
  {
   for (var i = 0; i < row.children.length; ++i)
    row.children[i].style.cssText = columns[i].style1;
  }
  else
  {
   for (var i = 0; i < row.children.length; ++i)
    row.children[i].style.cssText = columns[i].style2;
  }
 }
 else
 {
  if (row.rowIndex % 2 == 0)
  {
   for (var i = 0; i < row.children.length; ++i)
    row.children[i].style.cssText = columns[i].style11;
  }
  else
  {
   for (var i = 0; i < row.children.length; ++i)
    row.children[i].style.cssText = columns[i].style22;
  }
 }

 for (var i = 0; i < row.children.length; ++i)
 {
  if (i == 0)
   row.children[i].style.width = parseInt(columns[i].colHeader.style.width) + 2;
  else
   row.children[i].style.width = parseInt(columns[i].colHeader.style.width) + 4;
 }

 row.selected = selected
}

//方法实现，设置某一行的选种状态
function selectRow(rowIndex, selected)
{
 var row = rows[rowIndex];
 if (row == null)
  return row;

 if (selected)
 {
  setRowCss(row, true);

  if (selectedRows.length > 0 && selectedRows[selectedRows.length - 1].rowIndex == rowIndex);
  else
  {
   selectedRows[selectedRows.length] = row;
   selChange.fire();
  }
 }
 else
 {
  setRowCss(row, false);
 }
 
 return row;
}

//方法实现
function clearSelect()
{
 clickRow(-1);
}

//内部函数
function setColWidth()
{
 if (rows.length <= 0)
  return;
  
 var tableWidth = 0;
 for (var i = 0; i < columns.length; ++i)
 {
  if (i == 0)
   columns[i].colHeader.style.width = rows[0].children[i].clientWidth - 2;
  else
   columns[i].colHeader.style.width = rows[0].children[i].clientWidth - 4;

  tableWidth += parseInt(columns[i].colHeader.style.width) + 4;
 }
 dataTable.width = tableWidth - 2;
}

//方法实现
function addRow(rowData)
{
 var row = dataTable.insertRow();
 row.onmousedown = new Function("clickRow(" + row.rowIndex + ")");
 row.ondblclick = new Function("var eventObject = createEventObject();eventObject.rowIndex = "
  + row.rowIndex + ";wantEdit.fire(eventObject);");

 for (var i = 0; i < rowData.length; ++i)
 {
  var td = row.insertCell();
  td.innerHTML = rowData[i];
 }
 setRowCss(row, false);

 //setColWidth();
 
 return row;
}

Array.prototype.remove = function(dx)
{
 if(isNaN(dx)||dx>this.length){return false;}
 this.splice(dx, 1);
}

//方法实现
function delRow(rowIndex)
{
 dataTable.deleteRow(rowIndex);
 
 //重新格式化
 for (var i = 0; i < rows.length; ++i)
 {
  rows[i].onmousedown = new Function("clickRow(" + i + ")");
  rows[i].ondblclick = new Function("wantEdit.fire(" + i + ")");
  setRowCss(rows[i], false);
 }
 
 //如果删除了已经选中的
 var k = -1;
 for (var i = 0; i < selectedRows.length; ++i)
 {
  if (selectedRows[i].rowIndex == -1)
   k = i;
  else
   setRowCss(selectedRows[i], true);
 }
 if (k >= 0)
  selectedRows.remove(k); 
}
</script>

测试文件（test_htc_listView.aspx）如下：
<%@ Page language="c#" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
 <HEAD>
  <title>test_htc_listView</title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  <script>
    function init()
    {
  lv1.addColumn
  (
   200,
   "Added",
   "color:green;BORDER-BOTTOM: green 1px dashed;BACKGROUND-COLOR: #EED881",
   "color:green;BORDER-BOTTOM: green 1px dashed;BACKGROUND-COLOR: #EFE6C1",
   "color:white;BORDER-BOTTOM: green 1px dashed;BACKGROUND-COLOR: black",
   "color:white;BORDER-BOTTOM: green 1px dashed;BACKGROUND-COLOR: black"
  );
    }
   
    function addData()
    {
  var data = new Array();
  data[1] = "kasdkf<br>kaskd";
  data[2] = "Liuk<br>as";
  data[3] = "com<br>asss";
  data[4] = "FF";
  data[5] = "gaGG";