类似ListView ，htc组件

parseInt(toolbar.all.pageCount.value) == 0);

 toolbar.all.insertBtn.disabled = false;
 toolbar.all.updateBtn.disabled = (newPageCount == 0);
 toolbar.all.deleteBtn.disabled = eval(toolbar.all.updateBtn.disabled);

 toolbar.all.deleteBtnImg.style.filter = toolbar.all.deleteBtn.disabled ? 'gray' : '';
 toolbar.all.updateBtnImg.style.filter = toolbar.all.updateBtn.disabled ? 'gray' : '';

 sizeInput(toolbar.all.pageCount);
 sizeInput(toolbar.all.rowCount);

 for (i in navButtons)
 {
  toolbar.all[navButtons[i]].all[ navButtons[i] + 'Img'].src = 'images/' + navButtons[i] + (toolbar.all[navButtons[i]].disabled ? 'off' : '') + '.gif';
 }
}

/**
 * 数据页改变时调用
*/
function selectPage(){
 var e = window.event.srcElement;

 if (e.id == 'pageNumber')
  element.pageNumber = toolbar.all.pageNumber.value;
 if (e.id == 'first')
  element.pageNumber = 1;
 if (e.id == 'next')
  element.pageNumber = parseInt(pageNumber) + 1;
 if (e.id == 'prev')
  element.pageNumber = parseInt(pageNumber) - 1;
 if (e.id == 'last')
  element.pageNumber = toolbar.all.pageCount.value;

 element.drawData();
}

/**
 * 设定Form表单长度
 *
 * 参数：
 *  el: Form表单对象
*/
function sizeInput(el){
 el.size = el.value.length;
}

/**
 * listview表头单击时调用，进行排序
*/
function reorder(){
 if (element.table.rows.length == 1)
  return;

 var e = window.event.srcElement;
 if(e.tagName != "TD") e = e.parentElement;
 var co = 0;
 
 orderColumn = (e.cellIndex - co).toString();
  
 if(lvhead[orderColumn]._bOrder){  //该表头已经排过序
  lvhead[orderColumn]._orderSequence = (lvhead[orderColumn]._orderSequence == "asc") ? "desc" : "asc";
 }
 else{
  //该表头第一次排序
  lvhead[orderColumn]._orderSequence = "asc";
  lvhead[orderColumn]._bOrder = true;
 }
 //排序
 lvdata.sort(sortRows);

 //重画listview
 drawData();
}

/**
 * 数据排序用的，判断大小
 *
*/
function sortRows(x,y){
 var x1 = x[orderColumn]._value;
 var x2 = y[orderColumn]._value;

 if(lvhead[orderColumn]._dataType.toUpperCase() == "INTEGER"){ //数据类型是整形
  x1 = eval(x1);
  x2 = eval(x2);
 }
 else if(lvhead[orderColumn]._dataType.toUpperCase() == "DATE"){ //数据类型是日期
  x1 = parseInt(new Date(x1).getTime()/1000);
  x2 = parseInt(new Date(x2).getTime()/1000);
 }
 
 if(x1>x2){
  if(lvhead[orderColumn]._orderSequence == "asc")
   return 1;
  else
   return -1;
 }
 else if(x1<x2){
  if(lvhead[orderColumn]._orderSequence == "asc")
   return -1;
  else
   return 1;
 }
 else return 0;
}

/**
 * listview列样式对象
 * 参数：
 *  columnName: 字段名
 *  property: 字段样式
 *  pattern: 过滤条件
 *  applyToRow: 是否整行改变
*/
function columnStyle(columnName,property,pattern,applyToRow){
  this._columnName = columnName;
  this._property   = property;
  this._pattern    = pattern;
  this._applyToRow = applyToRow;
}

