类似ListView ，htc组件

listview2_0_2.htc：

<public:component tagName="listview" lightweight=true>

<public:attach event="oncontentready" onevent="oncontentready()" />

<public:property name="width" />

<public:property name="height" />

<public:property name="dataXML" />

<public:property name="XmlDoc" />

<public:property name="text" >

<public:property name="currentRow" />

<public:property name="selectedRowBackgroundColour" value="steelblue" />

<public:property name="selectedRowColour" value="white" />

<public:property name="lvdata" />

<public:property name="lvhead" />

<public:property name="toolbarDisplay" value="" />

<public:property name="toolbar" />

<public:property name="table" />

<public:property name="listTable" />

<public:property name="displayToolbar" value="true" />

<public:property name="toolbarDisplay" value=""/>

<public:property name="wrapHeadings" value="true" />

<public:property name="saveOptions" value="[['html','HTML'],['word','Word'],['excel','Excel'],['xml','XML']]"/>

<public:property name="smallButtons" value="true">

<public:property name="pageSize" value="25"/>

<public:property name="pageNumber" value="1"/>

<public:property name="pageCount" value="0"/>

<public:property name="rowCount" value="0"/>

<public:property name="maxRowCount" value="100" />

<public:property name="search" value="false" id="searchId"/>

<public:property name="updateRow" value="false" id="updateRowId"/>

<public:property name="insertRow" value="false" id="insertRowId"/>

<public:property name="deleteRow" value="false" id="deleteRowId"/>

<public:property name="save" value="false" id="saveId"/>

<public:property name="print" value="false" id="printId"/>

<public:property name="copy" value="false" id="copyId"/>

<public:property name="help" value="false" id="helpId"/>

<public:property name="columnPicker" value="false" id="columnPickerId"/>

<public:property name="sort" value="false" id="sortId"/>

<public:property name="rowInfo" value="true" id="rowInfoId"/>

<public:property name="pageInfo" value="true" id="pageInfoId"/>

<public:property name="editRow" value="true" id="editRowId"/>

<public:property name="buttonNavigation" value="true" id="buttonNavigationId"/>

<public:property name="orderColumn" value=""/>

<public:property name="lvformat" />

<public:property name="lvstyle" />

<public:method name="loadText" />

<public:method name="loadData" />

<public:method name="drawData" />

<public:method name="selectRow" />

<public:method name="selectPage"/>

<public:method name="setRowStyle" />

<public:method name="configureToolBar"/>

<public:method name="saveGrid">

<public:method name="setColumnProperty" />

<public:method name="reload" />

<public:method name="formatColumnValue" />

<public:event name="onRowSelected" id="_lvevtRowSelected"/>

<public:event name="onListviewReady" id="_lvevtListviewReady"/>

</public:component>

//------------------------------------------------------------

// Version 2.0.1

// Ahthor dolphin

// Modify Date 2004-1-5

//------------------------------------------------------------

var L_Loading_Text = "正在载入数据，请稍候...";

var L_AbortControl_ErrorMessage = "控件初始化出错，不能够载入";

var navButtons = ["first","prev","next","last"];

var buttons = ['first','prev','next','last','search','updateBtn','insertBtn','deleteBtn','save','copy','help','columnPicker','sort','print'];

//-------------------------------------------------------------

