kendo grid、kendo excel相关方法

最新推荐文章于 2025-06-24 09:12:16 发布

原创最新推荐文章于 2025-06-24 09:12:16 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#kendo ui

个人专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了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' });