Script

本类阅读TOP10

·一个简单的javascript菜单
·网站流量统计代码
·可编辑的 HTML JavaScript 表格控件 DataGrid II
·JavaScript通用库(一)
·在网页中控制wmplayer播放器
·层遇到select框时
·TYPEING TEST ON LINE 在线打字测试 Free Software Javascript (aiiiq)
·javascript表单之间的数据传递!
·让网页自动穿上外套
·搜索gb2312汉字在网上的频率

分类导航
VC语言Delphi
VB语言ASP
PerlJava
Script数据库
其他语言游戏开发
文件格式网站制作
软件工程.NET开发
类似ListView ,htc组件

作者:未知 来源:月光软件站 加入时间:2005-2-28 月光软件站

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') + "&nbsp;</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') + "&nbsp;</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>&nbsp;" + text['page'] + "&nbsp;<select class=lv id=pageNumber></select>&nbsp;" + text['of'] + "&nbsp;<input class=lv id=pageCount readonly type=text size=1></input>&nbsp;</td>";
 }

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

 html += "<td id=saveCell><table cellpadding=0 cellspacing=0><tr><td>&nbsp;" + 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') + "&nbsp;</td>";
 html += "<td id=copyCell>" + makeButton('copy') + "&nbsp;</td>";
 html += "<td id=columnPickerCell>" + makeButton('columnPicker') + "&nbsp;</td>";
 html += "<td id=sortCell>" + makeButton('sort') + "&nbsp;</td>";
 html += "<td id=helpCell>" + makeButton('help') + "&nbsp;</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 += "&nbsp;<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","&nbsp;");
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:haitengyu@hotmail.com 一起完善开发




相关文章

相关软件