用，bootstrapHandsontable做表格，手动实现数据排序

商品graph帐票时，用（bootstrap）Handsontable做表格，手动实现数据排序

待解决的问题：

　　若使用控件本身的排序，必须指定colHead，colHead不能被copy，若想表头被copy，只隐藏一行表头数据是行不通的，因为排序的时候表头数据会被排了

解决的大概思路

　　给数据中的第一行加上click事件，点击实现排序，排序过的数组，用控件重新加载成表格，hot.loadData(data);

　　不设置表头，将表头表示为第一行数据。

　　在定义的第一行的渲染函数中，给该行数据绑定事件:bind.（“click”,function(){...}）

其中遇到的问题：

　　1.关于值传递。object1=object2，这样之后，不是将object2中的值复制一份给object1，而是将object2的地址给了object1一份，这样操作object1时即在操作object2，里面的内容会发生改变。

　　　　解决办法：dataTmp=JSON.parse(JSON.stringify(src.Rows));

　　　　　　　　　将对象或者数组先转换成字符串JSON.stringfy，再由JSON.parse方法转换为json对象，复制给另一个对象内容，不是源对象的地址

　　2.每一次bind一个事件的时候，避免出现绑定的一个事件执行多次（说明多次绑定了）

　　　　解决办法：应该在每次绑定前确保

　　　　　　　　　先解除绑定（不用判断是否有绑定），再绑定

  var collen=0; //数据列数
  for (var i=0;;i++) {
    if (datashow.Rows[0]["F"+i]){
      collen++;
    }else {
      break;
    }
  }
    
  var data={};
  var arr=[];
  for (var j=0;j<datashow.Rows.length;j++){
    var tmpobj={};
    for (var i=0;i<collen-1;i++) {//去掉元数据中的第3列
      if (i<2){
//          dataTmp2[j]["F"+i]=dataTmp[j]["F"+i]
          tmpobj["F"+i]=datashow.Rows[j]["F"+i];
        }else {
//          dataTmp2[j]["F"+i]=dataTmp[j]["F"+(i+1)]
          tmpobj["F"+i]=datashow.Rows[j]["F"+(i+1)];
        }
      }
      arr.push(tmpobj);
    }
    data["Rows"]=arr;
    copyDatatmp=data.Rows;
  
  var flg={"F0":2,"F2":2,"F3":2,"F8":2};
  //表头渲染函数--手动添加排序功能
  var headRenderer = function(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments); 
    td.style.backgroundColor = '#00619C';
    td.style.color = '#FFFFFF';
    td.style.textAlign="center";
    td.style.verticalAlign="middle";
    td.style.overflow = 'hidden';
    td.style.whiteSpace = 'nowrap';
    td.style.textOverflow = 'ellipsis';
      if (col==0||col==2) {//给1,2列加上排序功能
        if (flg["F"+col]==2) {//0,1,2--数据状态 2数据原来的顺序,1数据增序,0数据减序
          $(td).append("<span class='sortAble' +"images/icon/icon-sortable.png"+");background-repeat: no-repeat;background-position-y: 3px;background-position-x: 3px;'>&nbsp;&nbsp;&nbsp;</span>");
        }else if(flg["F"+col]==0){
              。。。
          } else {
              。。。
          }
        $(td).off("mouseover");//先解绑，后绑定
        $(td).off("click");//
        $(td).bind("mouseover",function(e){
          this.style.cursor='pointer';
        });
        
        $(td).bind("click",function(e){
          if (flg["F"+col]==2){
              flg["F"+col]=0;
             sortByCol(dataTmp,col,0);  
          } else if(flg["F"+col]==0){
              。。。
          } else {
              。。。
          }
          return;
        });
      }
    }
  };
  sortByCol=function(dataTmp,col,order) {//自定义一个排序函数
    var dataTmp1=JSON.parse(JSON.stringify(dataTmp));//用数据的备份排序
    if (order!=2) {       
      var name="F"+col;
      dataTmp1.sort(byCol(name,order));
    }
    var allDataTmp = getAllData(headp, dataTmp2.Rows);
    delete allDataTmp[0]["F"+collen];//删除 js对象中的某一个属性 pro={F1:1,F2:2}  删除F1--> delete pro["F1"]

    hot.loadData(allDataTmp);//重新加载handsontable的表格数据
  }
  
  function byCol(propertyName,order) { //自定义的sort函数
    return function(object1, object2){
      var val1 = object1[propertyName];
      var val2 = object2[propertyName];
//      var reg = new RegExp("^[0-9]*$"); 
      var reg = /^-?\d+\.?\d*$/;  
      var value1,value2;
      if (reg.test(val1)&& reg.test(val2)){
         value1=parseFloat(val1);
         value2=parseFloat(val2);
      }else {
        value1=val1;
        value2=val2;
      }
      if(order==0) {
        if (value1   <  value2){     
          return -1; 
        }else if (value1   >  value2){  
          return 1;  
        }else {
         return 0; 
        } 
       }else {
         if (value1   >  value2){     
           return -1; 
         }else if (value1   <  value2){  
           return 1;  
         }else {
          return 0; 
         } 
       }
      }     
   }
  var  sumRenderer = function(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments); 
    td.title = value;
    if (mode==0&&outtype==0) {
      if (col>3){
        td.innerText = toMoney(value);
        td.style.textAlign="right";
      }else {
        td.innerText = "合計";
        td.style.textAlign="center";
      }
      td.style.fontWeight="bold";
    }else if(mode==0&&outtype==1){
      if (col>2){
        td.innerText = toMoney(value);
        td.style.textAlign="right";
      }else {
        td.innerText = "合計";
        td.style.textAlign="center";
      }
      td.style.fontWeight="bold";
    }
    
    td.style.color = '#000000';
    
    
    td.style.verticalAlign="middle";
    td.style.overflow = 'hidden';
    td.style.whiteSpace = 'nowrap';
    td.style.textOverflow = 'ellipsis';
    
  };