/**
 * 根据字段名设置数据格属性
 * 参数：
 *  columnName: 字段名
 *  property: 新属性
 *  pattern: 过滤条件
 *  applyToRow: 是否整行改变
*/
function setColumnProperty(columnName,property,pattern,applyToRow){
 var columnIndex = findColumn(columnName);
 if(columnIndex == -1) return;
 
 for(var r=0; r<lvdata.length; r++){
  for(var c=0; c<lvdata[r].length; c++){
   if(typeof(applyToRow) != "undefined" && applyToRow){
        //pattern参数不为空
    if(typeof(pattern) != "undefined" && pattern.length>0){
     if(lvdata[r][columnIndex]._value.indexOf(pattern) != -1)
      lvdata[r][c]._style = property;
    }
   }
   else{
        //pattern参数不为空
    if(typeof(pattern) != "undefined" && pattern.length>0){
     if(lvdata[r][columnIndex]._value.indexOf(pattern) != -1)
      lvdata[r][columnIndex]._style = property;
    }
    break;
   }
  }
 }
  lvstyle[lvstyle.length] = new columnStyle(columnName,property,pattern,applyToRow);
}

/**
 * 根据字段名格式化数据,并将格式化数据存放lvformat对象
 * 参数：
 *  columnName: 字段名
 *  arrHTML: 要替换的数据二维数组
*/
function formatColumnValue(columnName,arrHTML){
 var columnIndex = findColumn(columnName);
 if(columnIndex == -1) return;
 
 if(typeof(arrHTML) != "object") return;

 var tmp = new Object();
 for(var i=0; i<arrHTML.length; i++){
  tmp[arrHTML[i][0]] = arrHTML[i][1];
 }

 lvformat[columnName] = tmp;
}

/**
 * 根据字段名查找位置索引
 * 参数：
 *  columnName: 字段名
 * 返回：
  字段名位置索引值
*/
function findColumn(columnName){
 var result = -1;
 for(var i=0; i<lvhead.length; i++){
  if(lvhead[i]._columnName == columnName){
   result = i;
   break;
  }
 }
 return result;
}

/**
 * 根据newXMLStr数据动态增加数据数组，并重画listview
 * 参数：
 *  newXMLStr: 新XML数据
 *  mode: 更新数据模式[add:增加数据 overlay:覆盖数据]
*/
function reload(newXMLStr,mode){
 XmlDoc.loadXML(newXMLStr);
 var rows = XmlDoc.documentElement.childNodes;
 var fields;
 if(typeof(mode) != "undefined" && mode == "overlay"){
  //覆盖原始数据
    lvdata = new Array();
  for(var r=0;r<rows.length;r++){
   if(r>=maxRowCount){
    alert(text["maxRowCount"]);
    break;
   }
   fields = rows[r].childNodes;
   if(r>=lvdata.length) lvdata[r] = new Array();
   var pos;
   for(var i=0;i<fields.length;i++){
    pos = findColumnProperty(i,fields[i].text);
    if(pos != -1){
     for(var j=0;j<fields.length;j++){
      lvdata[r][j] = new data(fields[j].text,lvstyle[pos]._property);
     }
     break;
    }
    else
     lvdata[r][i] = new data(fields[i].text,"backgroundColor:#ffffff;color:#000000;cursor:default");
   }
  }  
 }
 else{
  var new_lvdata = new Array();
  //载入新数据
  for(var r=0;r<rows.length;r++){
   if(r>=maxRowCount){
    alert(text["maxRowCount"]);
    break;
   }
   fields = rows[r].childNodes;
   new_lvdata[r] = new Array();
   var pos;
   for(var i=0;i<fields.length;i++){
    pos = findColumnProperty(i,fields[i].text);
    if(pos != -1){
     for(var j=0;j<fields.length;j++){
      new_lvdata[r][j] = new data(fields[j].text,lvstyle[pos]._property);
     }
     break;
    }
    else
     new_lvdata[r][i] = new data(fields[i].text,"backgroundColor:#ffffff;color:#000000;cursor:default");
   }
  }

  var totalRow = lvdata.length+new_lvdata.length;
  if(totalRow > maxRowCount){ //假如总数据大于最大数目则截断多余的旧数据
   var trunLn = totalRow - maxRowCount;
   var start = lvdata.length-trunLn-1;
   if(start<0) start = 0;
   //JScript5.5支持
   lvdata.splice(start,trunLn);
  }
  //将新数据加入lvdata数组
  lvdata = new_lvdata.concat(lvdata);
 }
 drawData();
}

