XPagination.prototype.create = function(containerName, context) {
?this.container = $(containerName);?
?
?this.init(context);
?
?var s = new Array();
?s[s.length] = '<table style="width:' + this.width + ';" class="x_pagination_bar2" border="0" cellspacing="0" cellpadding="0" align="center"><tr>';
?s[s.length] = '<td width="20" height="20"><input id="first" type="button" class="x_pagination_first" value="" title="first" /></td>';
?s[s.length] = '<td width="20"><input id="back" type="button" class="x_pagination_back" value="" title="back" /></td>';
?s[s.length] = '<td width="20"><input id="next" type="button" class="x_pagination_next" value="" title="next" /></td>';
?s[s.length] = '<td width="20"><input id="last" type="button" class="x_pagination_last" value="" title="last" /></td>';
?s[s.length] = '<td class="x_pagination_font">&nbsp;第<span id="jumper">loading...</span>頁 ';
?
?s[s.length] = '(<span id="resizer">loading...</span>行/頁)';
?
?s[s.length] = '<font id="info">(loading...)</font>';
?s[s.length] = '</td><td>&nbsp;</td></tr></table>';
?
?this.container.innerHTML = s.join('');
?
?this.first = this.container.all('first');
?this.back = this.container.all('back');
?this.next = this.container.all('next');
?this.last = this.container.all('last');
?this.jump = this.container.all('jump');
?this.jumper = this.container.all('jumper');
?this.resizer = this.container.all('resizer');
?this.info = this.container.all('info');
?
?this.set(context);
};

?

XPagination.prototype.set = function(context) {
?var the = this;

?this.width = (context.width) ? context.width : this.width;
?this.count = (undefined != context.count) ? context.count : this.count;??
?this.index = (undefined != context.index) ? context.index : this.index;?
?this.size = (undefined != context.size) ? context.size : this.size;
?this.length = (undefined != context.length) ? context.length : this.length;
?
?this.context.count = this.count;
?
?var pages = 0;
?//alert(this.count);
?if(this.count>0 && this.size!=0) {
??var pages = Math.ceil(this.count / this.size);
?}

?//alert(this.resize.value);
?if(this.count>0) {
??this.info.innerHTML = ' &nbsp; (共<strong>' + this.count + '</strong>行/共<strong>' + pages + '</strong>頁)';
??if(pages>1) {
???var o = new Array();?
???for(var i = 1; i<=pages; i++) {??
????o[o.length] = '\n<option value="' + i + '"' + ((i==this.index) ? ' selected' : '') + '>&nbsp;' + i + '&nbsp;</option>';;
???}
???//alert(o.join(''));
???this.jumper.innerHTML = '&nbsp;<select id="jump" style="font-size:10;" class="x_select" title="jump to">' + o.join('') + '</select>&nbsp;';
??
???this.jump = this.jumper.all('jump');??
??} else {
???this.jumper.innerHTML = '<strong>1</strong>';
??}
?} else {
??this.info.innerHTML = '';
??this.jumper.innerHTML = '<strong>' + this.index + '</strong>';
?}?
?
?
??
?
?//(the.onRowClickHandler || Prototype.emptyFunction)({rowId:tInput.value, checked:tInput.checked});
?if(context.onPaginationHandler) {
??this.onPaginationHandler = context.onPaginationHandler;
?}
?
?
?o = [];
?
?/*
?if(this.size>=this.count) {
??o[o.length] = '<strong>' + this.size + '</strong>';
?} else {
?}*/
??o[o.length] = '<select id="resize" name="resize" style="font-size:10;" class="x_select" >';
??var stepLength = 5;
??var tCount = this.count;
??if(tCount<0) {
???tCount = 101;
??}
??for(var t = 5; t<=50 && t<=(tCount + this.size); t = t + stepLength) {
???o[o.length] = '<option value="' + t + '"' + ((t==this.size)? ' selected': '') + '>' + t + '</option>';???
??}
??o[o.length] = '</select>';
?
?this.resizer.innerHTML = o.join('');
?
?this.resize = this.container.all('resize');
?if(this.resize) {
??this.resize.value = this.size;
?}
?
?if(1 != this.index) {
??this.enable(this.first);
??this.first.onclick = function() {
???(the.onPaginationHandler || Prototype.emptyFunction)({index:1, size:the.size, count:the.count, length:the.length});
??};
?} else {
??this.disable(this.first);???
?}
?
?if(this.index > 1) {
??this.enable(this.back);
??this.back.onclick = function() {
???(the.onPaginationHandler || Prototype.emptyFunction)({index:the.index - 1, size:the.size, count:the.count, length:the.length});
??};
?} else {
??this.disable(this.back);
?}
?
?if((this.index < pages) || (this.count<=0 && this.length==this.size)) {
??this.enable(this.next);
??this.next.onclick = function() {
???(the.onPaginationHandler || Prototype.emptyFunction)({index:the.index + 1, size:the.size, count:the.count, length:the.length});
??};
?} else {
??this.disable(this.next);
?}
?
?if((this.index < pages) || (this.count<=0 && this.length==this.size)) {
??this.enable(this.last);
??this.last.onclick = function() {
???(the.onPaginationHandler || Prototype.emptyFunction)({index:pages, size:the.size, count:the.count, length:the.length});
??};
?} else {
??this.disable(this.last);
?}
?
?if(this.jump) {?
??this.jump.onchange = function() {
???(the.onPaginationHandler || Prototype.emptyFunction)({index:the.jump.selectedIndex + 1, size:the.size, count:the.count, length:the.length});
??};
?}
?
?if(this.resize) {
??this.resize.onchange = function() {
???the.size = the.resize.value;
???(the.onPaginationHandler || Prototype.emptyFunction)({index:1, size:the.size, count:the.count, length:the.length});
??};
?}
};

XPagination.prototype.disable = function(btn) {
?btn.disabled = true;
?btn.className = 'x_pagination_' + btn.id + '_disabled';
};

XPagination.prototype.enable = function(btn) {
?btn.disabled = false;
?btn.className = 'x_pagination_' + btn.id;
};










.x_pagination_bar {
?height:20;
?width:100%;
?border:0px;
?color:#330033;?
?font-size:12px;
?font-family:Verdana, Simsun;
?background-image:url(../image/xpagination/x_paginationbar_bg.gif);
}

.x_pagination_font {
?color:#000000;
?font-size:12px;
?font-family:Verdana, Simsun;
}

.x_pagination_jump {
?height:18px;
?color:#330033;
?font-size:9px;
?border:1px #607BAC solid;
?font-family:Verdana, Simsun;
}

