类似ListView ，htc组件 - Javascript

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>


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

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

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

<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 一起完善开发

类似ListView ，htc组件 [我要投稿]

和类似ListView ，htc组件相关的文章

对类似ListView ，htc组件的评论 [查看评论]

最新Javascript

热门Javascript