
  <style type="text/css">
  /* this css from http://www.cnblogs.com/rubylouvre/archive/2009/08/13/1544365.html copyright rubylouvre */
    .filament_table {
      background:white;font-size:13px;font-family:宋体;
      border-collapse:collapse !important;   
      border-top:1px solid #C1DAD7;
      border-left:1px solid #C1DAD7;
      table-layout:fixed;
    }

    .filament_table thead th {
      background:#E7EBFF;
      color:green;
      border-bottom:1px solid #C1DAD7;
      border-right:1px solid #C1DAD7;
      padding:2px 5px;
    }

    .filament_table tbody td,.filament_table tbody th {
      border-bottom:1px solid #C1DAD7;
      border-right:1px solid #C1DAD7;
      padding:2px 5px;
      color:black;
    }
    .filament_table tbody td a{
      text-decoration:none;
      /* color:black; */
    }
    .filament_table tbody  {
      background:#F7FBFF;
    }
   .pager{
    color:blue; 
    font-weight:bold;
    cursor:hand; 
    text-decoration:underline;
    }
   .flagDiv{
       position:absolute;
       top:10;left:10;
       background:white;
       border:1px #8CA6DE solid;
       visibility:hidden;
    } 
    .menutable{
       font-size:13px;font-family:宋体;
    }
  </style>

<script  type="text/javascript" language="javascript">
//this js from http://www.cnblogs.com/rubylouvre/archive/2009/08/13/1544365.html copyright rubylouvre
   var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }
    var extend = function(destination, source) {
      for (var property in source) {
        destination[property] = source[property];
      }
      return destination;
    }
    var TableSorter =  Class.create();//表格排序器
    TableSorter.prototype = {
      initialize:function(options){//★★入口函数兼构造函数★★
        this.setOptions(options);
        this.sortTable(this.options.table_id);
      },
      setOptions:function(options){
        this.options = { //这里集中设置默认属性
          table_id:null//必选项
        };
        extend(this.options, options || {});//这里是用来重写默认属性
      },
      ID:function(id){return document.getElementById(id) },//getElementById的快捷方式
      CE:function(tag){return document.createElement(tag) },//getElementById的快捷方式
      TN:function(){//getElementsByTagName的快捷方式
        if(arguments.length == 1){
          return document.getElementsByTagName(arguments[0])
        } else if(arguments.length == 2){
          return arguments[0].getElementsByTagName(arguments[1])
        }
      },
      sortTable:function(id){//★★核心函数，所有方法在这时集中调用★★
        var $ = this,
        table = $.ID(id);
        if(table == null){ throw "this table is inexistence!"; return };
        var tbody = $.TN(table,"tbody")[0],
        rows = $.TN(tbody,"tr"),
        up = $.CE("span"),
        index = [];
        //  把要排序的行的引用放到index数组中。
        for (var i=0,l = rows.length; i < l; i++) {
          index[i] = rows[i];
        }  //#A9EA00
        up.style.cssText = "font:normal lighter 1em/100% sans-serif;color:Silver;background:;";
        up.innerHTML = "▲"
        var down = up.cloneNode(true);
        down.innerHTML = "▼"
        table.onclick = function(){
          var e = arguments[0] || window.event,
          th = e.srcElement ? e.srcElement : e.target,
          thn = th.nodeName.toLowerCase(),
          theadn = th.parentNode.parentNode.nodeName.toLowerCase();
          if(thn == 'th' && theadn == 'thead'){
            var colIndex = th.cellIndex;
            $.colsStatus[colIndex] = ($.colsStatus[colIndex] == null) ? 1 : $.colsStatus[colIndex] * -1;
            index.sort($.sortby(colIndex,$));
            if($.colsStatus[colIndex] > 0){
              th.appendChild(up);
              if(th.innerHTML.toLowerCase().search(/▼/) != -1){
                th.removeChild(down);
              }
            }else{
              th.appendChild(down);
              if(th.innerHTML.toLowerCase().search(/▲/) != -1){
                th.removeChild(up);
              }
            }
           window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            var fragment = document.createDocumentFragment();
            for(var i=0,l = index.length; i < l; i++) {
              fragment.appendChild(index[i]);
            }
            tbody.appendChild(fragment);
            for(var i=0 ,l = $.checkedElements.length;i< l; i++){
              $.checkedElements[i].checked = true;
            }
          }
        }
      } ,
      checkedElements:[],
      colsStatus:[],
      sortby : function (colIndex,$) {
        var _cellIndex = colIndex;
        return function (row1, row2) {
          var value1 = $.format(row1.cells[_cellIndex].innerText),
          value2 = $.format(row2.cells[_cellIndex].innerText),
          result = 0;
          switch(typeof value1){
            case "string":
              result = value1.localeCompare(value2);
              break;
            case "number" :
              result = value1 - value2;
              break;
            case "boolean" : /*处理radio与checkbox*/
              var input1 = $.TN(row1.cells[_cellIndex],'input')[0];
              value1 = input1.checked;
              value1 = (value1 == true) ? 1 :0;
              if(value1){
                $.checkedElements.push(input1);
              }
              value2 = $.TN(row2.cells[_cellIndex],'input')[0].checked;
              value2 = (value2 == true) ? 1 :0;
              result = value1 - value2;
              break;
          }
          result *=  $.colsStatus[_cellIndex];
          return result;
        };
      },
      format : function(s){
        if(/^\d+$/.test(s)){/*如果是正整数*/
          return parseInt(s,10)/*确保它的类型为number*/
        }else if(/^(-?\d+)(\.\d+)$/.test(s)){/*如果是浮点数*/
          return parseFloat(s, 10)/*确保它的类型为number*/
        }else if(/^(\d{4})-(\d{1,2})-(\d{1,2})$/.test(s)){/*如果是日期*/
          return Date.parse(s.replace(/\-/g, '/'));/*确保它的类型为number*/
        }else if(/\%$/.test(s)){/*如果是百分数*/
          return Number(s.replace("%", ""));/*确保它的类型为number*/
        }else if(s.toLowerCase().search(/(type=)"?(radio)"?/)!=-1){
          return true;/*确保它的类型为boolean*/
        }else if(s.toLowerCase().search(/(type=)"?(checkbox)"?/)!=-1){
          return false;/*确保它的类型为boolean*/
        } else {/*如果是字符串*/
          return s.toUpperCase()
        };
      }

    }

    window.onload = function(){
      new TableSorter({table_id:"ITEMTABLES"});
    }

  function PupupMenu(o)
  {
     if (window.event.clientY > 500)     
     o.style.top=ITEMTABLES.offsetHeight-10;
     else o.style.top=window.event.clientY;

     o.style.left=window.event.clientX+10;  

     o.style.visibility='visible';
  ///   alert(event.clientY);
  }
  function HideMenu(o)
  {
    o.style.visibility='hidden'; 
  }
</script>