KendoUI使用指南

导出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

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

ueditor.css
ueditor.config.js
ueditor.all.js

1. 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 "内容详情";
                }
            },

1. 增加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
        },