KendoUI使用指南

来源：互联网发布：易语言挂机软件源码编辑：程序博客网时间：2024/05/22 00:47

导出excel

引入jszip.min.js

toolbar设置excel命令

设置excelExport函数，可以对导出的列进行自定义处理

在弹出的编辑界面打印

引入jQuery.print.js，支持jquery打印

监听onEdit方法，增加打印按钮

 onEdit: function () {            return function onEdit(e) {                var container = e.container                console.log('container', container)                var print = $('<a class="k-button k-button-icontext k-primary"><span class="k-icon"></span>打印</a>');                print.bind('click', {data: container}, printData)                $(container).find("div.k-edit-buttons").append(print);            }        }

grid每一行增加自定义按钮

在grid的column定义中，command元素增加按钮

 {                    //需要根据状态进行不同的操作                    command: [                        {                            name: "增加二维码",                            click: function (e) {                                console.log('add qr')                            },                        }                    ],                    title: "操作",                    width: "100px"                }

kendo ui富媒体编辑器替换成ueditor

引入ueditor的相关样式和js文件

ueditor.cssueditor.config.jsueditor.all.js

kendo ui的富媒体编辑采用ueditor

    function myEditor(container, options) {        $('<textarea id="editor" style="height:440px; width:960px;" name="content"></textarea>')            .appendTo(container);        var content = options.model.content        UE.delEditor('editor')        var editor = new UE.getEditor('editor');        editor.ready(function () {            editor.setContent(content)        })    } 在kendo ui列中引入自定义的编辑器       {                field: "content",                width: '20%',                title: "页面内容",                headerAttributes: {                    canHidden: false                },                attributes: {                    style: "text-align: left;"                },                editor: myEditor,                hidden: true,                template: function (dataItem) {                    return "内容详情";                }            },

增加save方法，改写参数值的变化逻辑
由于kendo ui有自己的一套值是否变化的逻辑，并且kendo ui不会自动识别第三方富媒体编辑器的值，需要需要重写参数变化的逻辑。

        save: function (data) {            console.log('enter save. before', data)            var model = data.model            var editor = new UE.getEditor('editor');            if (editor) {                var content = editor.getContent()                model.dirty = true                model.content = content            }            console.log('enter save. after', data)            return true        },

0 0