DHTMLX中对dhtmlxgrid表格行的置顶置底操作，以及拖动排序功能的实现



大家好，这半年工作上有点小忙，好久没写博了。

今天，要给大家分享的是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]吧，他会乐于助你的,嘿嘿！）