大家好，這半年工作上有點小忙，好久沒寫博了。
今天，要給大家分享的是JS框架DHTMLX中的表格控件dhtmlxgrid的一組功能的實現，這些功能在高級版（付費版）中已經有相關的接口了。因爲在開發中需要，我費了前後一天時間（有點長，當時還在畢業實習呢，還算可以吧）寫了grid行的置頂置底功能，以及拖動排序功能，代碼寫的可能有些爛，本應抽時間重構一下的，但是呢沒有。在此，請大家對此功能有需要的，拷過去記着重構一下哦，不然你家產品經理打你我可不負責任哦，罪過，罪過，開玩笑了，貌似所有產品經理都長得很帥的！
/*
* @ 對系統中需要的表格進行置頂，置底以及使用拖拽方法進行排序
* author zhangwenyu
*/
function isSelectedCheck(param1,mygrid){ //指標置頂或者置底
if (mygrid.getSelectedRowId()==null) {
alert("請選中指標再做置頂!");
}else{
if(param1=="setTop"){ //檢查參數，識別是置頂還是置底
setTop(mygrid);
}else{
setBottom(mygrid);
}
}
}
function setTop(mygrid){ //指標列表置頂**********
var arr = getArrayOfIndicators(mygrid);
var indexs = getSelectedRowIndexs(mygrid);
var cellIndicatorArrayLength = mygrid.getColumnsNum()+1; //單位指標的數組長度(所有列的值加上行id)
var selectValues = [];
for (var n = 0; n < indexs.length; n++) { //獲取已選指標的列表
var cell = arr.slice(indexs[n] * cellIndicatorArrayLength, indexs[n] * cellIndicatorArrayLength + cellIndicatorArrayLength);
selectValues = selectValues.concat(cell);
}
for (var h = indexs.length; h > 0; h--) { //刪除已選指標列表
arr.splice(indexs[h - 1] * cellIndicatorArrayLength, cellIndicatorArrayLength);
}
arr.reverse(); //將除過已選的指標順序顛倒
selectValues.reverse(); //將已選的指標順序顛倒
var arry = arr.concat(selectValues).reverse(); //將已選的增加到未選的指標後面，然後重新顛倒，即置頂成功
reCreatMyrightgrid(arry,mygrid );
}
function setBottom(mygrid){ //指標列表置底**********
var arr = getArrayOfIndicators(mygrid);
var indexs = getSelectedRowIndexs(mygrid);
var cellIndicatorArrayLength = mygrid.getColumnsNum()+1; //單位指標的數組長度(所有列的值加上行id)
var selectValues = [];
for (var n = 0; n < indexs.length; n++) { //獲取已選指標的列表
var cell = arr.slice(indexs[n] * cellIndicatorArrayLength, indexs[n] * cellIndicatorArrayLength+ cellIndicatorArrayLength);
selectValues = selectValues.concat(cell);
}
for (var h = indexs.length; h > 0; h--) { //刪除已選指標列表
arr.splice(indexs[h - 1] * cellIndicatorArrayLength, cellIndicatorArrayLength);
}
var arr=arr.concat(selectValues);
reCreatMyrightgrid(arr,mygrid );
}
function getArrayOfIndicators(mygrid){ //獲取Grid表格數據對應的數組
var arr = [];
var rowNums = mygrid.getRowsNum(); //獲取指標總行數
var colNums = mygrid.getColumnsNum(); //獲取表格的列數
for (var i = 0; i < rowNums; i++) {
for (var j = 0; j < colNums; j++) {
arr.push(mygrid.cells2(i, j).getValue());
}
arr.push(mygrid.getRowId(i));
}
return arr;
}
function getSelectedRowIndexs(mygrid){ //獲取”導入指標列表“中選中指標的索引
var selectId = mygrid.getSelectedRowId().split(",");
var selectIndex = [];
for (var i = 0; i < selectId.length; i++) {
selectIndex[i] = mygrid.getRowIndex(selectId[i]);
}
return selectIndex.sort(sortNumber);//爲了刪除原有選中指標方便，在此首先對索引排序，先刪除索引大的
}
function sortNumber(a, b){ //數組根據數值排序的參數方法
return a-b;
}
function reCreatMyrightgrid(array,mygrid){ //刷新新的指標列表
mygrid.clearAll(false);
var cellIndicatorArrayLength = mygrid.getColumnsNum()+1; //單位指標的數組長度(所有列的值加上行id)
var newArray=[]; //用來存儲指標列表內容
var newArrayId=[]; //用來存儲新列表的Id
if(cellIndicatorArrayLength==6){ //如果表格總共有5列
for(var i=0;i<array.length;i=i+6){
newArray.push([array[i],array[i+1],array[i+2],array[i+3],array[i+4]]);
newArrayId.push(array[i+5]);
}
}else if(cellIndicatorArrayLength==5){ //如果表格總共有4列
for(var i=0;i<array.length;i=i+5){
newArray.push([array[i],array[i+1],array[i+2],array[i+3]]);
newArrayId.push(array[i+4]);
}
}else if(cellIndicatorArrayLength==4){
for(var i=0;i<array.length;i=i+4){
newArray.push([array[i],array[i+1],array[i+2]]);
newArrayId.push(array[i+3]);
}
}else if(cellIndicatorArrayLength==3){
for(var i=0;i<array.length;i=i+3){
newArray.push([array[i],array[i+1]]);
newArrayId.push(array[i+2]);
}
}
mygrid.parse(newArray,"jsarray");
for(var j=0;j<mygrid.getRowsNum();j++){ //爲新列表附上行id
mygrid.setRowId(j, newArrayId[j]);
}
}
//通過拖動排序3==================================================
function doOrderByDrag(sid,tid){ //通過拖動排序
var mygrid = this;
var selectedRow = mygrid.getSelectedRowId();
if(selectedRow==null){
alert("請選中後再拖動排序！");
return false;
}
var indexTarget = mygrid.getRowIndex(tid); //目標行的索引
var arr = getArrayOfIndicators(mygrid);
var indexs = getSelectedRowIndexs(mygrid);
var cellIndicatorArrayLength = mygrid.getColumnsNum()+1; //單位指標的數組長度(所有列的值加上行id)
var selectValues = [];
for (var n = 0; n < indexs.length; n++) { //獲取已選指標的列表
var cell = arr.slice(indexs[n] * cellIndicatorArrayLength, indexs[n] * cellIndicatorArrayLength + cellIndicatorArrayLength);
selectValues = selectValues.concat(cell);
}
for (var h = indexs.length; h > 0; h--) { //刪除已選指標列表
arr.splice(indexs[h - 1] * cellIndicatorArrayLength, cellIndicatorArrayLength);
}
if(sid>tid){
for(var i=0;i<selectValues.length;i++){
arr.splice(indexTarget*cellIndicatorArrayLength+i,0,selectValues[i]);
}
reCreatMyrightgrid(arr,mygrid);
}else{
var newIndexTarget = indexTarget+1-selectValues.length/cellIndicatorArrayLength;
if(newIndexTarget<0){
alert("排序無效！");
}else{
for(var i=0;i<selectValues.length;i++){
arr.splice(newIndexTarget*cellIndicatorArrayLength+i,0,selectValues[i]);
}
reCreatMyrightgrid(arr,mygrid);
}
}
}
//===================結束 //通過拖動排序3=======================
拷好了沒？我懶得檢查了，代碼裏面有“Indicator”指的是指標的意思，是統計部門的指標，所以最好改一下，不然你家產品經理又打你！！！哈哈，因爲你寫的這嘛意思他看不懂啊！！（實在需要幫助，請找[email protected]吧，他會樂於助你的,嘿嘿！）