//  var n=0;
  
  
  var  dataRenderer = function(instance, td, row, col, prop, value, cellProperties) {
   Handsontable.renderers.TextRenderer.apply(this, arguments);
   var key="R"+row;
   //var d=data.Rows[row];
   var d=instance.getData()[row];
   if (mode>0&&d["F6"].indexOf("退")>-1) {
     td.style.backgroundColor = '#AAAAAA';
   }
   
   td.title = value;
   if (mode==1&&col>7) {
     if (value.indexOf("_")>0) {
       td.innerText = toMoney(value.split("_")[0]);
     }else {
       td.innerText = toMoney(value);
     }
   }
   td.style.color = '#000000';
   td.style.verticalAlign="middle";
   td.style.overflow = 'hidden';
   td.style.whiteSpace = 'nowrap';
   td.style.textOverflow = 'ellipsis';
  };
  
  $('#grid').empty();
  h = document.documentElement.clientHeight - 220;
  $('#grid').css("height",h);
  var container = document.getElementById('grid');  
  var mergeCell={};
  var fozenCol=0;
  if (mode==0&&outtype==0) {
    mergeCell={row: 1, col: 0, rowspan: 1, colspan:4};
    fozenCol=4;
  }else if(mode==0&&outtype==1){
    mergeCell={row: 1, col: 0, rowspan: 1, colspan:3};
    fozenCol=3;
  }else {
    fozenCol=9;
  }
  hot = new Handsontable(container, {
     data:data.Rows,
       fixedRowsTop: 1,
       fixedColumnsLeft: fozenCol,
       autoColumnSize:true,
       fillHandle:true,
//       colHeaders:colHeadersflg,

       currentRowClassName: 'currentRow',          
       cell: [
              {row: 0, col: 0, className: "htMiddle"}  //居中
              ],
       cells: function (row, col, prop) { 
         var cellPropertiess = {};
         if(row==0){
           cellPropertiess.renderer = headRenderer;
         }else if(mode==0&&row==1){
           cellPropertiess.renderer = sumRenderer;
         }else {
           cellPropertiess.renderer = dataRenderer;
         }
         cellPropertiess.readOnly = true;
            return cellPropertiess;
       },
       mergeCells: [mergeCell]
  });
  init(mode,outtype);