类似ListView ，htc组件

/**
* 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 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 += "&nbsp;";
}
//增加单击事件
if(lvdata.length>0)
oTD.onclick = reorder;
}
//数据体为空时返回
if(lvdata.length == 0) return;

//根据当前页数画显示listview数据
for(var r=(pageNumber-1)*pageSize; r if(r>=rowCount) break;
oTR = table.insertRow();
for(var c=0; 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 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 if(r>maxRowCount){
alert(text["maxRowCount"]);
break;
}
fields = rows[r].childNodes;
if(r == 0){
//载入表头
for(var i=0;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 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 setStyle(row.cells[i],lvdata[row.rowIndex-1][i]._style);
}
}
else{
for(i=0;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 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 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 for(var c=0; 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 tmp[arrHTML[i][0]] = arrHTML[i][1];
}

lvformat[columnName] = tmp;
}

/**
* 根据字段名查找位置索引
* 参数：
* columnName: 字段名
* 返回：
字段名位置索引值
*/
function findColumn(columnName){
var result = -1;
for(var i=0; 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 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 pos = findColumnProperty(i,fields[i].text);
if(pos != -1){
for(var j=0;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 if(r>=maxRowCount){
alert(text["maxRowCount"]);
break;
}
fields = rows[r].childNodes;
new_lvdata[r] = new Array();
var pos;
for(var i=0;i pos = findColumnProperty(i,fields[i].text);
if(pos != -1){
for(var j=0;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 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"?>

页
共
行

TD{
font-size: 12px;
}

<script LANGUAGE="JavaScript">

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

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

1898673hwlscheck218.2.116.50_0.0.5.2falseFri Dec 05 14:42:18 CST 2003222218.2.116.50_0.0.5.2设备告警交换机8端口的状态变为enable/down1898702hwlscheck218.2.119.26_0.0.1.5falseFri Dec 05 14:42:56 CST 2003222218.2.119.26_0.0.1.5设备告警交换机24端口的状态变为enable/down1898671Trap Probe 1172.20.0.51trueFri Dec 05 14:42:18 CST 200331.3.6.1.6.3.1.1.5.31172.20.0.51linkDown 描述:通信链路失效harbourSlotNumber(槽号)--6. ifIndex(接口索引号)--14.1898672hwlscheck218.2.116.50_0.0.5.1falseFri Dec 05 14:42:18 CST 2003222218.2.116.50_0.0.5.1设备告警交换机7端口的状态变为enable/down1898669hwlscheck61.155.233.242_0.0.1.3trueFri Dec 05 14:42:18 CST 200342261.155.233.242_0.0.1.3设备告警交换机24端口的状态变为enable/down1898703Trap Probe 1172.20.0.51falseFri Dec 05 14:42:59 CST 200321.3.6.1.6.3.1.1.5.41172.20.0.51linkUp 描述:通信链路恢复正常harbourSlotNumber(槽号)--3. ifIndex(接口索引号)--6.1898677hwlscheck218.2.117.214_0.0.3.3trueFri Dec 05 14:42:21 CST 2003222218.2.117.214_0.0.3.3设备告警交换机8端口的状态变为enable/down1898699Syslog Probe 1;192.168.2.54falseFri Dec 05 14:42:53 CST 20032VMAN-1-VMAN0192.168.2.54VMAN-1-VMAN一般告警: 2003年12月05日 星期五 14时42分46秒 gsr12016-192.168.2.54(192.168.2.54) Et0(1) 端口流出速度为8655584.000000超过了上限8500000.0000001898692hwlscheck218.2.116.154_0.0.0.2falseFri Dec 05 14:42:45 CST 2003322218.2.116.154_0.0.0.2设备告警交换机7端口的状态变为enable/up1898666hwlscheck61.155.233.242_0.0.0.2falseFri Dec 05 14:42:17 CST 200322261.155.233.242_0.0.0.2设备告警交换机2端口的状态变为enable/down1898697hwlscheck218.2.117.198_0.0.0.6falseFri Dec 05 14:42:53 CST 2003122218.2.117.198_0.0.0.6设备告警交换机4端口的状态变为enable/up

","overlay");
}
//
</script>
</head>

<body onload="initialize()">

Listview HTC for ILOG JTGO: Custom Classes