首页 新闻 赞助 找找看

在C#Web前端中,Kendo的grid自带导出功能,如何通过转换数据导出信息?

0
悬赏园豆:50 [已解决问题] 解决于 2016-04-19 17:13

对于界面上已经导出的数据,如何通过转换方法进行数据转换导出,求大牛? 

Reyco的主页 Reyco | 初学一级 | 园豆:14
提问于:2016-03-28 10:42
< >
分享
最佳答案
0

SaveGridExcel: function (obj, fileName, excelTitle) {
var grid = $(obj).data("kendoGrid");
if (grid.items().length > 0) { //判断列表中是否存在有效数据
var rows = []; //excel中的所有的行
var headCells = []; //获取grid列表中的标题列
var cellWidths = []; //设置每列的宽度
for (var k = 0; k < grid.columns.length; k++) {
cellWidths.push({ autoWidth: true });
var cellValue = kendoData.GetGridTitleByIndex(k, grid.columns);
if (cellValue != null) {
headCells.push({ value: cellValue });
}
}
var headRow = { cells: headCells }; //标题行
rows.push(headRow); //将标题行添加到rows集合中
var cRows = grid.items(); //获取当前列表内容的行数
for (var i = 0; i < cRows.length; i++) {
var rowItem = cRows[i]; //获取列表的当前行
var data = grid.dataItem(rowItem); //获取列表的当前行的数据源
var currentRow = []; //创建当前行的数组变量
for (var j = 0; j < rowItem.cells.length; j++) {
var currentCell = kendoData.GetGridColumnValue(j, rowItem.cells); //获取指定索引的列的值
if (currentCell != null) {
currentRow.push({ value: currentCell });
}
}
rows.push({ cells: currentRow }); //添加行元素
}
//创建工作册
var workbook = new kendo.ooxml.Workbook({
sheets: [{
columns: cellWidths,
title: excelTitle,
rows: rows
}]
});
//保存为excel文件
kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: fileName + '.xlsx' });
} else {
alert("无有效数据需要导出!");
return;
}
}
};

Reyco | 初学一级 |园豆:14 | 2016-03-29 21:56
其他回答(1)
0

// 对Date的扩展,将 Date 转化为指定格式的String 

// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, 

// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 

// 例子: 

// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 

// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 

Date.prototype.Format = function(fmt) 

{ //author: meizz 

  var o = { 

    "M+" : this.getMonth()+1,                 //月份 

    "d+" : this.getDate(),                    //日 

    "h+" : this.getHours(),                   //小时 

    "m+" : this.getMinutes(),                 //分 

    "s+" : this.getSeconds(),                 //秒 

    "q+" : Math.floor((this.getMonth()+3)/3), //季度 

    "S"  : this.getMilliseconds()             //毫秒 

  }; 

  if(/(y+)/.test(fmt)) 

    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 

  for(var k in o) 

    if(new RegExp("("+ k +")").test(fmt)) 

  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 

  return fmt; 

}

 

function btnExcel(obj){

  var grid = $(obj).data("kendoGgrid");

  grid.Found_Time = grid.Found_Time.format("yyyy-MM-dd HH:mm:ss");

  grid.Created_Time = grid.Created_Time .format("yyyy-MM-dd HH:mm:ss");

  grid.saveAsExcel();

}

收获园豆:50
刘宏玺 | 园豆:14020 (专家六级) | 2016-03-28 10:52

这些加入以后,运行代码报错 Cannot read property 'format' of undefined,

支持(0) 反对(0) Reyco | 园豆:14 (初学一级) | 2016-03-28 11:36

@H-SMouses: 你看下grid.Found_Time是什么类型,如果不是Date类型你就把他转化为Date类型

支持(0) 反对(0) 刘宏玺 | 园豆:14020 (专家六级) | 2016-03-28 11:38

@刘宏玺: 好的,我试试

支持(0) 反对(0) Reyco | 园豆:14 (初学一级) | 2016-03-28 11:40

@刘宏玺: 大神,我查的数据库里边的时间字段Found_Time、Created_Time是DateTime类型,应该不需要转换了吧,一直报错未找到format,是怎么回事?