/**
 * 根据pos，value在过滤条件数组对象查找列的Property
 * 参数：
 *  pos: 当前列索引序号
 *    value: 当前列的值
 * 返回：
  找到返回索引序号，否则返回-1
*/
function findColumnProperty(pos,value){
 for(var i=0; i<lvstyle.length; i++){
  if(lvhead[pos]._columnName == lvstyle[i]._columnName){
   if(value.indexOf(lvstyle[i]._pattern) != -1)
    return i;
  }
 }
 return -1;
}
</SCRIPT>
lvlang.xml：
<?xml version="1.0" encoding="gb2312"?>
<lvlang>
<!-- Grid -->
<!-- Button hints -->
 <searchTitle>填写搜索条件</searchTitle>
 <updateTitle>更新选择记录</updateTitle>
 <firstTitle>第一页</firstTitle>
 <prevTitle>向前翻一页</prevTitle>
 <nextTitle>向后翻一页</nextTitle>
 <lastTitle>最后一页</lastTitle>
 <insertTitle>增加一条新记录</insertTitle>
 <deleteTitle>删除选择记录</deleteTitle>
 <saveTitle>保存Grid (格式：HTML, Word or Excel)</saveTitle>
 <copyTitle>拷贝Grid到剪贴板</copyTitle>
 <helpTitle>显示Listview帮助</helpTitle>
 <columnPickerTitle>选择Grid列</columnPickerTitle>
 <clipboardCopy>拷贝Grid数据到剪贴板</clipboardCopy>
 <sortTitle>增加排序字段</sortTitle>
 <printTitle>打印Grid数据</printTitle>
 <viewTitle>显示选择记录</viewTitle>

<!-- Text -->
 <searchText>搜索</searchText>
 <updateText>更新</updateText>
 <firstText>首页</firstText>
 <prevText>上一页</prevText>
 <nextText>下一页</nextText>
 <lastText>尾页</lastText>
 <insertText>插入</insertText>
 <deleteText>删除</deleteText>
 <saveText>保存</saveText>
 <copyText>拷贝</copyText>
 <helpText>帮助</helpText>
 <columnPickerText>所有列</columnPickerText>
 <sortText>排序</sortText>
 <printText>打印</printText>
 <viewText><![CDATA[<u>V</u>iew]]></viewText>

 <page>页</page>
 <of>共</of>
 <rows>行</rows>
<!-- alarm -->
 <maxRowCount>数据大于允许的最大数目，自动截断！</maxRowCount>
</lvlang>
TestListview2_0_2.htm：
<HTML XMLNS:mylist>
<?IMPORT NAMESPACE="mylist" IMPLEMENTATION="listview2_0_2.htc"/>
<HEAD>
<TITLE> Test ListView </TITLE>
<style>
table.lvtoolbar {font-family:tahoma;font-size:8pt;}
select.lv {font-family:tahoma;font-size:8pt;border:1pt solid dimgray}
input.lv {font-family:tahoma;font-size:8pt;border:1pt solid dimgray;text-align:right}
tr.lvheading {background-color:gainsboro;cursor:hand}
td.lvheading {padding:0px}
table.lvheading {font-family:tahoma;font-size:8pt;height:100%;width:100%;border:1pt outset;padding:0px;}
table.lv {font-family:tahoma;font-size:8pt;border-color:DimGray;border-collapse:collapse;}
.head{
 background-color: #DFDFDF;
 border-left:solid #ffffff 1.5px;
 border-top:solid #ffffff 1.5px;
 border-right:solid #808080 1.8px;
 border-bottom:solid #808080 1.8px;
 padding-left: 1px;
 padding-top: 3px;
 padding-bottom: 1px;
 text-align:left;
 font-size: 12px;
 cursor:hand;
}