.x_pagination_first??? ?? {background:url(../image/xpagination/x_icon_first.gif????????? ) no-repeat 0 0; }
.x_pagination_back???? ?? {background:url(../image/xpagination/x_icon_back.gif?????????? ) no-repeat 0 0; }
.x_pagination_next???? ?? {background:url(../image/xpagination/x_icon_next.gif????????? ) no-repeat 0 0; }
.x_pagination_last???? ?? {background:url(../image/xpagination/x_icon_last.gif?????????? ) no-repeat 0 0; }
.x_pagination_first_disabled {background:url(../image/xpagination/x_icon_first_disabled.gif ) no-repeat 0 0; }
.x_pagination_back_disabled? {background:url(../image/xpagination/x_icon_back_disabled.gif? ) no-repeat 0 0; }
.x_pagination_next_disabled? {background:url(../image/xpagination/x_icon_next_disabled.gif ) no-repeat 0 0; }
.x_pagination_last_disabled? {background:url(../image/xpagination/x_icon_last_disabled.gif? ) no-repeat 0 0; }

.x_pagination_first????????? ,
.x_pagination_back?????????? ,
.x_pagination_next?????????? ,
.x_pagination_last?????????? ,
.x_pagination_first_disabled ,
.x_pagination_back_disabled? ,
.x_pagination_next_disabled? ,
.x_pagination_last_disabled? {
?cursor:hand;???????????????????????????????????????????
?border:0px;????????????????????????????????????????????
?width:16px;????????????????????????????????????????????
?height:16px;??????????????????????????????????????????? ?
}









<html>
<head>
<title>XPagination</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>

<link href="resource.prototype.css" rel="stylesheet" type="text/css"></link>
<link href="../theme/default/style/index.css" rel="stylesheet" type="text/css"></link>
<script language="JavaScript" type="text/JavaScript" src="../../common/script/prototype.js"></script>
<script language="JavaScript" type="text/JavaScript" src="../script/xpagination.js"></script>

</head>

<body style="margin:0;overflow-x:hidden;" scroll="no">
?
?
?
?
?
?
?
<script language="JavaScript" type="text/JavaScript">
function viewHtml(){
?$("result").innerHTML = '<xmp>' + $('container').outerHTML + '</xmp>';
}
function setPagination() {
?var p = {};
?if(''!=$F('count')) {
??p['count'] = $F('count');
?}
?if(''!=$F('index')) {
??p['index'] = $F('index');
?}
?if(''!=$F('length')) {
??p['length'] = $F('length');
?}
?if(''!=$F('size')) {
??p['size'] = $F('size');
?}
?xpagination.set(p);
}
</script>
?
?
?
?

<table style="width:100%;height:100%;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="height:30;border-bottom:1 solid #CCCCCC;" colspan="2">
?<strong>XPagination</strong>
</td>
</tr>
<tr>
<td style="border-right:1 solid #CCCCCC;padding:2;" align="center">

?
??
?
?<div id="container" style="height:22;width:100%;border:1px solid #0000FF;"></div>

??
?
?

?
?
?<script language="JavaScript" type="text/JavaScript">
?<!--
?function onPagination(p) {
??$('result').innerHTML = $H(p).toQueryString();
?}
?var context = {
??count: 101,
??index: 2,
??size: 10,
??length: 10,
??onPaginationHandler: onPagination
?};
?var xpagination = new XPagination();
?xpagination.create('container', context);
?//-->?
?</script>

</td>
<td width="200" style="width:200;" align="center" valign="top">
?<div class="box" style="padding:2;">??
??
??<input type="button" class="bn" value="viewHtml" onclick="viewHtml();" />
??
??<table style="width:100%;" cellpadding="0" cellspacing="0" border="0">
??<form id="fom" name="fom" onsubmit="return false;">
??<tr>
??<td class="f">count</td>
??<td><input id="count" name="count" value="101" /></td>
??</tr>
??<tr>
??<td class="f">index</td>
??<td><input id="index" name="index" value="2" /></td>
??</tr>
??<tr>
??<td class="f">length</td>
??<td><input id="length" name="length" value="10" /></td>
??</tr>
??<tr>
??<td class="f">size</td>
??<td><input id="size" name="size" value="10" /></td>
??</tr>
??<tr>
??<td colspan="2"><input type="button" class="bn" value="xpagination.set" onclick="setPagination();" /></td>
??</tr>
??</form>
??</table>
??
??
?</div>
</td>
</tr>
<tr>
<td style="width:100%;height:30;border-top:1 solid #CCCCCC;" colspan="2">
?
?<input type="button" class="bn" value="xpagination.set({count:0, index:1, length:0, size:10});" onclick="eval(this.value);" />
?<input type="button" class="bn" value="xpagination.set({count:-1, index:2, length:10, size:10});" onclick="eval(this.value);" />
?<input type="button" class="bn" value="xpagination.set({count:-1, index:1, length:10, size:10});" onclick="eval(this.value);" />
?
</td>
</tr>
<tr>
<td style="width:100%;height:100;border-top:1 solid #CCCCCC;" colspan="2">

?<table style="width:100%;height:100%;table-layout:fixed;" cellpadding="0" cellspacing="0" border="0">
?<tr>
?<td>
??<div id="result" style="width:100%;height:100%;overflow:auto;padding:2;table-layout:fixed;">result</div>
?</td>
?</tr>
?</table>
?
</td>
</tr>
</table>

?
?
</body>
</html>

?

?

?this.headColumn = null;? // exchange column order div
?this.exchangeTag = null;? // exchange tag div
?this.exchangeCell = null; // current be change column cell
?
?this.rowSequence = 0;
?this.handler = null; //all handler
?this.columnLength = 0;
?
?this.onOrderByHandler = null;
?this.onRowClickHandler = null;
?this.onRowDblClickHandler = null;
?
?var the = this;
}

?

XList.prototype.init = function(context) {
?this.container = $(context.container);?
?this.sequenced = (context.sequenced!=undefined) ? context.sequenced : true;
?this.colored = (context.colored!=undefined) ? context.colored : true;?
?this.rowId = (context.rowId) ? context.rowId : 'id';
?this.rowType = (context.rowType) ? context.rowType : 'checkbox';
?
?//this.columnExchangeable = (context.columnExchangeable!=undefined) ? context.columnExchangeable : true;?
?this.onOrderByHandler = (context.onOrderByHandler) ? context.onOrderByHandler : null;?
?this.onRowClickHandler = (context.onRowClickHandler) ? context.onRowClickHandler : null;
?this.onRowDblClickHandler = (context.onRowDblClickHandler) ? context.onRowDblClickHandler : null;?
?context = null;
};

