模拟Windows Listview的HTC组件

本文属spanzhang原创，其blog地址为：http://blog.csdn.net/spanzhang。引用或转贴请注明出处，谢谢！！
在开发B/S应用时，经常需要以列表的形式显示数据，但HTML的TABLE却显得很不够用。这里给出的是我自己的Listview模拟控件，它主要有如下几个特点：
1、Header和Columns都可以灵活配置；
2、Columns可以拖动；
3、支持单选和多选模式；
4、支持鼠标双击（引发事件）。

效果图如下：

HTC组件源代码如下（htc_listView.htc）：
<!--

作者：张友邦
时间：2004-12-01
描述：表格控件

-->

<!--
 接口定义
-->
<public:component>
 <public:property name="description"    value="Span ListView Behavior" />
 <public:property name="version"     value="1.0.0.0" />
 
 <public:attach  event="oncontentready"   onevent="init()"   />
 <public:attach  event="onselectstart"   onevent="cancelSelect()" />
 <public:attach  event="onresize"    onevent="resize()"   />
 <public:attach  event="onmousemove"    onevent="mouseMove()"  />
 <public:attach  event="onmouseup"    onevent="mouseUp()"   />

 <public:property name="headImage"    value="/spanClient/htc_listView.htc.res/headerBg.gif"  />
 <public:property name="splitterImage"   value="/spanClient/htc_listView.htc.res/headerSplit.gif" />
 <public:property name="defStyle1"    value="background-color: #DADFF1" />
 <public:property name="defStyle2"    value="background-color: #B9C1DD" />
 <public:property name="defStyle11"    value="background-color: #000000; color: #FFFFFF" />
 <public:property name="defStyle22"    value="background-color: #000064; color: #FFFFFF" />
 <public:property name="singleSelect"    value="true" />
 <public:property name="freezeCols"    value="false" />

 <public:property name="header"  />
 <public:property name="columns"  />
 <public:property name="dataTable" />
 <public:property name="rows"   />
 <public:property name="selectedRows" />

 <public:method  name="addColumn" />
 <public:method  name="addRow"  />
 <public:method  name="delRow"  />
 <public:method  name="selectRow" />
 <public:method  name="clearSelect" />

 <public:event  name="onSelChange"    id="selChange" />
 <public:event  name="onWantEdit"    id="wantEdit" />
 <public:event  name="onHeadClick"    id="headClick" />
</public:component>

<!--
 组件实现
-->
<script language="javascript">
var headerWidth = 0;  //表头宽度
var bodySpan = null;  //体对象
var downType = -1;  //鼠标点下去的类型，点在不同地方会有不同的类型
var objSizeItem = null;  //拖动线

//列对象
function column(colHeader, splitter, style1, style2, style11, style22)
{
 this.colHeader = colHeader;
 this.splitter = splitter;

 this.style1 = style1; //第一种未选中样式
 if (this.style1 == null) this.style1 = defStyle1;
 this.style2 = style2; //第二种未选中样式
 if (this.style2 == null) this.style2 = defStyle2;
 this.style11 = style11; //第一种选中状态样式
 if (this.style11 == null) this.style11 = defStyle11;
 this.style22 = style22; //第一种选中状态样式
 if (this.style22 == null) this.style22 = defStyle22;
}

//内部函数，事件oncontentready，初始化
function init()
{
 var rs = element.children[0].recordset;

 //基本属性
 columns   = new Array();
 selectedRows = new Array();
 element.style.overflow = "hidden";

 //构造表头
 header = document.createElement("SPAN");
 with (header.style)
 {
  width  = "2048";
  height = 20;
  backgroundImage = "url(" + headImage + ")";
  cursor = "default";
 }
 element.insertAdjacentElement("beforeEnd", header);
 
 //构造BODY
 bodySpan = document.createElement("SPAN");
 with (bodySpan.style)
 {
  overflow = "auto";
  cursor = "default";
 }
 bodySpan.attachEvent("onscroll", bodyScroll);
 element.insertAdjacentElement("beforeEnd", bodySpan);
 
 dataTable = document.createElement("TABLE");
 with (dataTable)
 {
  cellSpacing = 0;
  cellPadding = 0;
  width = 1;
  borderColor = "#305D03";
 }
 bodySpan.insertAdjacentElement("beforeEnd", dataTable);
 rows = dataTable.rows;

 //拖动线
 if (freezeCols == 'false')
 {
  objSizeItem = window.document.createElement("DIV") ;
  with (objSizeItem.style)
  {
   backgroundColor = "black" ;
   cursor = "col-resize";
   position = "absolute" ;
   border = "none";//"solid 0px" ;
   width = "1px" ;
   zIndex = 3000 ;
   visibility = "hidden" ;
  }
  window.document.body.insertAdjacentElement("beforeEnd", objSizeItem);
 }

 //插入所有的列
 var style1, style2, style11, style22;
 for (var i = 0; rs != null && !rs.EOF; ++i)
 {
  try {style1 = new String(rs('style1'));} catch(e) {style1 = defStyle1;}
  if (style1 == 'null') style1 = defStyle1;
  try {style2 = new String(rs('style2'));} catch(e) {style2 = defStyle2;}
  if (style2 == 'null') style2 = defStyle2;
  try {style11 = new String(rs('style11'));} catch(e) {style11 = defStyle11;}
  if (style11 == 'null') style11 = defStyle11;
  try {style22 = new String(rs('style22'));} catch(e) {style22 = defStyle22;}
  if (style22 == 'null') style22 = defStyle22;

  addColumn(rs('width'), rs('text'), style1, style2, style11, style22);

  rs.moveNext();
 }
 
 //调整布局
 resize();
}

//方法，创建列
function addColumn(colWidth, colContent, style1, style2, style11, style22)
{
 var colIndex = columns.length;
 columns[colIndex] = new column
 (
  document.createElement("SPAN"),
  document.createElement("SPAN"),
  style1,  style2,
  style11, style22
 );
 
 //列标题栏
 columns[colIndex].colHeader.innerHTML = colContent;
 with (columns[colIndex].colHeader.style)
 {
  width = colWidth;
  height = 20;
  textAlign = "center";
  backgroundImage = "url(" + headImage + ")";
  overflow = 'hidden';
  headerWidth += parseInt(colWidth) + 4;
 }
 columns[colIndex].colHeader.onclick = new Function("var eventObject = createEventObject();eventObject.colIndex = "
  + colIndex + ";headClick.fire(eventObject);");
 header.insertAdjacentElement("beforeEnd", columns[colIndex].colHeader);