商品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一個事件的時候，避免出現綁定的一個事件執行多次（說明多次綁定了）
解決辦法：應該在每次綁定前確保該對象沒有該類綁定事件$(td).off("click");
先解除綁定（不用判斷是否有綁定），再綁定
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' style='background-image:url("+"images/icon/icon-sortable.png"+");background-repeat: no-repeat;background-position-y: 3px;background-position-x: 3px;'> </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);