XList.prototype.create = function(context, columns) {
?var the = this;
?
?this.init(context);
?
?//it must be 'table-layout:fixed;' for overflow auto;
?var s = [];?
?s[s.length] = '\n<table style="width:100%;height:100%;table-layout:fixed;" cellspacing="0" cellpadding="0" border="0"><tr><td>';
?s[s.length] = '\n<div id="x_list_table_container" style="height:100%;width:100%;overflow:auto;">';
?s[s.length] = '\n<table id="x_list_table" style="table-layout:fixed;" cellspacing="0" cellpadding="0" border="0">';
?s[s.length] = '\n</table>';
?s[s.length] = '\n</div><div id="resizer" style="position:absolute;z-index:3;width:4;border:2 solid #000000;display:none;"></div>';
?s[s.length] = '\n</td></tr></table>';

?this.container.innerHTML = s.join('');
?s = null;
?
?this.tableContainer = this.container.all('x_list_table_container');
?this.table = this.container.all('x_list_table');
?this.resizer = this.container.all('resizer');
?
?this.resizer.onmouseup = function() {
??if(the.resizing && null!=the.resizeHead) {
???var newWidth = parseInt(the.resizeHead.offsetWidth) + (parseInt(event.clientX) - parseInt(the.resizeClientX));
???window.status = newWidth;
???if(newWidth < 5){
????newWidth = 5;
???}
???var head = the.resizeHead;
???the.setHeadWidth(head, newWidth);
???this.style.display = 'none';
???the.resizing = false;
???the.resizeHead = null;
???the.table.style.cursor = '';
???
??}
?};
?
?if(columns) {
??this.setColumns(columns);
?}
};

XList.prototype.isRowHandle = function() {
?return ('checkbox'==this.rowType) || ('radio'==this.rowType);
}

XList.prototype.setColumns = function(columns) {
?var the = this;

?this.columnLength = 0;
?
?this.columns = columns;
?
?var tBody, tRow, tHead;
?
?tBody = this.table.tBodies[0];
?tRow? = document.createElement('tr');

?tRow.className = 'x_list_head_row';
?tBody.appendChild(tRow);
?
?//
?if(this.isRowHandle()) {
??tHead = document.createElement('th');
??tRow.appendChild(tHead);
??
??tHead.className = 'x_list_head_handle';
??if('checkbox' == this.rowType) {
???tHead.title = 'check/uncheck all';
??} else if('radio' == this.rowType) {
???tHead.title = 'uncheck all';
??}
??
??var tInput = document.createElement('input');
??tInput.id = this.rowId + '_all'??
??tInput.name = tInput.id;
??tInput.type = this.rowType;
??
??// closure memory leak here !
??if('radio' == this.rowType) {
???tInput.onclick = function() {
????XCheck.uncheckAll(the.rowId);
????tInput.checked = false;
????the.color();
???}
??} else {
???tInput.onclick = function() {
????XCheck.checkAll(the.rowId);
????the.color();
???}
??}
??tHead.appendChild(tInput);??
?}
?
?//sequence
?if(this.sequenced) {?
??tHead = document.createElement('th');
??tHead.className = 'x_list_head_handle';
??tHead.innerHTML = '&nbsp;#&nbsp;';
??tRow.appendChild(tHead);
?}
?
?//header columns?
?var width = '';
?var name = '';
?var title = '';
?var text = '';
?var column = null;
?
?for(var i = 0; i < this.columns.length; i++) {
??column = this.columns[i];
??
??width = (column.width) ? (column.width) : '100';
??name = (column.name) ? (column.name) : '';
??
??text = column.text;
??
??title = (column.title) ? (column.title) : column.text;
??
??tHead = document.createElement('th');
??tHead.className = 'x_list_head_cell';
??tHead.id = name;
??tHead.name = name;
??tHead.orderBy = '';
??//tHead.innerHTML = '<div style="overflow: hidden; height: 18px; width:'+width+';">' + text + "</div>";
??tHead.style.width = width;
??if(null!=name && ''!=name && this.onOrderByHandler) {
???tHead.style.textDecoration = 'underline';
??}
??//tHead.width = width;
??//tHead.innerHTML = '<span style="padding:0;overflow:hidden;height:18px;width:'+width+';">' + text + "</span>";
??tHead.innerHTML = text;
??
??
??
???
??// tHead.style.cursor = 'hand';
?
??tHead.onclick = function() {
???var src = window.event.srcElement;//maybe <html /> in head
???window.status = parseInt(src.offsetWidth) - parseInt(event.offsetX);
???if(parseInt(src.offsetWidth) - parseInt(event.offsetX) <= 3) {
????
???} else {
????if(the.resizing && null!=the.resizeHead) {
????} else {
?????if(the.onOrderByHandler && null!=name && ''!=name) {
??????var orderBy = (this.orderBy == 'asc') ? 'desc' : 'asc';???
??????if(null!=the.orderByColumn) {
???????if(the.orderByColumn != this) {??
????????the.orderByColumn.className = 'x_list_head_cell';??????
????????the.orderByColumn = this;
???????}
??????} else {
???????the.orderByColumn = this;
??????}
??????this.className = 'x_list_head_' + orderBy;?????
??????this.orderBy = orderBy;
??????(the.onOrderByHandler || Prototype.emptyFunction)({name:this.name, orderBy:orderBy});
?????}
????}
???}????
??};
??
??tHead.onmouseover = function() {
???var src = window.event.srcElement;???
???src.style.backgroundColor = '#FFFFFF';//'#F4F7F9';
???src.style.color = '#0000FF';
???var src = window.event.srcElement;?
??};
??
??tHead.onmouseout = function() {
???var src = window.event.srcElement;????
???src.style.backgroundColor = '#E9F0F4';
???src.style.color = '07215F';
???src.style.borderColor = 'threedhighlight #688293 #688293 threedhighlight';
??};
??
??tHead.onmousedown = function() {
???var src = window.event.srcElement;
???if(parseInt(src.offsetWidth) - parseInt(event.offsetX) <= 3) {
????the.resizing = true;
????the.resizeClientX = event.clientX;
????
????var p = Position.page(src);
????the.resizeHead = src;
????the.resizer.style.height = the.tableContainer.offsetHeight;
????the.resizer.style.top = parseInt(p[1]) + 2;
????the.resizer.style.left = parseInt(p[0]) + parseInt(src.offsetWidth);
????the.resizer.style.display = 'block';
????the.resizeOffsetWidth = the.resizer.style.left;//head.offsetWidth;
???} else {
????src.style.backgroundColor = '#D4DBDF';
????src.style.borderColor = 'black #CCCCCC #CCCCCC black';
???}
??};
??
??tHead.onmouseup = function() {
???
???var src = window.event.srcElement;
???src.style.backgroundColor = '#FFFFFF';
???src.style.borderColor = 'threedhighlight #688293 #688293 threedhighlight';
??};
??
??tHead.onmousemove = function() {
???if(the.resizing && null!=the.resizeHead) {
????the.resizer.style.left = parseInt(the.resizeOffsetWidth) + (parseInt(event.clientX) - parseInt(the.resizeClientX));
????return;
???}
???
???var src = window.event.srcElement;
???if(parseInt(src.offsetWidth) - parseInt(event.offsetX) <= 3) {
????the.table.style.cursor = 'e-resize';
???} else {
????the.table.style.cursor = '';
???}?
??};
??
????
??
??tRow.appendChild(tHead);
?
??this.columnLength++;
?}
}

