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>

 

 

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>