listview2_0_2.htc:
//------------------------------------------------------------
// 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 = ""+ L_Loading_Text +"";
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 = "
| " + makeButton('search') + " | ";
| "
" + makeButton( navButtons[i] ) + " | "" + text['page'] + " " + text['of'] + " | ";" + text['rows'] + " | ";
| ";
" + makeButton('print') + " | ";" + makeButton('copy') + " | ";" + makeButton('columnPicker') + " | ";" + makeButton('sort') + " | ";" + makeButton('help') + " | ";
html = '
//--------------------------------工具栏结束 ----------------------------------------------
//建立数据区域
html += '
';//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 text[nodeList[i].nodeName] = nodeList[i].text } } /** * 根据按钮ID从text对象里数据生成其HTML * * 参数: id: 按钮ID * 返回: * 按钮HTML */ function makeButton(id){ var accessKey = ''; var html = ' if(!eval(element.smallButtons)){ var btnText = text[id.replace(/Btn/,'') + 'Text']; html = '';
';' + html + ' ' + btnText + '
var key = btnText.toLowerCase().match(/(.*)<\/u>/);
if(key)
accessKey = 'accessKey=' + key[1];
}
return '';
}
/**
* 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 = '
element.table = _lvElement('idlvData');
rowCount = lvdata.length;
//计算总页数
pageCount = Math.ceil(rowCount/pageSize);
var oTR,oTD;
//画listview表头
oTR = table.insertRow();
for(var i=0; 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 += " } //增加单击事件 if(lvdata.length>0) oTD.onclick = reorder; } //数据体为空时返回 if(lvdata.length == 0) return; //根据当前页数画显示listview数据 for(var r=(pageNumber-1)*pageSize; r if(r>=rowCount) break; oTR = table.insertRow(); for(var c=0; 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 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 if(r>maxRowCount){ alert(text["maxRowCount"]); break; } fields = rows[r].childNodes; if(r == 0){ //载入表头 for(var i=0;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 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 setStyle(row.cells[i],lvdata[row.rowIndex-1][i]._style); } } else{ for(i=0;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 html[i] = ' toolbar.all.pageNumber.outerHTML = '' 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 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 for(var c=0; 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 tmp[arrHTML[i][0]] = arrHTML[i][1]; } lvformat[columnName] = tmp; } /** * 根据字段名查找位置索引 * 参数: * columnName: 字段名 * 返回: 字段名位置索引值 */ function findColumn(columnName){ var result = -1; for(var i=0; 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 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 pos = findColumnProperty(i,fields[i].text); if(pos != -1){ for(var j=0;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 if(r>=maxRowCount){ alert(text["maxRowCount"]); break; } fields = rows[r].childNodes; new_lvdata[r] = new Array(); var pos; for(var i=0;i pos = findColumnProperty(i,fields[i].text); if(pos != -1){ for(var j=0;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 if(lvhead[pos]._columnName == lvstyle[i]._columnName){ if(value.indexOf(lvstyle[i]._pattern) != -1) return i; } } return -1; } lvlang.xml: TestListview2_0_2.htm: 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; } =================================== 图形放在images文件夹下 有兴趣的朋友可以联系我msn:haitengyu@hotmail.com 一起完善开发";
Listview HTC for ILOG JTGO: Custom Classes