XList.prototype.setHeadWidth = function(head, newWidth) {
?head.style.width = newWidth;
/*
?if(this.table.rows.length > 0) {
??var tRow = null;
??var index = this.table.rows[0].indexOf(head);
??for(var i = 1; i < this.table.rows.length; i++) {
???tRow = this.table.rows[i];???
???cells[index].style.width = newWidth;
??}
?}?*/
}

?

var M_LIST_ROW_HIGHLIGHT = '#D8F3FF';
var M_LIST_ROW_LAST_HIGHLIGHT = '#FFFF00';
var M_LIST_ROW_COLOR = '';
var M_LIST_ROW_OVER = '#FFFFFF';

XList.prototype._i = function(rows) {
?var i = 0;?
?if('empty'!=this.rowType) {
??i++;
?}?
?if(this.sequenced) {?
??i++;
?}
?return i;
}

XList.prototype.addRows = function(rows) {
?var scrollBottom = ('undefined'==typeof(scrollBottom)?false:scrollBottom)
?if(this.size()>0) {
??//scrollBottom = true;
?}?
?for (var i = 0; i < rows.length; i++) {??
??var result = this._addRow(rows[i], scrollBottom);
??if (result) { return result; }
?}
}

XList.prototype.addRow = function(pRow) {
?this._addRow(pRow, true);
}
XList.prototype._addRow = function(pRow, scrollBottom) {
?var the = this;
?
?var tBody, tRow, tCell, i, len;
?
?/* Validate column count */
?//if (aRowData.length != this._cols) { return 1; }
?//var rowSequence = this.rowSequence++;
?var seq = this.size() + 1;
?
?/* Construct Body Row */?
?
?tBody = this.table.tBodies[0];
?tRow? = document.createElement('tr');?
?tRow.row = pRow;
?tRow.row.checked = (tRow.row.checked==true);?
?pRow.colored = false;
?
?if(this.colored) {???
??if(!pRow.bgColor) {
???pRow.bgColor = (seq % 2 ==1 ) ? '#FFFFFF' : '#F4F9FB';
??} else {
???pRow.colored = true;
??}
?} else {
??pRow.bgColor = '#FFFFFF';
?}
?
?if(pRow.checked) {
??
??tRow.style.backgroundColor = M_LIST_ROW_HIGHLIGHT;
?} else {
??tRow.style.backgroundColor = pRow.bgColor;
?}
?
?var tInput = null;
?//check
?if('empty'!=this.rowType) {
??tCell = document.createElement('td');
??tCell.className = 'x_list_body_handle';
??
??tInput = document.createElement('input');
??tInput.type = this.rowType;
??tInput.id = this.rowId;??
??tInput.name = this.rowId;
??tInput.value = pRow.id;
??
??tCell.appendChild(tInput);
??tRow.appendChild(tCell);
??//tInput.focus();
??
?}
?//sequenced
?if(this.sequenced) {
??tCell = document.createElement('td');
??tCell.className = 'x_list_body_handle';???
??tCell.appendChild(document.createTextNode(seq));
??tRow.appendChild(tCell);
?}
?var text = null;
?if(pRow && pRow.data) {
??for (var i = 0; i < this.columnLength && i < pRow.data.length; i++) {
???tCell = document.createElement('td');
???tCell.className = 'x_list_body_cell';
???tCell.style.width = this.columns[i].width;
???//tCell.appendChild(document.createTextNode(row.data[i]));
???if(''!=pRow.data[i]) {
????text = pRow.data[i];
???} else {
????text = '&nbsp;';
???}??
???tCell.innerHTML = '<div style="width: '+this.columns[i].width+'; height: 18px; white-space: nowrap; padding-right: 20px;">' + text + '</div>';
???tCell.title = text;//.escapeHTML();????
???tRow.appendChild(tCell);
??}
?}
?tBody.appendChild(tRow);
?
?if(pRow.checked) {
??tInput.checked = true;?
??tRow.row.checked = true;
?}
?
?//event bind
?
?tRow.onclick = function() {??
??if(tInput) {
???if('radio'==the.rowType) {
????XLister.uncheckAll(the.rowId);
???}
???
???// get column index, starting from zero.
???var src = event.srcElement;
???var colIndex = 0;
???
???if('td' == src.tagName.toLowerCase())
???{
????while(src.previousSibling)
????{
?????if('td' == src.previousSibling.tagName.toLowerCase())
?????{
??????src = src.previousSibling;
??????colIndex ++;
?????}else
?????{
??????continue;?????
?????}
????}
???}
???
???// return false means that the row checkBox does not need to change status.
???if(false != (the.onRowClickHandler || Prototype.emptyFunction)({rowId:tInput.value, checked:!tRow.row.checked, colIndex:colIndex, row:tRow}))
???{
????tRow.row.checked = !tRow.row.checked;
????tInput.checked = tRow.row.checked;???
???}
??
???the.color();
???if(tInput.checked) {
????M_LIST_ROW_COLOR = M_LIST_ROW_HIGHLIGHT;
????tRow.style.backgroundColor = M_LIST_ROW_LAST_HIGHLIGHT;
???} else {
????M_LIST_ROW_COLOR = tRow.row.bgColor;
???}
??}
?}
?
?tRow.ondblclick = function() {
??if(the.onRowDblClickHandler) {
???(the.onRowDblClickHandler || Prototype.emptyFunction)({rowId:tInput.value, checked:!tRow.row.checked, row:tRow});?
??}??
?}?
?
?
?//scroll down when add row
?if(scrollBottom) {
??this.tableContainer.scrollTop = this.tableContainer.scrollTop + this.size() * 22;
?}?
};

