Crystal Report repeat group header when change page

還是先嫌棄Crystal Report一下...真是很難用阿阿阿～
加上奇怪的中文翻譯～害我爬文爬很久，就是看不到像樣的鬼... 造成更多的誤解！！！！！

這次的需求其實也算合理，就是xls table式的排版，然後資料列太多，在下一頁上方顯示表頭。
一般情況應該很簡單，就是把表頭做在Crystal Report內的「頁首」就好～

BUT...人生就是有個BUT！
我的報表是有group分類的........天曉得group那時候換下個group...
搞不好人家剛好分段下面，下一頁又是漂亮的開始～所以基本上～這就會變成是動態的～
前一頁有完整結束，就不要重覆表頭，前一頁資料還沒完就show表頭...

查了很久，Crystal Report並沒有內建可以動態做到分頁順便幫你重複顯示表頭或區段的設定～所以...只好再度使用奇怪的手段一.一|||...

首先版面設計，要先做規劃，新增一區「頁首b」，並開立公式做狀態轉換
「頁首a」            原頁首
「頁首b」            重複表頭的樣式
「群組首＃1」     群組資訊＋表頭
「細目」              @group_flag
「群組尾＃1」     @group_flag_end
「報表尾」


運用採用Status Diagram的概念， 定一個Shared的變數，當資料列在「細目」時，其flag=2，當在「群組尾」結束時回歸flag=1。（Crystal Report的數字 init是1...）
這樣當我在換頁時，就可以看flag，若為2就是還在畫細目中，要重覆表頭。1的話表示群組結束或開始，不須顯示表頭。

公式內容相當簡單如下：
@group_flag
Shared numberVar flag;
page := 2;
''
（最後一行要打上空字串''，才不會被看到，但在開發預覽可以不用打，方便看值的變化）

@group_flag_end
Shared numberVar flag;
page := 1;
''

最後在設計區，右鍵打開「區段專家」，選擇「頁首b」區段
右邊Tab「一般」，有個「抑制顯示（無截取細目）」<--頁首只有這個可以編輯，算了就加減用就是，項目的右邊有個「x-2」的圖示，點圖示後就可以用公式寫法來控制要顯示（false）跟隱藏（true）
注意這邊是結果要回傳true/false，跟一般寫回傳字串數字不同。
Shared numberVar flag;
if page > 1 then
false
else
true

這邊編寫完成後，應該會看到小圖示「x-2」會變色。（應該只是標明有額外撰寫公式判斷，但他變紅色一整個就像在說寫錯了一樣）。然後該項設定的checkbox（勾）是沒有作用的，所以不要勾起來（勾起來設計頁面會看不到區段內容，要再拉表單會造成困擾）

接著就可以測試「頁首b」是否有正常的運作了～建議可先寫簡單的幾個字～看動態有沒有正確出現再去拉對齊苦工。

Html5 drag anywhere

後記:
目前支援這個功能的，測試後FireFox還是最完整。
Chrome是半殘，dragover(判別該區塊是否可以drop的部份)在本機上運作是正常的，但要是放到網路上的網頁就會取不到值event.dataTransfer的資料，然後就會出現問題。
基本上就是在 drag_over時，讓他抓不到event.dataTransfer.getData時，讓他event.preventDefault(); 是就可以解決Chrome的問題（但這樣就不會出現禁止放置的圖示，弱了一點）
但還好drop時抓值是正確的，變成drop時要判斷好一點，誰能放誰不能放，擋掉就可以解決了。
-----------------------------------------------------------------

以往要做到網頁元件的拖拉，第一個想到的就是 jquery ui （jquery ui真的非常強大＠＠/）

但現在有個新的選擇，HTML5就開始內建這個功能了～
好站w3school 點出～在 IE9 應該就可以使用了～
http://www.w3schools.com/html/html5_draganddrop.asp

先說的是～HTML的用法與 jquery 不同～可能概念上也有點差異～
目前感覺起來，jquery是偏functional的使用（比較好上手）～
而HTML5在整體上似乎定義的更清楚（功能比較完整喔）～

先來看HTML5上的操作行為～找到一個網站寫得很讚～
這網站做為讀HTML5的參考書應該不錯～
http://apress.jensimmons.com/v5/pro-html5-programming/ch9.html

在HTML5上實作，要求一定要同時定義上 drag 和 drop 的部分才能運作。
（jquery可以只寫 draggable）
所以若只要 drag 的功能時，重點把他想成全部（body）都可以 drop 就是了～

另外在HTML5上，drag的每個階段，都要自己撰寫定義，缺點是有點麻煩，好處是會寫的話，變化可以很多，還有會顯示一個小icon （口跟禁止）來表示能不能放在那邊（小icon也可以改圖），相對來說UX是做得比較完整的～

HTML碼
一般可隨便拖的都是浮動在網頁上 ，Style基本上就是 position:absolute; float:left。
另外加入 HTML5 新attribute  draggable="true"
<div id="mydrag" draggable="true"
    style="position:absolute; float:left; right: 10px; top: 50px; width:50px; height:50px; border: solid 1px #AAAAAA;">Drag Me</div>


自訂function
//在開始拖拉時，就先將該項目之id，位置寫進 dataTransfer，以便後面判斷取用
function drag_start(event) {
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("pos",
        (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
    var dragdid = event.target.id;
    event.dataTransfer.setData("did", dragdid);
}
//在放開時，將該div改變位置移動放到新的位置
function drop(event) {
    var offset = event.dataTransfer.getData("pos").split(',');
    var dm = document.getElementById( event.dataTransfer.getData("did") );
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';   
    event.preventDefault();
    return false;
}
//不限制也不管他，(ondragover、dragover 這兩個行為還是不一樣，但在此期望的操作方式上，可以一起用)
function drag_over(event) {
    event.preventDefault();
    return false;
}

元件設定初始，可利用 js 的方式加入，
或是在該 div 上直接寫上event， ex : dragstart="drag_start(event)"，
不過在外面統一加入比較好分工～
    var dm = document.getElementById('mydrag');
    dm.addEventListener('dragstart',drag_start,false);
    document.body.addEventListener('ondragover',drag_over,false);
    document.body.addEventListener('dragover',drag_over,false);
    document.body.addEventListener('drop',drop,false);

要注意的是～雖然已經將body設為可以drop的部分～
但是～若是網頁沒有填滿整個螢幕（通常是高的部分，沒到底的話），是不能放的XD...