HAPkendoUI的Excle導出

在Excle導出上，HAP使用的kendoUI進行導出，簡單步驟如下

1.添加導出按鈕

 <span class="btn btn-primary pull-left" style="float:left;margin-right:5px;margin-left:5px;" data-bind="click:exportFunc"><@spring.message "hap.exportexcel"/></span>

 

 

 

2.在最上方寫回調函數exportFunc

<script type="text/javascript">
    var viewModel = Hap.createGridViewModel("#grid", {
        model: {},
        newResource: function (e) {
            var win = $('#newWin').kendoWindow({
                iframe: true,
                draggable: false,
                content: '${base.contextPath}/demo/demo_bank_branch.html',
            }).data('kendoWindow');
            win.title('<@spring.message "hap.new"/>');
            win.maximize().open();
        },
        //導出EXCEL的回調函數
        exportFunc : function (e) {
            //獲取grid數據
            var originData = dataSource.data();
            excelData(originData);
        },
    });
</script>

 

 

3.在最下方的script標簽中寫excelData方法

 

 

//導出
    function excelData(originData) {
        /**
         * 1.修改源數據
         * 修改源數據中需要轉換的值，如快碼字段("Y"->"是","N"->"否")，時間格式等
         */
        if (originData.length > 0){ //如果有選中數據則導出數據
            for (var i in originData){
                //時間轉換
                originData[i].expirationDate = kendo.toString(kendo.parseDate(originData[i].expirationDate), "yyyy-MM-dd");
                //銀行類型轉換
                var v = originData[i].bankType;
                $.each(bankTypeData, function (i, n) {
                    if ((n.value || '').toLowerCase() == (v || '').toLowerCase()) {
                        v = n.meaning;
                        originData[i].bankType  =v;
                    }
                })
            }
        }else {
            return;
        }

        /**
         * 2.設置excel格式與內容
         */

        /**
         * 2.1設置excel表格標題
         */
        var excelTitles = ['<@spring.message "簡稱"/>','<@spring.message "名稱"/>','<@spring.message "類型"/>','<@spring.message "描述"/>','<@spring.message "截止時間"/>','<@spring.message "備注"/>'];
        //標題數組
        var excelHeader = [];
        for(var i in excelTitles){
            excelHeader.push({
                value: excelTitles[i],                    //標題文字
                background: '#92cddc',                 //標題背景顏色
                color: '#000',                         //標題字體顏色
                textAlign: 'center',                     //文字水平對齊方式
                verticalAlign: 'center',                  //文字豎直對齊方式
                borderLeft: {size: 1 ,color:"#ddd"},       //左邊框大小及顏色
                borderRight: {size: 1 ,color:"#ddd"},      //右邊框大小及顏色
                borderBottom: { size: 1 ,color:"#ddd"},   //下邊框大小及顏色
                borderTop: { size: 1 ,color:"#ddd"},      //上邊框大小及顏色
            })
        }

        /**
         * 2.2設置最終導出數據
         */
            //最終導出數據
        var excelData = [];
        //2.2.1將標題添加至導出數據
        excelData.push({
            cells: excelHeader
        });
        //2.2.2將源數據添加至導出數據
        for(var i=0;i < originData.length;i++){
            excelData.push({
                cells: [
                    { value: originData[i].bankCode, borderBottom: { size: 1 ,color:"#ddd"},borderRight: { size: 1 ,color:"#ddd"},verticalAlign: 'center', textAlign: 'center',background: '#ff9' },
                    { value: originData[i].bankName, verticalAlign: 'center', textAlign: 'center'},
                    { value: originData[i].bankType, verticalAlign: 'center', textAlign: 'center'},
                    { value: originData[i].description, verticalAlign: 'center', textAlign: 'center'},
                    { value: originData[i].expirationDate, verticalAlign: 'center', textAlign: 'center'},
                    { value: originData[i].comments, verticalAlign: 'center', textAlign: 'center'}
                ],
            });
        }
        //2.2.3設置列寬度與樣式
        var columns = [];
        for(var i = 0;i < excelTitles.length;i++){
            columns.push({ width: 150 });
        }

        /**
         * 3.配置導出excel sheets,格式與文件名
         */
        var workbook = new kendo.ooxml.Workbook({
            date: new Date(),
            sheets: [ // sheet數組，如需導出多個sheet在此完成
                {
                    name: '銀行數據',       //sheet 名稱
                    frozenRows: 1,         //凍結第一行
                    frozenColumns: 1,      //凍結第一列
                    columns: columns,      //列
                    rows: excelData        //數據
                }
            ]
        });

        //設置文件名
        kendo.saveAs({
            dataURI: workbook.toDataURL(), //數據源
            fileName: '銀行導出測試' //文件名
        });
    }

 

4.一些其他補充（節選自kendo導出文檔）

  4.1 導出復選框所勾選的數據

<span class="btn btn-primary" onclick="excelSelectedData()">
    <i class="fa fa-file-excel-o" style="margin-right:3px;"></i>導出復選框選中的數據
</span>
<script>
    function excelSelectedData() {
        var originData = grid.selectedDataItems();
        excelData(originData);
    }
</script>

 

 

 

 

4.2 導出當前頁的數據 ( 查詢條件查詢后 )

<span class="btn btn-primary" onclick="excelPageData()">
    <i class="fa fa-file-excel-o" style="margin-right:3px;"></i>導出當前頁數據
</span>
<script>
    function excelPageData () {
        var originData = dataSource.data();
        excelData(originData);
    }
</script>

 

 

 

 

 

 

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">

 

 

 

 

附件列表