XList.prototype.color = function() {
?if(this.size()>0) {
??var bgColor = null;
??var rows = this.table.rows;
??var tRow = null;
??var row = null;
??var handler = null;
??for(var i = 1; i<rows.length; i++) {
???tRow = rows[i];
???handler = tRow.all(this.rowId);
???if(handler) {???
????row = tRow.row;
????row.checked = handler.checked;
????if(!row.colored) {
?????row.bgColor = (i % 2 ==1 ) ? '#FFFFFF' : '#F4F9FB';
????}
????if(row.checked) {
?????tRow.style.backgroundColor = M_LIST_ROW_HIGHLIGHT;
????} else {
?????tRow.style.backgroundColor = row.bgColor;
????}
???}
??}??
?}
};
//remove selected rows
XList.prototype.remove = function() {
?var indexs = new Array();
?var tRow = null;
?for(var i=this.table.rows.length-1; i>0; i--) {
??tRow = this.table.rows[i];
??rowId = tRow.all(this.rowId);
??if(true == rowId.checked) {
???indexs[indexs.length] = i;
???//alert(i);
??}
?}?
?if(indexs.length>0) {
??for(var i=0; i<indexs.length; i++) {
???this.table.deleteRow(indexs[i]);
???this.length
??}
?}
?if(this.size()==0) {
??this.container.all(this.rowId + '_all').checked = false;
?} else {
??this.refresh();?
?}
}

XList.prototype.value = function() {
?var values = new Array();
?if(this.size() > 1) {??
??var rowIds = this.container.all(this.rowId);??
??if(rowIds && rowIds.length) {
???for(var i=rowIds.length-1; i>=0; i--) {????
????if(true == rowIds[i].checked) {
?????values[values.length] = rowIds[i].value;
????}
???}
??}?
?} else if(this.size() == 1) {
??var rowIds = this.container.all(this.rowId);
??if(true == rowIds.checked) {
???values[values.length] = rowIds.value;
??}
?}
?
?return values;
}

// get the selected row indices.
XList.prototype.rowIndices = function() {
?var rows = new Array();
?if(this.size() > 1) {??
??var rowIds = this.container.all(this.rowId);??
??if(rowIds && rowIds.length) {
???for(var i=rowIds.length-1; i>=0; i--) {????
????if(true == rowIds[i].checked) {
?????rows[rows.length] = i;
????}
???}
??}?
?} else if(this.size() == 1) {
??var rowIds = this.container.all(this.rowId);
??if(true == rowIds.checked) {
???rows[rows.length] = 0;
??}
?}
?
?return rows;
}

XList.prototype.values = function() {
?var values = new Array();
?if(this.size()>1) {?
??var rowIds = this.container.all(this.rowId);
??if(rowIds && rowIds.length) {
???for(var i=rowIds.length-1; i>=0; i--) {
????tRowId = rowIds[i];
????values[values.length] = tRowId.value;
???}
??}
?} else if(this.size()==1) {
??var rowIds = this.container.all(this.rowId);
??values[values.length] = rowIds.value;
?}
?return values;
}

XList.prototype.refresh = function() {
?if(this.sequenced) {??
??var index = 0;
??if('empty'!=this.rowType) {
???index++;
??}
??
??if(this.table.rows.length > 0) {
???var tRow = null;
???for(var i=1; i<this.table.rows.length; i++) {
????tRow = this.table.rows[i];
????cells = tRow.cells;
????cells[index].innerHTML = i;
???}
??}
?}
?this.color();
}

?

XList.prototype.clear = function() {?
?for(var i = this.size(); i > 0; i--){
??this.table.deleteRow(i);
?}
?if(this.container.all(this.rowId + '_all')) {
??this.container.all(this.rowId + '_all').checked = false;
?}
}

XList.prototype.size = function() {?
?return this.table.rows.length - 1;
}
XList.prototype.orderBy = function() {
?var name = '';
?var orderBy = '';
?if(null!=this.orderByColumn) {
??name = this.orderByColumn.name;
??orderBy = this.orderByColumn.orderBy;
?}
?return {name:name, orderBy:orderBy};
}

XList.prototype.cell = function(rowIndex, colIndex) {
?if(rowIndex < this.size() && colIndex < this.columnLength) {
??var?tRow = this.table.rows[rowIndex+1];
??var cells = tRow.cells;??
??//alert('this._i() + colIndex'+ (this._i() + colIndex) );
??return cells[this._i() + colIndex];
?}
?return null;
}

XList.prototype.serialize = function() {
?if('empty'!=this.rowType) {
??var value = this.value();
??var s = new Array();
??for(var i=0; i<value.length; i++) {
???s[s.length] = this.rowId + '=' + value[i];
??}
??return s.join('&');
?}
?return '';
}
XList.prototype.serializeAll = function() {
?if('empty'!=this.rowType) {
??var value = this.values();
??var s = new Array();
??for(var i=0; i<value.length; i++) {
???s[s.length] = this.rowId + '=' + value[i];
??}
??return s.join('&');
?}
?return '';
}

XList.prototype.setOrderByContext = function(param) {
?if(null!=param) {
??if(null!=param.orderByName) {
???var head = this.table.rows[0];
???var column = null;?
???for(var i=0; i<head.cells.length; i++) {
????column = head.cells[i];
????if(column.name==param.orderByName) {
?????this.orderByColumn = column;
?????this.orderByColumn.name = param.orderByName;
?????this.orderByColumn.orderBy = param.orderByType;
//?????column.childNodes[0].innerHTML = this.orderByColumnWithinInnerHTML + '<span class="x_list_order_' + param.orderByType + '">&nbsp;</span>'
?????break;
????}
???}
??}
?}
};

