kendo grid、kendo excel相关方法

本文详细介绍了Kendo UI中Grid组件的各种高级配置方法,包括复选框列、下拉列表、只读列、时间列等,并展示了如何使用Kendo Excel组件创建和导出复杂的工作簿。

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

一、kendo grid

1、grid设置复选框列

dataSource= new kendo.data.DataSource({
    schema: {
            model: {
                fields: {
                    checkboxCol: {defaultValue: 'N', type: 'boolean', checkedValue: 'Y', uncheckedValue: 'N'}
                }
            }
        }
 });

2、grid LOV

       columns: [
           {
                field: "entityId",
                title: '<@spring.message "entity.entityCode"/>',
                headerAttributes: { style: "text-align: center" },//标题样式
                attributes: {style: "text-align:center"},//单元格样式
                width: 120,//宽度可以为数字或者百分比,百分比要加引号
                //编辑完成事件
                template: function(item){
                    return item['entityCode']||''
                },
                //编辑事件
                editor: function (container, options) {
                    $('<input name="' + options.field + '" required="required" />')
                        .appendTo(container)
                        .kendoLov($.extend(<@lov "PSPC_PSPC_ENTITY_SAMPLE"/>, {
                        textField: 'entityCode',//指定显示值
                        valueField: 'entityId',//指定真实值
                        model: options.model
                    },{
                        query: function (e) {
                            //查询事件
                            e.param['tenantId'] = '-1';
                            e.param['siteId'] = '-1';
                        },
                        select: function (e) {
                            //选择LOV事件,同时填充其他列的值
                            options.model.set('description', e.item.description);
                            options.model.set('entityVersion', e.item.entityVersion);
                            options.model.set('ceGroup', e.item.ceGroup);
                            options.model.set('ceParameter', e.item.ceParameter);
                            options.model.set('attachmentGroupDescription', e.item.attachmentGroupDescription);
                        }
                    }));
                }
            }
        ]

3、grid fasecode

<script src="${base.contextPath}/common/code?PSPC_TICK_LABEL=PSPC.TICK.LABEL" type="text/javascript"></script>


       columns: [
           {
                field: "coordinateAxis",
                title: '<@spring.message "entitychart.coordinateAxis"/>',
                attributes: {style: "text-align:center"},
                headerAttributes: { style: "text-align: center" },
                width: 120,
                template: function (dataItem) {
                    //对比快码集合获取含义
                    var v = dataItem.coordinateAxis ? dataItem.coordinateAxis : "";
                    $.each(PSPC_TICK_LABEL, function (i, n) {
                        if ((n.value || '').toLowerCase() == (v || '').toLowerCase()) {
                            v = n.meaning;
                            return false;
                        }
                    })
                    return v;
                },
                editor: function (container, options) {
                    $('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            dataTextField: "meaning",
                            dataValueField: "value",
                            valuePrimitive: true,
                            dataSource: PSPC_TICK_LABEL
                        });
                }
            }
        ]

4、grid 只读列

       columns: [
            {
                field: "description",
                title: '<@spring.message "entity.description"/>',
                headerAttributes: { style: "text-align: center" },
                width: 120,
                editor: function (container, options) {
                    //编辑事件返回一个span
                    var val = options.model.description == null ? '' : options.model.description;
                    $('<span>' + val + '</span>').appendTo(container);
                }
            }
        ]
       schema: {
            model: {
                editable: function (col) {
                    //站点只有新增可以修改,审核状态/有效性不允许修改
                    if ('siteId' === col) {//站点只有新增可以修改
                        return this.isNew();
                    } else {//审核状态/有效性不允许修改
                        return !('checkStatus' === col || 'enableFlag' === col);
                    }
                }
            }
        }