TD{
 font-size: 12px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function clickRow(){
 //return;
}

var alarmLevel = new Array(4);
alarmLevel[0] = new Array("1","正常日志");
alarmLevel[1] = new Array("2","一般告警");
alarmLevel[2] = new Array("3","次要告警");
alarmLevel[3] = new Array("4","严重告警");

var alarmFlag = new Array(2);
alarmFlag[0] = new Array("false","&nbsp;");
alarmFlag[1] = new Array("true","<img src='http://edu.chinaz.com/Get/Program/Program_Other/images/check.png'>");

function initialize(){
 oList.setColumnProperty('Severity','backgroundColor:red;color:#000000;cursor:default','4',true);
  oList.setColumnProperty('Severity','backgroundColor:yellow;color:#000000;cursor:default','3',true);
 oList.setColumnProperty('Severity','backgroundColor:#EFD887;color:#000000;cursor:default','2',true);
  oList.setColumnProperty('Severity','backgroundColor:#F9EFD0;color:#000000;cursor:default','1',true);
 oList.formatColumnValue('Severity',alarmLevel);
 oList.formatColumnValue('acknowledged',alarmFlag);
 oList.maxRowCount = "50";
 oList.pageSize = "20";
 oList.drawData();
}
function test2(){
 oList.selectedRowBackgroundColour = "#0000A0";
}
function addData(){
 oList.reload("<Output><ROW><ID>1898673</ID><CreatorName>hwlscheck</CreatorName><SourceIP>218.2.116.50_0.0.5.2</SourceIP><acknowledged>false</acknowledged><CreationTime>Fri Dec 05 14:42:18 CST 2003</CreationTime><Severity>2</Severity><EventNo>2</EventNo><DeviceType>2</DeviceType><SourceName>218.2.116.50_0.0.5.2</SourceName><DisplayTitle>设备告警</DisplayTitle><DisplayString>交换机8端口的状态变为enable/down</DisplayString></ROW><ROW><ID>1898702</ID><CreatorName>hwlscheck</CreatorName><SourceIP>218.2.119.26_0.0.1.5</SourceIP><acknowledged>false</acknowledged><CreationTime>Fri Dec 05 14:42:56 CST 2003</CreationTime><Severity>2</Severity><EventNo>2</EventNo><DeviceType>2</DeviceType><SourceName>218.2.119.26_0.0.1.5</SourceName><DisplayTitle>设备告警</DisplayTitle><DisplayString>交换机24端口的状态变为enable/down</DisplayString></ROW><ROW><ID>1898671</ID><CreatorName>Trap Probe 1</CreatorName><SourceIP>172.20.0.51</SourceIP><acknowledged>true</acknowledged><CreationTime>Fri Dec 05 14:42:18 CST 2003</CreationTime><Severity>3</Severity><EventNo>1.3.6.1.6.3.1.1.5.3</EventNo><DeviceType>1</DeviceType><SourceName>172.20.0.51</SourceName><DisplayTitle>linkDown 描述:通信链路失效</DisplayTitle><DisplayString>harbourSlotNumber(槽号)--6. ifIndex(接口索引号)--14.</DisplayString></ROW><ROW><ID>1898672</ID><CreatorName>hwlscheck</CreatorName><SourceIP>218.2.116.50_0.0.5.1</SourceIP><acknowledged>false</acknowledged><CreationTime>Fri Dec 05 14:42:18 CST 2003</CreationTime><Severity>2</Severity><EventNo>2</EventNo><DeviceType>2</DeviceType><SourceName>218.2.116.50_0.0.5.1</SourceName><DisplayTitle>设备告警</DisplayTitle><DisplayString>交换机7端口的状态变为enable/down</DisplayString></ROW><ROW><ID>1898669</ID><CreatorName>hwlscheck</CreatorName><SourceIP>61.155.233.242_0.0.1.3</SourceIP><acknowledged>true</acknowledged><CreationTime>Fri Dec 05 14:42:18 CST 2003</CreationTime><Severity>4</Severity><EventNo>2</EventNo><DeviceType>2</DeviceType><SourceName>61.155.233.242_0.0.1.3</SourceName><DisplayTitle>设备告警</DisplayTitle><DisplayString>交换机24端口的状态变为enable/down</DisplayString></ROW><ROW><ID>1898703</ID><CreatorName>Trap Probe 1</CreatorName><SourceIP>172.20.0.51</SourceIP><acknowledged>false</acknowledged><CreationTime>Fri Dec 05 14:42:59 CST 2003</CreationTime><Severity>2</Severity><EventNo>1.3.6.1.6.3.1.1.5.4</EventNo><DeviceType>1</DeviceType><SourceName>172.20.0.51</SourceName><DisplayTitle>linkUp 描述:通信链路恢复正常</DisplayTitle><DisplayString>harbourSlotNumber(槽号)--3. ifIndex(接口索引号)--6.</DisplayString></ROW><ROW><ID>1898677</ID><CreatorName>hwlscheck</CreatorName><SourceIP>218.2.117.214_0.0.3.3</SourceIP><acknowledged>true</acknowledged><CreationTime>Fri Dec 05 14:42:21 CST 2003</CreationTime><Severity>2</Severity><EventNo>2</EventNo><DeviceType>2</DeviceType><SourceName>218.2.117.214_0.0.3.3</SourceName><DisplayTitle>设备告警</DisplayTitle><DisplayString>交换机8端口的状态变为enable/down</DisplayString></ROW><ROW><ID>1898699</ID><CreatorName>Syslog Probe 1;</CreatorName><SourceIP>192.168.2.54</SourceIP><acknowledged>false</acknowledged><CreationTime>Fri Dec 05 14:42:53 CST 2003</CreationTime><Severity>2</Severity><EventNo>VMAN-1-VMAN</EventNo><DeviceType>0</DeviceType><SourceName>192.168.2.54</SourceName><DisplayTitle>VMAN-1-VMAN</DisplayTitle><DisplayString>一般告警: 2003年12月05日 星期五 14时42分46秒 gsr12016-192.168.2.54(192.168.2.54) Et0(1) 端口流出速度为8655584.000000超过了上限8500000.000000</DisplayString></ROW><ROW><ID>1898692</ID><CreatorName>hwlscheck</CreatorName><SourceIP>218.2.116.154_0.0.0.2</SourceIP><acknowledged>false</acknowledged><CreationTime>Fri Dec 05 14:42:45 CST 2003</CreationTime><Severity>3</Severity><EventNo>2</EventNo><DeviceType>2</DeviceType><SourceName>218.2.116.154_0.0.0.2</SourceName><DisplayTitle>设备告警</DisplayTitle><DisplayString>交换机7端口的状态变为enable/up</DisplayString></ROW><ROW><ID>1898666</ID><CreatorName>hwlscheck</CreatorName><SourceIP>61.155.233.242_0.0.0.2</SourceIP><acknowledged>false</acknowledged><CreationTime>Fri Dec 05 14:42:17 CST 2003</CreationTime><Severity>2</Severity><EventNo>2</EventNo><DeviceType>2</DeviceType><SourceName>61.155.233.242_0.0.0.2</SourceName><DisplayTitle>设备告警</DisplayTitle><DisplayString>交换机2端口的状态变为enable/down</DisplayString></ROW><ROW><ID>1898697</ID><CreatorName>hwlscheck</CreatorName><SourceIP>218.2.117.198_0.0.0.6</SourceIP><acknowledged>false</acknowledged><CreationTime>Fri Dec 05 14:42:53 CST 2003</CreationTime><Severity>1</Severity><EventNo>2</EventNo><DeviceType>2</DeviceType><SourceName>218.2.117.198_0.0.0.6</SourceName><DisplayTitle>设备告警</DisplayTitle><DisplayString>交换机4端口的状态变为enable/up</DisplayString></ROW></Output>","overlay");
}
//-->
</SCRIPT>
</HEAD>

<BODY onload="initialize()">
<h3 class="Title">Listview HTC for ILOG JTGO: Custom Classes</h3>
<mylist:listview ID="oList" dataXML="<Output>
 <Columns>
    <Column1>
    <fieldname>ID</fieldname>
    <description>中文描述1</description>
    <datatype>String</datatype>
    </Column1>
    <Column2>
    <fieldname>CreatorName</fieldname>
    <description>中文描述2</description>
    <datatype>String</datatype>
    </Column2>
    <Column3>
    <fieldname>SourceIP</fieldname>
    <description>中文描述3</description>
    <datatype>String</datatype>   
    </Column3>
    <Column4>
    <fieldname>acknowledged</fieldname>
    <description>中文描述4</description>
    <datatype>String</datatype>   
    </Column4>
    <Column5>
    <fieldname>CreationTime</fieldname>
    <description>中文描述5</description>
    <datatype>Date</datatype>   
    </Column5>
    <Column6>
    <fieldname>Severity</fieldname>
    <description>中文描述6</description>
    <datatype>String</datatype>   
    </Column6>
    <Column7>
    <fieldname>EventNo</fieldname>
    <description>中文描述7</description>
    <datatype>String</datatype>   
    </Column7>
    <Column8>
    <fieldname>DeviceType</fieldname>
    <description>中文描述8</description>
    <datatype>String</datatype>   
    </Column8>
    <Column9>
    <fieldname>SourceName</fieldname>
    <description>中文描述9</description>
    <datatype>String</datatype>   
    </Column9>
    <Column10>
    <fieldname>DisplayTitle</fieldname>
    <description>中文描述10</description>
    <datatype>String</datatype>   
    </Column10>
    <Column11>
    <fieldname>DisplayString</fieldname>
    <description>中文描述11</description>
    <datatype>String</datatype>   
    </Column11>
 </Columns>
 <ROW>
<ID>1898698</ID>
<CreatorName>hwlscheck</CreatorName>
<SourceIP>218.2.117.198_0.0.1.0</SourceIP>
<acknowledged>false</acknowledged>
<CreationTime>Fri Dec 05 14:42:53 CST 2003</CreationTime>
<Severity>2</Severity>
<EventNo>2</EventNo>
<DeviceType>2</DeviceType>
<SourceName>218.2.117.198_0.0.1.0</SourceName>
<DisplayTitle>设备告警</DisplayTitle>
<DisplayString>交换机5端口的状态变为enable/up</DisplayString>
</ROW>
<ROW>
<ID>1898706</ID>
<CreatorName>Trap Probe 1</CreatorName>
<SourceIP>172.20.0.51</SourceIP>
<acknowledged>true</acknowledged>
<CreationTime>Fri Dec 05 14:43:07 CST 2003</CreationTime>
<Severity>4</Severity>
<EventNo>1.3.6.1.6.3.1.1.5.4</EventNo>
<DeviceType>1</DeviceType>
<SourceName>172.20.0.51</SourceName>
<DisplayTitle>linkUp 描述:通信链路恢复正常</DisplayTitle>
<DisplayString>harbourSlotNumber(槽号)--6. ifIndex(接口索引号)--14.</DisplayString>
</ROW>
<ROW>
<ID>1898681</ID>
<CreatorName>hwlscheck</CreatorName>
<SourceIP>218.2.118.202_0.0.0.4</SourceIP>
<acknowledged>false</acknowledged>
<CreationTime>Fri Dec 05 14:42:22 CST 2003</CreationTime>
<Severity>2</Severity>
<EventNo>2</EventNo>
<DeviceType>2</DeviceType>
<SourceName>218.2.118.202_0.0.0.4</SourceName>
<DisplayTitle>设备告警</DisplayTitle>
<DisplayString>交换机6端口的状态变为enable/up</DisplayString>
</ROW>
<ROW>
<ID>1898691</ID>
<CreatorName>Trap Probe 1</CreatorName>
<SourceIP>218.2.116.74</SourceIP>
<acknowledged>true</acknowledged>
<CreationTime>Fri Dec 05 14:42:36 CST 2003</CreationTime>
<Severity>3</Severity>
<EventNo>1.3.6.1.4.1.2011.2.6.2.0.268503561</EventNo>
<DeviceType>0</DeviceType>
<SourceName>218.2.116.74</SourceName>
<DisplayTitle>unknown trap event.</DisplayTitle>
<DisplayString>hwIPPoolName--adsl.</DisplayString>
</ROW>
<ROW>
<ID>1898688</ID>
<CreatorName>hwlscheck</CreatorName>
<SourceIP>61.155.233.230_0.0.1.3</SourceIP>
<acknowledged>false</acknowledged>
<CreationTime>Fri Dec 05 14:42:30 CST 2003</CreationTime>
<Severity>3</Severity>
<EventNo>2</EventNo>
<DeviceType>2</DeviceType>
<SourceName>61.155.233.230_0.0.1.3</SourceName>
<DisplayTitle>设备告警</DisplayTitle>
<DisplayString>交换机13端口的状态变为enable/up</DisplayString>
</ROW>

</Output>" width="700" height="300" onRowSelected="clickRow()" />
<br>
<br>
<button onclick="addData()">Add New Data</button>
<button onclick="test2()">Change SelectRow backgroundColor</button>
</BODY>
</HTML>

关键词：类似ListView ，htc组件