XList.prototype.dispose = function() {
?this.container = null; //container div
?this.table = null ;???? //contain headTable & bodyTable for table-layout:fixed;
?this.tableContainer = null;
?this.sequenced = null;
?????
?this.colored = null
?this.rowId = null
?this.rowType = null
?this.resizeable = null

?this.columns = null;
?
?while(this.rows.pop());
?this.rows = null;
?
?this.orderByColumn = null;
?this.orderByColumnInnerHTML = null;
?
?this.headColumn = null;? // exchange column order div
?this.exchangeTag = null;? // exchange tag div
?this.exchangeCell = null; // current be change column cell
?
?this.rowSequence = 0;
?this.handler = null; //all handler
?this.columnLength = 0;
?
?this.onRowClickHandler = null;
?this.onOrderByHandler = null;
?var the = null;
?this.columnExchangeable = null;
?this.onRowClickHandler = null;
?this.onOrderByHandler = null;
?this.onRowDblClickHandler = null;
?this.table = null;
?this.tableContainer = null;
}








.x_list_container {?
?width:100%;
?height:100%;
?overflow:auto;?
}

.x_list_head_row {
?height:22;
?/*position:relative;
?top:expression(this.offsetParent.scrollTop); */
}

.x_list_head_handle {?
?width:22;
?height:22;
?color:#3D4A69;
?font-size:12;
?font-weight:bold;
?text-align:center;
?background-color:#E9F0F4;
?font-family:Verdana, Simsun;
?border:1 solid;
?border-color:threedhighlight #688293 #688293 threedhighlight;
}

?

.x_list_head_asc? ,
.x_list_head_desc ,
.x_list_head_cell {
?border:1 solid;
?border-color:threedhighlight #688293 #688293 threedhighlight;
?height:22;
?color:#07215F;
?font-size:12;
?overflow:visible;
?word-wrap:normal;?
?white-space:nowrap;
?word-break:keep-all;
?text-overflow:ellipsis;
?background-color:#E9F0F4;?
?font-family:Verdana, Simsun;
?
}

.x_list_head_asc? {?background:url(../image/xlist/x_icon_asc.gif? ) no-repeat center right; }
.x_list_head_desc {?background:url(../image/xlist/x_icon_desc.gif ) no-repeat center right; }

?

.x_list_head_cell_over {
?border:1 solid;
?/*border-color:threedhighlight #CCCCCC #CCCCCC threedhighlight;*/
?border-color:threedhighlight #688293 #688293 threedhighlight;
?background-color:#F4F7F9;?
?height:22;
?color:#07215F;
?font-size:12;
?overflow:visible;
?word-wrap:normal;?
?white-space:nowrap;
?word-break:keep-all;
?text-overflow:ellipsis;
?font-family:Verdana, Simsun;
}
.x_list_head_cell_down {
?border:1 solid;
?border-color:#CCCCCC threedhighlight threedhighlight #CCCCCC;
?background-color:#D4DBDF;
?height:22;
?color:#07215F;
?font-size:12;
?overflow:visible;
?word-wrap:normal;?
?white-space:nowrap;
?word-break:keep-all;
?text-overflow:ellipsis;
?font-family:Verdana, Simsun;
}

.x_list_body_handle {?
?width:22;
?font-size:12;
?overflow:hidden;?
?text-align:center;?
?word-wrap:normal;?
?word-break:keep-all;
?font-family:Verdana, Simsun;
}

.x_list_body_cell {
?height:22;?
?font-size:12;
?padding-top:2;
?padding-left:2;?
?word-wrap:normal;?
?white-space:nowrap;
?word-break:keep-all;
?text-overflow:ellipsis;
?overflow:visible;
?font-family:Verdana, Simsun;
}

?

var XCheck = {
?checkAll: function(name) {
??var o = document.getElementsByName(name);
??var l = o.length;
??for (var i = 0; i < l; i++)
?? ??o[i].checked = window.event.srcElement.checked;
?},
?checkItem: function(name) {
??var e = window.event.srcElement;
?? ?var o = document.getElementById(name);
?? ?if (e.checked) {
???var items = document.getElementsByName(e.name);
???o.checked = true;
???var l = items.length;
???? ?for (var i = 0; i < l; i++) {
????if (!items[i].checked) {
?????o.checked = false;
?????break;
????}
???? ?}
?? ?} else {
???o.checked = false;
??}
?},
?uncheckAll: function (name) {
??var o = document.getElementsByName(name);
??var l = o.length;
??for (var i=0; i < l; i++)
?? ??o[i].checked = false;
?}
};

var XOption = {
?selectAll: function(name) {
??var o = document.getElementsByName(name);
??var l = o.length;
??for (var i = 0; i < l; i++)
?? ??o[i].checked = window.event.srcElement.checked;
?},
?unSelectAll: function(name) {
??var e = window.event.srcElement;
?? ?var o = document.getElementById(name);
?? ?if (e.checked) {
???var items = document.getElementsByName(e.name);
???o.checked = true;
???var l = items.length;
???? ?for (var i = 0; i < l; i++) {
????if (!items[i].checked) {
?????o.checked = false;
?????break;
????}
???? ?}
?? ?} else {
???o.checked = false;
??}
?},
?append: function (name) {
??var o = document.getElementsByName(name);
??var l = o.length;
??for (var i=0; i < l; i++)
?? ??o[i].checked = false;
?},
?remove: function (name) {
??var o = document.getElementsByName(name);
??var l = o.length;
??for (var i=0; i < l; i++)
?? ??o[i].checked = false;
?}
};







<html>
<head>
<title>XList</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>

<link href="resource.prototype.css" rel="stylesheet" type="text/css"></link>
<link href="../theme/default/style/index.css" rel="stylesheet" type="text/css"></link>
<script language="JavaScript" type="text/JavaScript" src="../../common/script/prototype.js"></script>
<script language="JavaScript" type="text/JavaScript" src="../../common/script/commons.js"></script>
<script language="JavaScript" type="text/JavaScript" src="../script/xlist.js"></script>

</head>?

<body style="margin:0;overflow-x:hidden;" scroll="no">

?

?

<script language="JavaScript" type="text/JavaScript">
<!--
function viewHtml(){
?$("result").innerHTML = '<xmp>' + $('container').outerHTML + '</xmp>';
}

function listCell(r, c) {
?var cell = list.cell(r , c);?
?if(cell) {
??$('result').innerHTML = 'cell.innerHTML = ' + cell.innerHTML;
?} else {
??$('result').innerHTML = 'cell not found';
?}
?
}
var row = {id:'id_1', data:['id_1','department1department1department1department1department1','name','sex','birthday','married','salar','title']};
var row2 = {id:'id_2', data:['id_2','department1department1department1department1department1','name','sex','birthday','married','salar','title']};