支持(0) 反对(0) Reyco | 园豆:14 (初学一级) | 2016-03-28 15:57

@H-SMouses: 你要看前台网页中的类型啊

支持(0) 反对(0) 刘宏玺 | 园豆:14020 (专家六级) | 2016-03-28 16:06

@刘宏玺: 不是date类型,这个转化需要在哪里面实现,刚接触前端,谢谢!

支持(0) 反对(0) Reyco | 园豆:14 (初学一级) | 2016-03-28 16:11

@H-SMouses: 估计是我代码写错了

function btnExcel(obj){

  var grid = $(obj).data("kendoGgrid");

  for(var i = 0; i < grid.length; i++){

    grid[i].Found_Time = grid[i].Found_Time.format("yyyy-MM-dd HH:mm:ss");

    grid[i].Created_Time = grid[i].Created_Time .format("yyyy-MM-dd HH:mm:ss");

  }

  grid.saveAsExcel();

}

你把代码换成这个看看报错不

支持(0) 反对(0) 刘宏玺 | 园豆:14020 (专家六级) | 2016-03-28 16:14

@刘宏玺: 这次没有出现报错,但导出来的数据还是跟以前一样,时间还是这种/Date(1458544152113+0800)/格式

支持(0) 反对(0) Reyco | 园豆:14 (初学一级) | 2016-03-28 16:22

@H-SMouses: 

你把代码贴全点吧,代码太少,分析不出来,

saveAsExcel()这个方法长啥样?

支持(0) 反对(0) 刘宏玺 | 园豆:14020 (专家六级) | 2016-03-28 16:37

@刘宏玺: 这是kendo的grid列表绑定

 //列表绑定
    function EventReportGrid(Type, RequestUrl, DataField, Param, BindObj, pageSize) {
        //获取数据源 
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    type: Type,
                    url: RequestUrl,
                    dataType: "json",
                    contentType: "application/json"
                },
                parameterMap: function (options, operation) {
                    if (operation == "read") {
                        var parameter = Param;
                        parameter.StartIndex = (options.page - 1) * options.pageSize;
                        parameter.EndIndex = options.page * options.pageSize;
                        return kendo.stringify(parameter);
                    }
                    else { return options; }
                }
            },
            batch: true,
            pageSize: pageSize,
            schema: {
                //服务返回数据结合
                data: function (d) {
                    return d.ListEventReport;
                },
                //服务返回总条数
                total: function (d) {
                    return d.EventReportCount;
                }
            },
            serverPaging: true
        });
        var eleObj = BindObj;
        eleObj.kendoGrid({
            dataSource: dataSource,
            columns: DataField,
            dataBound: arguments[6],
            filterable: false,
            resizable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 10
            },
            selectable: true
        });
    }

var colums = [
         { field: "Event_level_Name", title: "事件级别", width: "18%", template: "<span title='#=data.Event_level_Name#' class='txtOverflow'>#=data.Event_level_Name# </span>" },
         { field: "Title", title: "事件名称", width: "12%", template: "<span title='#=data.Title#' class='txtOverflow'>#=data.Title# </span>" },
         { field: "Event_Class_Name", title: "风险类型", width: "30%", template: '<span title="#=data.Event_Class_Name#" class="txtOverflow ti">#=data.Event_Class_Name# </span>' },
         { field: "Happen_Department_Name", title: "发生单位", width: "30%", template: '<span title="#=data.Happen_Department_Name#" class="txtOverflow ti">#=data.Happen_Department_Name# </span>' },
         { field: "Responsible_User_Name", title: "责任人", width: "15%", template: '<span title="#=data.Responsible_User_Name#" class="txtOverflow ti">#=data.Responsible_User_Name# </span>' },
         { field: "Found_Time", title: "发现时间", width: "18%", template: "<span title='#=kendoData.utcToDate(kendo.parseDate(Found_Time))#' class='txtOverflow'>#=kendoData.utcToDate(kendo.parseDate(data.Found_Time))# </span>" },//时间转换
         { field: "Created_Time", title: "上报时间", width: "18%", template: "<span title='#=kendoData.utcToDate(kendo.parseDate(Created_Time))#' class='txtOverflow'>#=kendoData.utcToDate(kendo.parseDate(data.Created_Time))# </span>" },//时间转换
         { field: "Status", title: "状态", width: "7%", template: "<span title='#=ConvertStatuByArray(data.Status,statuArray)#' class='txtOverflow'>#=ConvertStatuByArray(data.Status,statuArray)# </span>" }//状态由数字转换文字 
    ];

