2006年1月10日随笔档案 - Meta Model Enabling

2006年1月10日

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"> 第<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> </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 = '   (共<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' : '') + '> ' + i + ' </option>';;
   }
   //alert(o.join(''));
   this.jumper.innerHTML = ' <select id="jump" style="font-size:10;" class="x_select" title="jump to">' + o.join('') + '</select> ';

   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>

</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">

</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 阅读(337) | 评论 (0) | 编辑收藏

XList

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 = ' # ';
  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 = ' ';
   }
   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 + '"> </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;
}

</head>

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']}
];

<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">

</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">

</body>
</html>

posted @ 2006-12-11 00:49 frogfool 阅读(1371) | 评论 (0) | 编辑收藏

ExceptionInterceptor

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 阅读(347) | 评论 (0) | 编辑收藏

ajax support (prototyp.js required)

//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();
    }
   }
  );
}
};

posted @ 2006-11-22 22:35 frogfool 阅读(472) | 评论 (0) | 编辑收藏

Eclipse实用插件安装及使用

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 阅读(1668) | 评论 (0) | 编辑收藏

Spring对log4j的增强

Spring对log4j的增强
原文出处及讨论: http://www.blogjava.net/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 阅读(382) | 评论 (0) | 编辑收藏

Amateras Eclipse HTML Editor

XMLBuddy

Freemarker IDE

JSEclipse

SQLExplorer

Properties Editor

SpringIDE

JettyLauncher

常用链接

留言簿(1)

随笔分类

随笔档案

文章档案

相册

搜索

最新评论

阅读排行榜

评论排行榜