var rows = [
?{id:'id_10', checked:false, data:['id_10','department1','name','sex','birthday','married','salar','title']},//<input />
?{id:'id_20', checked:false, data:['id_20','department2','name','sex','birthday','married','salar','title']},
?{id:'id_30', checked:false, data:['id_30','department3','name','sex','birthday','married','salar','title']},
?{id:'id_40', checked:true, data:['id_40','department4','name','sex','birthday','married','salar','title']},
?{id:'id_50', checked:false, bgColor:'#0000FF', data:['id_50','department5','name','sex','birthday','married','salar','title']},
?{id:'id_60', checked:true, bgColor:'#0000FF', data:['id_60','department6','name','sex','birthday','married','salar','title']}
];

function resizeContainer() {
?if(parseInt($('containerTd').style.width) == 480) {
??$('containerTd').style.width = 560;
??$('containerTd').style.height = 360;
?} else {?
??$('containerTd').style.width = 480;
??$('containerTd').style.height = 270;
?}
}
function showResult(the, r) {
?$('result').innerHTML = the.value + ':<br />' + r;
}
//-->
</script>

?

?

?

?

?

?

<table style="width:100%;height:100%;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="height:30;border-bottom:1 solid #CCCCCC;" colspan="2">
?<strong>XList</strong>
</td>
</tr>
<tr>
<td style="border-right:1 solid #CCCCCC;padding:2;" align="center">

?
??
?<table id="containerTd" style="width:480;height:270;border:0px solid #FF0000;" cellspacing="0" cellpadding="0" border="1" align="center">
?<tr>
?<td style="width:100%;height:100%;">
??<div id="container" style="height:100%;width:100%;border:1px solid #0000FF;"></div>
?</td>
?<td style="width:1;height:100%;">
??1
?</td>
?</tr>
?</table>
??
?
??
?
?<script language="JavaScript" type="text/JavaScript">
?<!--
?var list = new XList();
?var columns = [
??{name:'id',text:'id',width:'40'},
??{name:'department',text:'department',width:'200'},//<input />
??{name:'user.name',text:'<span class="ss"></span>name',width:'100'},
??{name:'',text:'sex',width:'200'},
??{name:'user.birthday',text:'birthday',width:'200'},
??{name:'user.married',text:'married',width:'100'},
??{name:'user.salar',text:'salar',width:'200'},
??{name:'user.title', text:'title', width:'200'}
?];
?var columns2 = [?
??{name:'id',text:'id',width:'10%'},
??{name:'user.birthday',text:'birthday',width:'10%'},
??{name:'user.married',text:'married',width:'10%'},
??{name:'user.salar',text:'salar',width:'10%'},
??{name:'user.title', text:'title', width:'10%'},??
??{name:'department',text:'department',width:'10%'},//<input />
??{name:'user.name',text:'<span class="ss"></span>name',width:'30%'},
??{name:'22',text:'sex',width:'10%'}
?];?
?var columns3 = [?
??{name:'user.birthday',text:'birthday',width:'10%'},
??{name:'user.married',text:'married',width:'10%'},
??{name:'user.salar',text:'salar',width:'10%'},
??{name:'user.title', text:'title', width:'10%'},
??{name:'id',text:'id',width:'10%'},
??{name:'department',text:'department',width:'10%'},//<input />
??{name:'user.name',text:'<span class="ss"></span>name',width:'30%'},
??{name:'',text:'sex',width:'10%'}
?];?
?var context = {
??container:'container',
??sequence:true,
??rowType:'checkbox',
??rowId:'testId',?
??columnExchangeable:true,?
??onOrderByHandler:onOrderBy,
??onRowClickHandler:onRowClick,
??onRowDblClickHandler:onRowDblClick
?};
?function onRowClick(param) {
??$('result').innerHTML = 'param.rowId=' + param.rowId + '<br />param.checked=' + param.checked + '<br />param.colIndex=' + param.colIndex + '<br />param.row=' + param.row;
??for(var i=0; i<param.row.cells.length; i++) {
???$('result').innerHTML += '<br />' + param.row.cells[i].innerHTML;
??}??
?}
?function onRowDblClick(param) {
??$('result').innerHTML = 'onRowDblClick:<br />param.rowId=' + param.rowId + '<br />param.checked=' + param.checked + '<br />param.row=' + param.row;
??for(var i=0; i<param.row.cells.length; i++) {
???$('result').innerHTML += '<br />' + param.row.cells[i].innerHTML;
??}??
?}
?function onOrderBy(param) {
??$('result').innerHTML = 'param.name=' + param.name + '<br />param.orderBy=' + param.orderBy;
?}
?list.create(context, columns);
?//-->
?</script>

</td>
<td style="width:200;" align="center" valign="top">
?<div class="box" style="padding:2;">
?
??<input class="bn" type="button" value="resize? 改變大小" onclick="resizeContainer();" />
??<input class="bn" type="button" value="addRow? 添加一行" onclick="list.addRow(row, false);" />
??<input class="bn" type="button" value="addRow2? 添加另一行" onclick="list.addRow(row2, false);" />
??<input class="bn" type="button" value="addRows? 添加多行" onclick="list.addRows(rows);" />
??<input class="bn" type="button" value="remove? 刪除選中記錄" onclick="list.remove();" />
??<input class="bn" type="button" value="clear? 刪除全部記錄" onclick="list.clear();" />
??<input class="bn" type="button" value="size? 記錄行數(shù)" onclick="showResult(this, 'size=' + list.size());" />
??<input class="bn" type="button" value="value? 選中記錄值" onclick="showResult(this, 'value.length=' + list.value().length + '\nvalue=' + list.value());" />
??<input class="bn" type="button" value="valueAll? 全部記錄值" onclick="showResult(this, 'values.length=' + list.values().length + '\nvalues=' + list.values());" />
??<input class="bn" type="button" value="orderBy? 列表排序參數(shù)" onclick="showResult(this, 'orderBy.name=' + list.orderBy().name + '\norderBy.orderBy=' + list.orderBy().orderBy);" />
??<input class="bn" type="button" value="cell 2 , 0 定位單元格" onclick="listCell(2,0);" />
??<input class="bn" type="button" value="cell 2 , 1 定位單元格" onclick="listCell(2,1);" />
??<input class="bn" type="button" value="serialize 序列化選中記錄值" onclick="showResult(this, 'serialize=' + list.serialize());" />
??<input class="bn" type="button" value="serializeAll 序列化全部記錄值" onclick="showResult(this, 'serialize=' + list.serialize());" />
??<input class="bn" type="button" value="setColumns 重設(shè)置列頭" onclick="list.setColumns(columns2);" />??
??<input class="bn" type="button" value="setOrderByContext" onclick="list.setOrderByContext({orderByName:'user.birthday',orderByType:'asc'});" />
??<input class="bn" type="button" value="viewHtml? 查看源代碼" onclick="viewHtml();" />?
?
?</div>
</td>
</tr>
<tr>
<td style="width:100%;height:100;border-top:1 solid #CCCCCC;" colspan="2">