绑定后可以出现数据,导出后则变成如下:

 

saveAsExcel()这个方法是kendo中D:\Aspk.ReskEventReport\JS\kendo\kendo.all.min.js 自带的一个方法,只是引用,未修改其中的任何东西

 

 

就这些了,在此谢过!

 

 

 

支持(0) 反对(0) Reyco | 园豆:14 (初学一级) | 2016-03-28 17:00

@H-SMouses: 

之前让你改的你都还原,这次我看了下官方文档,你可以自己好好看看

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/excel/cell-format

 

var eleObj = BindObj;
        eleObj.kendoGrid({
            dataSource: dataSource,
            columns: DataField,
            dataBound: arguments[6],
            filterable: false,
            resizable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 10
            },
            selectable: true ,

    excelExport: function(e) {

      var sheet = e.workbook.sheets[0];

      for (var rowIndex = 1; rowIndex < sheet.rows.length; rowIndex++) {

        var row = sheet.rows[rowIndex];

        for (var cellIndex = 0; cellIndex < row.cells.length; cellIndex ++) {

          row.cells[cellIndex].format = "yy-MM-dd hh:mm:ss"

        }

      }

    }
        });

 

你试试这个代码

支持(0) 反对(0) 刘宏玺 | 园豆:14020 (专家六级) | 2016-03-29 10:13

@刘宏玺: 导出实现了,分享下,也方便以后遇到类似问题:

在js中封装这个方法,封装好把这个js引用到页面中,方法如下

//将指定的grid列表中的数据导出到Excel文件中
SaveGridExcel: function (obj, fileName, excelTitle) {
var grid = $(obj).data("kendoGrid");
if (grid.items().length > 0) { //判断列表中是否存在有效数据
var rows = []; //excel中的所有的行
var headCells = []; //获取grid列表中的标题列
var cellWidths = []; //设置每列的宽度
for (var k = 0; k < grid.columns.length; k++) {
cellWidths.push({ autoWidth: true });
var cellValue = kendoData.GetGridTitleByIndex(k, grid.columns);
if (cellValue != null) {
headCells.push({ value: cellValue });
}
}
var headRow = { cells: headCells }; //标题行
rows.push(headRow); //将标题行添加到rows集合中
var cRows = grid.items(); //获取当前列表内容的行数
for (var i = 0; i < cRows.length; i++) {
var rowItem = cRows[i]; //获取列表的当前行
var data = grid.dataItem(rowItem); //获取列表的当前行的数据源
var currentRow = []; //创建当前行的数组变量
for (var j = 0; j < rowItem.cells.length; j++) {
var currentCell = kendoData.GetGridColumnValue(j, rowItem.cells); //获取指定索引的列的值
if (currentCell != null) {
currentRow.push({ value: currentCell });
}
}
rows.push({ cells: currentRow }); //添加行元素
}
//创建工作册
var workbook = new kendo.ooxml.Workbook({
sheets: [{
columns: cellWidths,
title: excelTitle,
rows: rows
}]
});
//保存为excel文件
kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: fileName + '.xlsx' });
} else {
alert("无有效数据需要导出!");
return;
}
}
};

在web前端页面添加button,然后用onclick激发调用这个方法

 

这个SaveGridExcel方法是js中封装好的,直接调用就行,结果如下,能够实现,格式不太完美,微调下就好了

总之,谢谢@刘宏玺最近提供帮助!

支持(0) 反对(0) Reyco | 园豆:14 (初学一级) | 2016-03-29 17:26
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册