/**

* 初始化ListView

* XMLDOM实例

function oncontentready(){

element.innerHTML = "<span style='color:#8F8F8F'><b>"+ L_Loading_Text +"</b></span>";

XmlDoc = new ActiveXObject("Microsoft.XMLDOM");

initialise();

}

/**

* 初始化ListView框架

* 建立listview表头

* 初始化数据数组

* 建立listview的工具栏和全局变量

function initialise(){

lvdata = new Array(); //存放数据的数组

lvhead = new Array(); //存放表头的数组

lvformat = new Object(); //存放格式化数据对象

lvstyle = new Array(); //存放过滤条件的数组对象

text = new Object(); //存放工具栏信息对象

saveOptions = eval(saveOptions);

maxRowCount = parseInt(maxRowCount);

//载入工具栏信息

loadText();

//属性改变触发

element.onpropertychange = propertyChange;

var html = "";

//判断工具栏是否显示

if(toolbarDisplay == '')

toolbarDisplay = eval(displayToolbar) ? '' : 'none';

//-------------------------- 建立工具栏 ----------------------------------

html = "<table id=toolbar class=lvtoolbar cellpadding=0 cellspacing=0 style='display:" + toolbarDisplay + "'><tr>";

html += "<td id=searchCell>" + makeButton('search') + " </td>";

html += "<td id=editRowCell><table cellpadding=0 cellspacing=0><tr>"

html += "<td id=updateRowCell>" + makeButton('updateBtn') + "</td>";

html += "<td id=insertRowCell>" + makeButton('insertBtn') + "</td>";

html += "<td id=deleteRowCell>" + makeButton('deleteBtn') + " </td>";

html += "</tr></table></td>"

//建立Navigation栏

for(var i in navButtons){

html += "<td id=" + navButtons[i] + "Cell>" + makeButton( navButtons[i] ) + "</td>"

if (i==1)

html += "<td id=pageInfoCell> " + text['page'] + " <select class=lv id=pageNumber></select> " + text['of'] + " <input class=lv id=pageCount readonly type=text size=1></input> </td>";

}

html += "<td id=rowInfoCell> " + text['rows'] + " <input class=lv id=rowCount readonly type=text size=2></input></td>";

//Navigation栏结束

html += "<td id=saveCell><table cellpadding=0 cellspacing=0><tr><td> " + makeButton( 'save' ) + "</td>";

html += "<td><select class=lv id=saveFormat>";

for(var i=0;i<saveOptions.length;i++)

html += "<option value='"+ saveOptions[i][0] + "'>" + saveOptions[i][1]

html += "</select>";

html += "</td></tr></table></td>";

html += "<td id=printCell>" + makeButton('print') + " </td>";

html += "<td id=copyCell>" + makeButton('copy') + " </td>";

html += "<td id=columnPickerCell>" + makeButton('columnPicker') + " </td>";

html += "<td id=sortCell>" + makeButton('sort') + " </td>";

html += "<td id=helpCell>" + makeButton('help') + " </td>";

html += "</tr></table>";

html = '<div id=' + element.id + '.toolbar style="padding:3pt">' + html + '</div>';

//--------------------------------工具栏结束 ----------------------------------------------

//建立数据区域

html += '<div id=listTable style="width:'+width+';height:'+ height +';overflow:auto" onselectstart="return false;"></div>';

//listview载入框架HTML

element.innerHTML = html;

toolbar = window.document.all[element.id + '.toolbar'];

//载入工具栏按钮TITLE

for(var btn in buttons)

toolbar.all[buttons[btn]].title = text[ buttons[btn].replace(/Btn/,'') + 'Title'];

//载入数据到数组

loadData();

//初始化Navigation栏按钮事件

toolbar.all.pageNumber.onchange = selectPage;

toolbar.all.first.onclick = selectPage;

toolbar.all.last.onclick = selectPage;

toolbar.all.next.onclick = selectPage;

toolbar.all.prev.onclick = selectPage;

//工具栏按钮改变触发

searchId.fireChange();

updateRowId.fireChange();

insertRowId.fireChange();

deleteRowId.fireChange();

rowInfoId.fireChange();

pageInfoId.fireChange();

saveId.fireChange();

copyId.fireChange();

helpId.fireChange();

columnPickerId.fireChange();

sortId.fireChange();

editRowId.fireChange();

printId.fireChange();

buttonNavigationId.fireChange();

serviceAvailable();

}

function serviceAvailable(){

_lvevtListviewReady.fire();

}

/**

* 载入工具栏信息

* 从lvlang.xml文件载入工具栏信息存放在text对象

function loadText(){

XmlDoc.async = false;

XmlDoc.load("lvlang.xml");

var nodeList = XmlDoc.documentElement.childNodes;

for(var i=0;i<nodeList.length;i++){

text[nodeList[i].nodeName] = nodeList[i].text

}

/**

* 根据按钮ID从text对象里数据生成其HTML

* 参数：

id: 按钮ID

* 返回：

* 按钮HTML

function makeButton(id){

var accessKey = '';

var html = '<img id=' + id + 'Img src=images/' + id.replace(/Btn/,'') + '.gif></img>';

if(!eval(element.smallButtons)){

var btnText = text[id.replace(/Btn/,'') + 'Text'];

html = '<table cellpadding=0 cellspacing=0><tr><td align=center>' + html + '<td></tr><tr><td style="font-size:8pt">' + btnText + '</td></tr></table>';

var key = btnText.toLowerCase().match(/<u>(.*)<\/u>/);

if(key)

accessKey = 'accessKey=' + key[1];

}

return '<button class=lv id=' + id + ' ' + accessKey + '>' + html + '</button>';

}

/**

* listview属性改变时调用

function propertyChange(){

switch(event.propertyName){

case 'updateRow':

case 'search':

case 'save':

case 'rowInfo':

case 'pageInfo':

case 'insertRow':

case 'deleteRow':

case 'editRow':

case 'copy':

case 'help':

case 'columnPicker':

case 'sort':

case 'print':

eval("toolbar.all." + event.propertyName + "Cell.style.display = (" + event.propertyName + ".toString().toLowerCase() == 'true') ? '' : 'none'");

break;

case 'buttonNavigation':

for (var i in navButtons)

eval("toolbar.all." + navButtons[i] + "Cell.style.display = (buttonNavigation.toString().toLowerCase() == 'true') ? '' : 'none'");

break;

default:

}

if(event.propertyName == 'displayToolbar')

toolbar.childNodes[0].style.display = eval(displayToolbar) ? '' : 'none';

}

/**

* 显示listview数据

* 从lvdata和lvhead数组画listview

function drawData(){

_lvElement('listTable').innerHTML = '<table width="100%" border=0 cellspacing=0 cellpadding=0 ><tr><td bgcolor="#000000"><table id="idlvData" border="0" cellspacing="1" cellpadding="2" width="100%"></table></td></tr></table>';

element.table = _lvElement('idlvData');

rowCount = lvdata.length;

//计算总页数

pageCount = Math.ceil(rowCount/pageSize);

var oTR,oTD;

//画listview表头

oTR = table.insertRow();

for(var i=0; i<lvhead.length; i++){

oTD = oTR.insertCell(i);

if(eval(wrapHeadings)) oTD.noWrap = true;

oTD.className = lvhead[i]._style;

oTD.innerHTML = lvhead[i]._value;

if(orderColumn != "" && lvhead[i]._columnName == lvhead[orderColumn]._columnName){

oTD.innerHTML += " <img src=images/" + lvhead[i]._orderSequence + ".gif>";

}

//增加单击事件

if(lvdata.length>0)

oTD.onclick = reorder;

}

//数据体为空时返回

if(lvdata.length == 0) return;

//根据当前页数画显示listview数据

for(var r=(pageNumber-1)*pageSize; r<pageNumber*pageSize; r++){

if(r>=rowCount) break;

oTR = table.insertRow();

for(var c=0; c<lvdata[r].length; c++){

oTD = oTR.insertCell(c);

if(eval(wrapHeadings)) oTD.noWrap = true;

//判断是否格式数据

if(typeof(lvformat[lvhead[c]._columnName]) != "undefined"){

oTD.innerHTML = lvformat[lvhead[c]._columnName][lvdata[r][c]._value];

}

else{

oTD.innerHTML = lvdata[r][c]._value;

}

//设置该位置的样式

setStyle(oTD,lvdata[r][c]._style);

//设置改位置单击事件

oTD.onclick = selectRow;

}

//修改工具栏数据

configureToolbar(pageCount);

}

/**

* 设置某个具体数据格的样式

* 参数：

* el: 数据格对象

* style: 样式

function setStyle(el,style){

try{

var arr_style = style.split(";");

for(var i=0;i<arr_style.length;i++){

var fields = arr_style[i].split(":");

el.style.setAttribute(fields[0],fields[1]);

}

catch(e){

//缺省样式

el.style.setAttribute("backgroundColor","white");

el.style.setAttribute("color","blank");

el.style.setAttribute("cursor","defaule");

alert(e);

}

/**

* listview数据格对象

* 参数：

* value: 数据值

* style: 样式

function data(value, style){

this._value = value;

this._style = style;

}

/**

* listview表头对象

* 参数：

* columnName: 字段名

* dataType: 字段类型

* value: 字段描述，实际显示用

* style: 样式，调用外部样式表是 className

* 无参数的内部变量：

* _bOrder: 是否已经排序

* _orderSequence: 排序方式

function head(columnName, dataType, value, style){

this._columnName = columnName;

this._dataType = dataType;

this._value = value;

this._style = style;

this._bOrder = false;

this._orderSequence = "";

}

/**

* 载入数据到数组

* 将dataXML数据载入lvhead和lvdata数组

function loadData(){

XmlDoc.loadXML(dataXML);

var rows = XmlDoc.documentElement.childNodes;

var fields;

for(var r=0; r<rows.length; r++){

if(r>maxRowCount){

alert(text["maxRowCount"]);

break;

}

fields = rows[r].childNodes;

if(r == 0){

//载入表头

for(var i=0;i<fields.length;i++){

var tmp = fields[i].childNodes;

lvhead[i] = new head(tmp[0].text,tmp[2].text,tmp[1].text,"head");

}

else{

//载入数据

lvdata[r-1] = new Array();

for(var i=0;i<fields.length;i++)

lvdata[r-1][i] = new data(fields[i].text,"backgroundColor:#ffffff;color:#000000;cursor:default");

}

/**

* 格式化HTML Tag 对象

function _lvElement(id){

if (element.all[id].length)

return element.all[id][0]

else

return element.all[id]

}

/**

* 选择listview一行

function selectRow(){

if(typeof(onRowSelected) != 'function')

return;

if(currentRow != null)

if(currentRow.sourceIndex > -1)

setRowStyle(currentRow, '', '');

row = window.event.srcElement;

while (row.tagName != 'TR'){

row = row.parentElement;

if (!row)

return;

}

setRowStyle(row, selectedRowBackgroundColour, selectedRowColour);

currentRow = row;

_lvevtRowSelected.fire();

}

/**

* 设定选择行的样式

function setRowStyle(row, backgroundColor, color){

try{

if(backgroundColor == '' || color == ''){

for(i=0;i<row.cells.length;i++){

setStyle(row.cells[i],lvdata[row.rowIndex-1][i]._style);

}

else{

for(i=0;i<row.cells.length;i++){

row.cells[i].style.backgroundColor = backgroundColor;

row.cells[i].style.color = color;

}

catch(e){

alert(e.description);

}

/**

* 设定工具栏数据

* 参数：

* newPageCount: 当前页

function configureToolbar(newPageCount){

if (toolbar.all.pageCount.value != newPageCount){

toolbar.all.pageCount.value = newPageCount;

var html = new Array()

for (var i=0;i<newPageCount;i++)

html[i] = '<option value=' + (i+1) + '>' + (i+1)

toolbar.all.pageNumber.outerHTML = '<select class=lv id=pageNumber>' + html.join('') + '</select>'

toolbar.all.pageNumber.onchange = selectPage;

}

element.pageCount = newPageCount;

toolbar.all.rowCount.value = rowCount;

toolbar.all.pageNumber.value = pageNumber;

toolbar.all.first.disabled = eval( parseInt(pageNumber) <= 1 );

toolbar.all.prev.disabled = eval( parseInt(pageNumber) <= 1 );

toolbar.all.next.disabled = eval( parseInt(pageNumber) >= parseInt(toolbar.all.pageCount.value) );

toolbar.all.last.disabled = eval( parseInt(pageNumber) == parseInt(toolbar.all.pageCount.value) || 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"?>

<searchTitle>填写搜索条件</searchTitle>

<updateTitle>更新选择记录</updateTitle>

<prevTitle>向前翻一页</prevTitle>

<nextTitle>向后翻一页</nextTitle>

<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>

<maxRowCount>数据大于允许的最大数目，自动截断！</maxRowCount>

</lvlang>

TestListview2_0_2.htm：

<?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>

<!--

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"," ");

alarmFlag[1] = new Array("true","<img src='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>

<h3 class="Title">Listview HTC for ILOG JTGO: Custom Classes</h3>

<mylist:listview ID="oList" dataXML="<Output>

<datatype>String</datatype>

</Column1>

<fieldname>CreatorName</fieldname>

<datatype>String</datatype>

</Column2>

<fieldname>SourceIP</fieldname>

<datatype>String</datatype>

</Column3>

<fieldname>acknowledged</fieldname>

<datatype>String</datatype>

</Column4>

<fieldname>CreationTime</fieldname>

</Column5>

<fieldname>Severity</fieldname>

<datatype>String</datatype>

</Column6>

<fieldname>EventNo</fieldname>

<datatype>String</datatype>

</Column7>

<fieldname>DeviceType</fieldname>

<datatype>String</datatype>

</Column8>

<fieldname>SourceName</fieldname>

<datatype>String</datatype>

</Column9>

<fieldname>DisplayTitle</fieldname>

<datatype>String</datatype>

</Column10>

<fieldname>DisplayString</fieldname>

<datatype>String</datatype>

</Column11>

</Columns>

<ROW>

<CreatorName>hwlscheck</CreatorName>

<acknowledged>false</acknowledged>

<DisplayString>交换机5端口的状态变为enable/up</DisplayString>

</ROW>

<ROW>

<CreatorName>Trap Probe 1</CreatorName>

<DisplayTitle>linkUp 描述:通信链路恢复正常</DisplayTitle>

<DisplayString>harbourSlotNumber(槽号)--6. ifIndex(接口索引号)--14.</DisplayString>

</ROW>

<ROW>

<CreatorName>hwlscheck</CreatorName>

<acknowledged>false</acknowledged>

<DisplayString>交换机6端口的状态变为enable/up</DisplayString>

</ROW>

<ROW>

<CreatorName>Trap Probe 1</CreatorName>

<DisplayTitle>unknown trap event.</DisplayTitle>

<DisplayString>hwIPPoolName--adsl.</DisplayString>

</ROW>

<ROW>

<CreatorName>hwlscheck</CreatorName>

<acknowledged>false</acknowledged>

<DisplayString>交换机13端口的状态变为enable/up</DisplayString>

</ROW>

</Output>" width="700" height="300" onRowSelected="clickRow()" />

<br>

<button onclick="test2()">Change SelectRow backgroundColor</button>

</BODY>

</HTML>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

图形放在images文件夹下

有兴趣的朋友可以联系我msn：haitengyu@hotmail.com 一起完善开发