隨筆-6  評論-0  文章-3  trackbacks-0
            2006年12月11日

          function XPagination() {
          ?this.container = null;
          ?
          ?this.width = '100%';?
          ?this.count = 0; // record total count
          ?this.index = 1; // page index
          ?this.size = 10; // record count per page
          ?this.length = 0;// current page record count
          ?this.onPaginationHandler = null;
          ?
          ?this.first = null;
          ?this.back = null;
          ?this.next = null;
          ?this.last = null;
          ?this.info = null;
          ?
          ?this.jump = null;
          ?this.resize = null;
          ?this.jumper = null;
          ?this.resizer = null;
          }
          XPagination.prototype.init = function(context) {
          ?this.context = context;
          ?this.width = (this.context.width) ? this.context.width : '100%';
          ?this.count = (this.context.count) ? this.context.count : 0;?
          ?this.index = (this.context.index) ? this.context.index : 1;?
          ?this.size = (this.context.size) ? this.context.size : 10;
          ?this.length = (this.context.length) ? this.context.length : 0;?
          ?this.onPaginationHandler = (this.context.onPaginationHandler) ? this.context.onPaginationHandler : null;
          };

          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>

          ?

          ?

          posted @ 2006-12-11 00:51 frogfool 閱讀(342) | 評論 (0)編輯 收藏


          function XList() {?
          ?this.container = null; //container div
          ?this.table = null ; //contain headTable & bodyTable for table-layout:fixed;
          ?this.tableContainer = null; //for scroll table
          ?
          ?this.sequenced = true; // set sequence for rows or not
          ?this.colored = true; // set color for rows or not
          ?
          ?this.rowId = 'rowId';
          ?this.rowType = 'checkbox';
          ?//resize head column
          ?this.resizer = null;
          ?this.resizeable = true;
          ?this.resizing = false; // doing resize or not?
          ?this.resizeClientX = 0;
          ?this.resizeOffsetWidth = 0;
          ?this.resizeHead = null;
          ?
          ?this.columns = null;
          ?
          ?this.rows = [];
          ?
          ?this.orderByColumn = 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.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? 記錄行數" 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? 列表排序參數" 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 重設置列頭" 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>

          ?


          ?

          posted @ 2006-12-11 00:49 frogfool 閱讀(1379) | 評論 (0)編輯 收藏
            2006年11月22日

          package com.gxlu.common.web.webwork.intercepter;

          import java.io.StringWriter;
          import java.util.HashMap;
          import java.util.Iterator;
          import java.util.Map;
          import java.util.Properties;

          import org.apache.commons.logging.Log;
          import org.apache.commons.logging.LogFactory;

          import com.gxlu.common.web.webwork.action.AjaxJSONAction;
          import com.gxlu.common.web.webwork.action.AjaxUpdaterAction;
          import com.gxlu.common.web.webwork.action.AjaxXMLAction;
          import com.opensymphony.webwork.ServletActionContext;
          import com.opensymphony.xwork.Action;
          import com.opensymphony.xwork.ActionInvocation;
          import com.opensymphony.xwork.interceptor.Interceptor;

          /**
          ?* Interceptor to handle Exceptions thrown by Actions.
          ?* <p>
          ?* <a href="ExceptionHandlerInterceptor.java.html"> <i>View Source </i> </a>
          ?* </p>
          ?*?
          ?*/
          public class ExceptionInterceptor implements Interceptor {
          ?public static final String EXCEPTION = "exception";

          ?protected final Log logger = LogFactory.getLog(getClass());

          ?private Map exceptionMappings;

          ?/**
          ? * Set the mappings between exception class names and result names.
          ? *
          ? * @param mappings
          ? *??????? fully qualified exception class names as keys, and result names as
          ? *??????? values
          ? */
          ?public void setExceptionMappings(Properties mappings) throws ClassNotFoundException {
          ??this.exceptionMappings = new HashMap();

          ??for (Iterator it = mappings.keySet().iterator(); it.hasNext();) {
          ???String exceptionClassName = (String) it.next();
          ???String viewName = mappings.getProperty(exceptionClassName);
          ???Class exceptionClass = Class.forName(exceptionClassName, true, Thread.currentThread().getContextClassLoader());
          ???this.exceptionMappings.put(exceptionClass, viewName);
          ??}
          ?}

          ?/**
          ? * Invoke action and if an exception occurs, route it to the mapped result.
          ? */
          ?public String intercept(ActionInvocation invocation) throws Exception {
          ??String result = null;

          ??try {
          ???result = invocation.invoke();
          ??} catch (Throwable e) {
          ???logger.error(e);
          ???//
          ???result = EXCEPTION;
          ???//
          ???StringWriter writer = new StringWriter();
          ???e.printStackTrace(new java.io.PrintWriter(writer));
          ???ServletActionContext.getRequest().setAttribute("_exception_stack_trace_", writer.toString());
          ???ServletActionContext.getRequest().setAttribute("_exception_message_", e.getMessage());
          ???writer = null;
          ???Action action = invocation.getAction();
          ???if(action instanceof AjaxJSONAction) {????
          ????return "exception.json";
          ???} else if(action instanceof AjaxXMLAction) {
          ????return "exception.xml";
          ???} else if(action instanceof AjaxUpdaterAction) {
          ????return "exception.updater";
          ???}
          ???/**
          ??? * // check for specific mappings if (this.exceptionMappings !=
          ??? * null) { for (Iterator it =
          ??? * this.exceptionMappings.keySet().iterator(); it.hasNext();) {
          ??? * Class exceptionClass = (Class) it.next(); if
          ??? * (exceptionClass.isInstance(ex)) { result = (String)
          ??? * this.exceptionMappings.get(exceptionClass); } } } if (null ==
          ??? * result || "".equals(result)) { result = EXCEPTION; }
          ??? */
          ??}
          ??return result;

          ?}

          ?public void destroy() {
          ?}

          ?public void init() {
          ?}
          }

          posted @ 2006-11-22 22:57 frogfool 閱讀(352) | 評論 (0)編輯 收藏

          //ajax support
          var J = {?
          ?request: function(url, param, onComplete) {??
          ??new Ajax.Request(
          ??????? ?url,
          ???????? {
          ???????? ?method: 'post',
          ???????? ?parameters: param,
          ???????? ?onComplete: function(request) {
          ???????? ??var o = eval('(' + request.responseText + ')');
          ?????if(null != o.exception) {
          ??????Load.off();
          ??????Msg.exception(o.exception);??
          ?????} else {
          ?????????? ?(onComplete || Prototype.emptyFunction)(o);
          ????????? ?}
          ????????? ?o = null;
          ????},
          ???????? ?onLoading: function(request) {
          ?????Load.on();
          ????},
          ????onLoaded: function(request) {
          ?????Load.off();
          ????}
          ???????? }
          ?? ??);
          ? ?},
          ?
          ? ?update: function(url, param, container) {??
          ? ??new Ajax.Updater(
          ?? ?container,
          ?? ?url,
          ?? ?{
          ?? ??method: 'post',
          ??? ?asynchronous: true,
          ??? ?evalScripts: true,
          ????parameters: param,
          ????onLoading: function(request) {
          ?????Load.on();
          ????},
          ????onLoaded: function(request) {
          ?????Load.off();
          ????}
          ???}
          ??);
          ? ?}?
          };

          ?


          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}'
          ?}
          }

          posted @ 2006-11-22 22:35 frogfool 閱讀(477) | 評論 (0)編輯 收藏
            2006年2月8日
          All run well on Eclipse 3.1 .

          Amateras Eclipse HTML Editor

          Amateras Eclipse HTML Editor
          Homepage http://amateras.sourceforge.jp/cgi-bin/fswiki_en/wiki.cgi?page=EclipseHTMLEditor
          Download https://sourceforge.jp/projects/amateras/files/
          Dependencies GEF: http://www.eclipse.org/gef
          Description Eclipse HTML Editor is an Eclipse plugin for HTML/JSP/XML Editing.
          It works on Eclipse 3.0 (or higher), JDT and GEF.
          It has following features.
          • HTML/JSP/XML/CSS Hilighting
          • HTML/JSP Preview
          • JSP/XML Validation
          • Contents Assist (HTML Tags/Attributes, XML based on DTD and JSP taglib and more)
          • Wizards for creating HTML/JSP/XML files
          • Outline View
          • Editor Preferences
          • Editor Folding
          • Web Browser (It works as an Eclipse's editor)
          • Image Viewer
          • Tag Palette
          • CSS code completion and outline
          Usage http://amateras.sourceforge.jp/docs/FacesIDE/HtmlEditor.html

          XMLBuddy

          XMLBuddy
          Homepage http://www.xmlbuddy.com/
          Download http://xmlbuddy.com/2.0/licensed.html
          Dependencies  
          Description http://xmlbuddy.com/2.0/features.html
          Usage  

          Freemarker IDE

          Freemarker IDE
          Homepage http://www.freemarker.org/editors.html
          Download http://sourceforge.net/project/showfiles.php?group_id=794
          Dependencies  
          Description  
          Usage  

          JSEclipse

          JSEclipse
          Homepage http://amateras.sourceforge.jp/cgi-bin/fswiki_en/wiki.cgi?page=EclipseHTMLEditor
          Download http://www.interaktonline.com/Products/Eclipse/JSEclipse/Try-Download/
          Dependencies The Eclipse SDK version 3.1 or higher
          The Java Runtime Environment version 5.0 or higher
          Description http://www.interaktonline.com/Products/Eclipse/JSEclipse/Overview
          Usage  

          SQLExplorer

          SQLExplorer
          Homepage http://eclipsesql.sourceforge.net/
          Download http://sourceforge.net/project/showfiles.php?group_id=132863
          Dependencies  
          Description Eclipse IDE plugin for database query/schema viewer for nearly any kind of JDBC database.
          It supports plugins for specialized functionality for individual databases and data tools ( like Hibernate, Oracle or Sybase )
          Usage  

          Properties Editor

          Properties Editor
          Homepage http://propedit.sourceforge.jp/index_en.html
          Download http://sourceforge.jp/projects/propedit/
          Dependencies  
          Description  
          Usage  

          SpringIDE

          Spring IDE
          Homepage http://www.springframework.org/download
          Download Updatesite: http://springide.org/updatesite/
          Download: http://springide.org/updatesite/
          Dependencies  
          Description  
          Usage  

          JettyLauncher

          Jetty Launcher
          Homepage http://jettylauncher.sourceforge.net/
          Download Updatesite: http://jettylauncher.sourceforge.net/updates
          Dependencies  
          Description  
          Usage  
          posted @ 2006-02-08 11:54 frogfool 閱讀(1711) | 評論 (0)編輯 收藏
            2006年1月10日
          Spring對log4j的增強
          原文出處及討論: http://www.aygfsteel.com/calvin/archive/2005/12/31/26150.html

          Spring最擅長的,就是在別家的蛋糕上再加些cream,讓你J2EE without Spring的時候心癢癢。

          log4j,可以有如下的cream:
          1. 動態的改變記錄級別和策略,不需要重啟Web應用,如《Effective Enterprise Java》所說。
          2. 把log文件定在 /WEB-INF/logs/ 而不需要寫絕對路徑。
          3. 可以把log4j.properties和其他properties一起放在/WEB-INF/ ,而不是Class-Path。

          在web.xml 添加


              <context-param>
                  <param-name>log4jConfigLocation</param-name>
                  <param-value>WEB-INF/log4j.properties</param-value>
              </context-param>

              <context-param>
                  <param-name>log4jRefreshInterval</param-name>
                  <param-value>60000</param-value>
              </context-param>

              <listener>
                  <listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>
              </listener>


          在上文的配置里,
          Log4jConfigListener會去WEB-INF/log4j.propeties 讀取配置文件;
          開一條watchdog線程每60秒掃描一下配置文件的變化;
          并把web目錄的路徑壓入一個叫webapp.root的系統變量。
          然后,在log4j.properties 里就可以這樣定義logfile位置

              log4j.appender.logfile.File=${webapp.root}/WEB-INF/logs/myfuse.log
           
          如果有多個web應用,怕webapp.root變量重復,可以在context-param里定義webAppRootKey。


          posted @ 2006-01-10 11:15 frogfool 閱讀(389) | 評論 (0)編輯 收藏
          僅列出標題  
          主站蜘蛛池模板: 志丹县| 沧州市| 博爱县| 饶平县| 邵东县| 黄冈市| 绍兴县| 保山市| 锦州市| 东台市| 固始县| 吴川市| 囊谦县| 裕民县| 六枝特区| 威宁| 班戈县| 建水县| 定南县| 乌拉特后旗| 鄂伦春自治旗| 万载县| 陈巴尔虎旗| 墨脱县| 祁东县| 涿州市| 汉源县| 盐山县| 盐城市| 岑溪市| 绥芬河市| 习水县| 金塔县| 满洲里市| 东乡| 临西县| 石嘴山市| 温州市| 灌南县| 井冈山市| 宁化县|