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>
<SCRIPT LANGUAGE="JavaScript"> //------------------------------------------------------------ // Copyright (c) 2003-2004 LeadinSoft. All rights reserved. // 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"?> <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"," "); 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>
<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>
=================================== 图形放在images文件夹下
         有兴趣的朋友可以联系我msn:[email protected] 一起完善开发

|