birt系列（2）--拖动表头调整列宽

就显示而言，birt 报表 一般设置为自动布局，浏览器视窗内，能做到自动布局，如果列太多，自动布局情况下，会导致单元格内显示的字自动换行等问题。解决办法是对单元格应用样式；

 

n年前我写过一个自定义表格设计器，能拖动列宽，总结一下：

准备工作：

1. 定义一个对象，存放拖动相关信息，如拖动开始的坐标等。
2. 定义一个对象，包装坐标信息，好像也可以不包装吧。
3. 准备拖动条，放到table head中
4. 准备一个标记红线，放入document当中，拖动的过程，用红线标记

准备代码如下：

//拖动手柄，放到table header中
var dragBarStr=" <span class='resizeDivClass'>&nbsp;&nbsp;</span>"; //改变尺寸的把手 

.resizeDivClass{
   text-align:right;
   width:1px;
   height:18
   margin:0px 0 0px 0;
   background:#fff;
   border:0px;
   float:right;
   cursor:e-resize;
   background-image:url(./images/righttable_bg.jpg); repeat-y;
} 


//准备一个标记红线，放入document当中，拖动的过程，用红线标记

<div id="dragLineY" class="draggable" style="display:none;cursor:e-resize;background:red;width:1px;height:100px;position:absolute; z-index:10s">

//存放拖动相关信息的对象：
var _design={				 //设计器对象
		tab:null,
		cancelFoucs:false,   //由于插入行 插入列 删除行 删除列 增加行 增加列后失去焦点
		mouseOffset:null,   //坐标
		dragObject:null,   //当前拖动对象+
		dragHorizontalLine:null,
		dragObjectX:0,     //拖动对象开始x
		dragObjectY:0,      //拖动对象开始y
		currentTdHead:null,   //当前单元格头
		colHeads:null,    //列头对象
		rowHeadOpObj:null  //行头操作对象
	};

/** 根据事件对象包装成鼠标坐标对象* */
function mousePosition(event){
		var x=parseInt(event.clientX)
		var y=parseInt(event.clientY)
		return new MousePoint(x,y)
}

/** 鼠标位置* */
function MousePoint(x,y){
	this.x=x;
	this.y=y;

}

拖动事件：

按下鼠标左键

拖动鼠标

释放鼠标左键

如果在拖动条上按下鼠标键，（onmiusedown）,

记录原始信息：

   a)关联的TH,(table）

   b)x坐标(横坐标)

   c)定位“标识红线“的位置与长度,且显示红线

也许还应该记录TH的序号？这个才是基础信息？如果有这个，TH不用特别记录。

释放鼠标的时候：

1、计算拖动的距离

2、修正表格宽度

3、修正相关th宽度

4、修正colgroup col 的值

未完 待补充

上一节 ：冻结表头

下一节：自定义显示列