5、grid 时间列

       columns: [
           {
                field: "startDate",
                title: '<@spring.message "entity.startdate"/>',
                width: 150,
                attributes: {style: "text-align:center"},
                headerAttributes: {style: "text-align:center"},
                format:"{0:yyyy-MM-dd HH:mm:ss}",
                editor: function (container, options) {
                    //获得结束时间
                    var end = options.model.endDate;
                    var opts = {
                        format: "yyyy-MM-dd HH:mm:ss"
                    }
                    if (end) {
                        opts.max = end;
                    }
                    $('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDateTimePicker(opts);
                }
            },
            {
                field: "endDate",
                title: '<@spring.message "entity.enddate"/>',
                width: 150,
                attributes: {style: "text-align:center"},
                headerAttributes: {style: "text-align:center"},
                format:"{0:yyyy-MM-dd HH:mm:ss}",
                editor: function (container, options) {
                    //获得开始时间
                    var start = options.model.startDate;
                    var opts = {
                        format: "yyyy-MM-dd HH:mm:ss"
                    }
                    if (start) {
                        opts.min = start;
                    }
                    $('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDateTimePicker(opts);
                }
            }
        ]

6、grid bind

    $("#grid").kendoGrid({
        autoBind: false,//是否自动绑定
        dataSource: dataSource,
        resizable: true,
        scrollable: true,//是否可滚动
        navigatable: false,
        rownumber: true,//显示行号
        selectable: 'multiple, rowbox',//复选框列 去掉multiple为单选框列
        dataBound: function () {
            if (parent.autoResizeIframe) {
                parent.autoResizeIframe('${RequestParameters.functionCode!}')
            }
        },
        columns:[],
        editable: {
            createAt: "bottom"//新增行位于最下方,默认上方
        }
    });

7、grid 冻结列

columns = [
        {
            field: "oocId",
            title: '<@spring.message "ooc.oocid"/>',
            width: 120,
            hidden: true,
            locked:true,//是否冻结 true:是 false:否
            attributes: {style: "text-align:center;"},
            headerAttributes: {style: "text-align:center"}
        },
        {
            field: "entityCode",
            title: '<@spring.message "ooc.entitycode"/>',
            width: 120,
            locked:true,
            attributes: {style: "text-align:center;"},
            headerAttributes: {style: "text-align:center"}
        },
        {
            field: "entityDesc",
            title: '<@spring.message "ooc.entitydesc"/>',
            width: 120,
            attributes: {style: "text-align:center;"},
            headerAttributes: {style: "text-align:center"}
        },
    ]

8、grid 操作列

<style>
    .button-action {
        color: #758697;
        cursor: pointer;
    }
</style>

       {
            field: "",
            title: '<@spring.message "hap.action"/>',
            width: 120,
            attributes: {style: "text-align:center;"},
            headerAttributes: {style: "text-align:center"},
            template:function (dataItem) {
                return '<label>' +
                    '<span class="button-action" onclick="editOoc(\'' + dataItem.oocId + '\')">编辑</span>' +
                    '&nbsp;&nbsp;&nbsp;' +
                    '<span class="button-action" onclick="showChart(\'' + dataItem.entityId + '\', \'' + dataItem.entityCode + '\', \'' + dataItem.chartId + '\')">展示图</span></label>';
            }
        }

9、grid前台分页

后台:
查询全部数据,不进行分页

前台:
    dataSource = new kendo.data.DataSource({
        serverPaging: false,
    });

数据查询:
var viewModel = kendo.observable({
        model: {},
        query:function () {
            //必输校验
            if(!viewModel.model.startDate || !viewModel.model.endDate){
                kendo.ui.showInfoDialog({
                    message: '请选择开始时间和结束时间'
                });
                return;
            }

            //查询,如果只用page(1)不会查询数据库,只会加载当前查询结果
            $("#grid").data('kendoGrid').dataSource.read();//重新查询数据库
            $("#grid").data('kendoGrid').dataSource.page(1);//加载第一页
        }
    });

数据捞取:
var allDatas = dataSource.data();//获取所有数据
var gridItems = $("#grid").data("kendoGrid").items();//获取当前页的数据
var checked = $("#grid").data("kendoGrid").selectedDataItems();//获取勾选的数据

二、kendo excel

              //创建工作册
    var workbook = new kendo.ooxml.Workbook({
        sheets: [
            {
                name: 'sheetName1',//sheet页名称
                frozenRows: 2,//行冻结 索引从1开始
                frozenColumns: 1,//列冻结 索引从1开始
                mergedCells: ["A1:G1","C15:E15"],//单元格合并
                filter: { from: 0, to: 18 },//筛选列 索引从0开始
                columns: [
                    {width: 120},
                    {width: 120}
                ],
                rows: [
                    { 
                        cells: [
                            {textAlign: "center", value: 'code1', background: '#7A7A7A', color: '#FFF'},
                            {textAlign: "center", value: 'desc1'}
                        ]
                    },
                    { 
                        cells: [
                            {textAlign: "center", value: 'code2'},
                            {textAlign: "center", value: 'desc2'}
                        ]
                    }
                ]
            },
            {
                name: 'sheetName2',//sheet页名称
                frozenRows: 1,//行冻结 索引从1开始
                frozenColumns: 2,//列冻结 索引从1开始
                mergedCells: ["A1:G1","C15:E15"],//单元格合并
                filter: { from: 0, to: 18 },//筛选列 索引从0开始
                columns: [
                    {width: 120},
                    {width: 120}
                ],
                rows: []
            }
        ]
    });

    //保存为excel文件
    kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: 'Excel导出.xlsx' });
Kendo UI框架提供了强大的Excel导出功能,通过Grid的saveAsExcel能方便地导出Grid中的数据,而且格式美观大方,使用起来也非常方便。但是在实际使用中不是很理想,主要有以下两个问题: 1. 导出的列数据是原始值 Kendo UI默认导出的是该列的value值,及查出来的值,有时候我们会用template渲染一下导出的列,比如将“Y”显示成“是”,把“N”显示成“否”。而Kendo UI导出的却是Y/N这种只有程序员看得懂的数据库标识,显然不是我们需要的,这种情况非常常见。 2. 不能灵活控制可导出的列 Kendo UIExcel导出主要看两点,一是该列(column)是field字段,而不是自定义的name;二是该列不是隐藏的(hidden:true)。这样我们无法灵活导出我们需要的列。 为了解决上面两个问题,我查看了Kendo UI的源代码,提取并改进了源代码。主要更改点及使用方法请看下面源代码。主要针对以上两点做了更改,只需要在grid定义columns时加上isExport或exportTemplate即可: 在导出数据,先看该列有没有自定义exportTemplate(),没有则看Kendo UI自带的template(),再没有才会导出查出来的值。 判断是否导出该列不再看hidden属性,而是看列的isExport属性,如果为false则不导出,其它情况一律导出该列。 经过这两个更改,基本可以应对所有业务场景,可以方便快捷地开发了! 但要注意,Kendo UI自带的导出功能无法应用于导出大量数据,似乎是浏览器的jvm溢出了,建议超过5万条的数据导出还是老老实实写后台导出功能吧。。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值