争怎路由网/网站教程/内容

类似ListView ,htc组件

网站教程2024-06-22 阅读
 

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='http://edu.chinaz.com/Get/Program/Program_Other/images/check.png'>");

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

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

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




……

相关阅读