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 == ''
关键词：类似ListView ，htc组件