?<table style="width:100%;height:100%;table-layout:fixed;" cellpadding="0" cellspacing="0" border="0">
?<tr>
?<td>
??<div id="result" style="width:100%;height:100%;overflow:auto;padding:2;table-layout:fixed;">result</div>
?</td>
?</tr>
?</table>
?
</td>
</tr>
</table>

?

</body>
</html>

?

?

?

var Msg = {
?exceptionLayer:null,
?exceptionLayerMessage:null,
?exceptionLayerStackTrace:null,
?init: function() {
??var s = [];
??s[s.length] = '<div id="exceptionLayer" name="exceptionLayer" style="position:absolute;z-index:101;display:none;width:100%;height:100%;text-align:center;top:0;left:0;padding-top:100;">';
??s[s.length] = '<div class="font_exception" style="width:600;border:1px solid #FF0000;background-color:#FFFF00;padding:10px;filter:alpha(opacity=90)progid:DXImageTransform.Microsoft.Fade(duration=0.2)progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=135,strength=3);">';
??s[s.length] = '<div style="width:100%;height:22;text-align:left;">Exception occur:</div>';
??s[s.length] = '<div id="exceptionLayerMessage" name="exceptionLayerMessage" style="font-weight:bold;width:100%;height:50;overflow:auto;text-align:left;">&nbsp;</div>';
??s[s.length] = '<div style="width:100%;height:22;text-align:right;padding-top:5;"><input type="button" style="width:120;" value="Close" class="font_exception" style="border:1px solid #FF0000;" onclick="Msg.exceptionOff();" />&nbsp;<input type="button" style="width:120;" value="Detail >>" class="font_exception" style="border:1px solid #FF0000;" onclick="Msg.switchExceptionLayerStackTrace();" /></div>';
??s[s.length] = '<div id="exceptionLayerStackTrace" name="exceptionLayerStackTrace" style="width:100%;height:300;padding-top:5;overflow:auto;text-align:left;display:none;">&nbsp;</div>';
??s[s.length] = '</div>';
??s[s.length] = '</div>';??
??document.writeln(s.join(''));
??s = null;
??this.exceptionLayer = document.all.exceptionLayer;???
??this.exceptionLayerMessage = $('exceptionLayerMessage');
??this.exceptionLayerStackTrace = $('exceptionLayerStackTrace');
?},
?exception: function(e) {?? ?
? ??Cover.on();
? ??this.exceptionLayerStackTrace.style.display = 'none';
? ??this.exceptionLayer.style.display = 'block';? ??
? ??this.exceptionLayerMessage.innerHTML = '<xmp>' + e.message + '</xmp>';
? ??this.exceptionLayerStackTrace.innerHTML = '<xmp>' + e.stackTrace + '</xmp>';
? ?},
? ?switchExceptionLayerStackTrace: function() {? ?
? ??event.srcElement.value = ('Detail >>'==event.srcElement.value) ? 'Detail <<' : 'Detail >>';
? ??this.exceptionLayerStackTrace.style.display = ('none'==this.exceptionLayerStackTrace.style.display) ? 'block' : 'none';
? ?},
? ?exceptionOff: function() {
? ??Cover.off();
? ??this.exceptionLayer.style.display = 'none';
? ?}
}
Msg.init();

?

var Cover = {
?coverLayer:null,
?init: function() {
??document.writeln('<iframe id="coverLayer" name="coverLayer" frameborder="no" style="position:absolute;width:100%;height:100%;top:0;left:0;z-index:100;display:none;margin:0;padding:0;filter:alpha(opacity=10);"></iframe>');
??window.frames.coverLayer.document.close();
??this.coverLayer = document.all.coverLayer;
?},
?on: function() {
??this.coverLayer.style.display = 'block';
?},
?off: function() {
??this.coverLayer.style.display = 'none';
?}
};
Cover.init();

?

var Load = {
?loadLayer: null,
?init: function() {
??document.writeln('<div id="loadLayer" name="loadLayer" style="position:absolute;z-index:101;display:none;width:200;height:20;right:10;bottom:10;font-size:12px;font-family:Verdana,Simsun;background-color:#FFFF00;border:1px solid #FF0000;padding:2;cursor:hand;filter:progid:DXImageTransform.Microsoft.Fade(duration=0.2)progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=135,strength=3);" onclick="Load.off();" title="close"><span class="loader">&nbsp;</span>&nbsp;loading...</div>');
??this.loadLayer = document.all.loadLayer;
?},
?on: function() {
??Cover.on();
??this.loadLayer.style.display = 'block';
??window.status = 'loading...';
?},
?off: function() {
??Cover.off();
??this.loadLayer.style.display = 'none';
??window.status = 'loaded!';
?}
};
Load.init();









//css
.loader {
?border:0;?
?width:16;
?height:16;
?background: url(../image/loader.gif) no-repeat 0em 0em;
}
.font_exception {
?color: #A90101;
?font-size: 12px;?
?font-family: Verdana, Simsun;
}










//usage
function initAbstractEntityType() {
?J.request(
??????? 'findAbstractEntityType.html',
??????? '',
??????? onInitAbstractEntityType
?? ?);
}

function onInitAbstractEntityType(o) {
?var xtree = o.xtree;
?var item = null;
?for(var i = 0; i<xtree.length; i++ ) {
??item = xtree[i];
??//sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon
??tree.add(
???new WebFXLoadTreeItem(
????item.text + ' ' + item.name,
????'findEntityType.html?invokeType=tree&abstractEntityTypeId=' + item.id,
????'javascript:findEntityTypeByAbstractEntityTypeId(' + item.id + ');'
???)
??);
?}
?item = null;
?xtree = null;
}






//request.responseText
{
?entityTypes:[
<#if entityTypes ? exists><#list entityTypes as entityType>
??{id:'${(entityType.id)?if_exists}', text:'${(entityType.text)?if_exists}', name:'${(entityType.name)?if_exists}'}<#if entityType_has_next>,</#if>
</#list></#if>
?]
}

//exception
{
?exception: {
??message:'${(Request["_exception_message_"])?if_exists?j_string}',
??stackTrace:'${(Request["_exception_stack_trace_"])?if_exists?j_string}'
?}
}