HAPkendoUI的Excle导出

最新推荐文章于 2021-08-12 10:18:04 发布

转载最新推荐文章于 2021-08-12 10:18:04 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wuqichuan666/p/9453037.html

文章标签：

#javascript #ViewUI

本文介绍如何利用KendoUI实现从Excle导出数据的功能。主要步骤包括添加导出按钮、定义导出函数、处理数据转换以及设置Excel格式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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>