KendoUI学习----二次封装kendo的window组件

在学习kendoUi过程中使用window弹出层组件，使用一段时间后进行了二次封装，便于项目使用，减少不必要的参数配置。

var kendoWindow = {
		/**
         * 弹出层id
         */
        id: 'common_window_div',
        class: 'common_window_div_display',
        /**
         * 初始化弹出层div
         */
        init: function () {
            if (!document.getElementById(kendoWindow.id)) {
                if (document.getElementsByClassName(kendoWindow.class).length == 0) {
                    $("body").append("<div class='" + kendoWindow.class + "' style='display: none;'><div id='" + kendoWindow.id + "'></div></div>");
                } else {
                    $("." + kendoWindow.class).append("<div id='" + kendoWindow.id + "'></div>");
                }
            }
        },
        /**
         * 打开弹出层
         * @param width
         * @param height
         * @param title
         * @param template
         * @param data
         * @param callBack
         * @param close
         */
        open: function (width, height, title, template, data, callBack, close) {
            if (!data) {
                data = {};
            }
            kendoWindow.init();
            var template = new kendo.template($(template).html());
            $("#" + kendoWindow.id).html(template(data));
            $("#" + kendoWindow.id).kendoWindow({
                width: width,
                height: height,
                title: title,
                modal: true,
                visible: false,
                actions: ["Close"],
                position: {
                    top: (($(window).height() - height) / 2) + "px",
                    left: (($(window).width() - width) / 2) + "px"
                },
                close: function (e) {
                    var win = $("#" + kendoWindow.id).data("kendoWindow");
                    typeof win.destroy == "function" ? win.destroy() : "";
                    typeof (close) == "function" ? close() : "";
                }
            }).data("kendoWindow").open();
            //固定按钮
            if ($("#stableButton").length > 0) {
                var btn = $("#stableButton").html();
                var html = ' <div style="background: rgb(255,255,255);padding-right:25px;" class="k-edit-buttons k-state-default">' + btn + '</div>';
                $("#" + kendoWindow.id).css("border-radius", '0 0 0 0');
                $("#" + kendoWindow.id).parent().append(html);
                $("#stableButton").remove();
            }
            typeof (callBack) == "function" ? callBack(data) : "";
        },
        /**
         * 窗口关闭
         * @param doc需要关闭的窗口id
         */
        close: function (doc) {
            if (!doc) {
                doc = kendoWindow.id;
            }
            let wind = $("#" + doc).data("kendoWindow")
            if(wind){
            	wind.close();
            }
        },
        /**
         * 固定底部按钮
         */
        stablebutton: function (btnHtml) {
            var btn = ' <div class="k-edit-buttons k-state-default newsWindowBtn">' + btnHtml + '</div>';
            $("#" + kendoWindow.id).parent().append(btn);
        }
    }

使用方法如下：

<script>
	var sexArray =[{text:'男',value:1},{text:'女',value:2}];
	$(function(){
		kendoWindow.open(600,400,"编辑人员信息","#userTempalte",{name:'张三',sex:1},function(data){
			//弹出层初始化完成，此处进行其他组件如下列框等组件的渲染
			initList("sex",sexArray,1);
		},function(){
			//弹出层关闭后执行的内容
		})
	})
</script>
<script id="userTempalte" type="text/x-kendo-template">
	<form id="form" style="width: 96%;">
        <div class="form-group form-inline">
            <div class="fieldTitle"><span class="text-red">*</span>名称：</div>
            <div class="fieldValue">
                <input type="text" class="form-control" name="name" id="name" required
                       value="#:data.name==undefined?'':data.name#" maxlength="100" 
                       placeholder="名称"/>
            </div>
            <div class="fieldTitle"><span class="text-red">*</span>性别：</div>
            <div class="fieldValue">
                <input type="text" class="form-control" required name="sex" id="sex"
                       value="#:data.sex==undefined?'':data.sex#" placeholder="性别"/>
            </div>
        </div>
    </form>
    <div style="padding-top: 10px;float: right;" id="stableButton">
        <button id="sureBtn" type="button" onclick="saveData()" class="btn btn-success btn-sm">确认</button>
        <button type="button" class="btn btn-default btn-sm" onclick="kendoWindow.close()">取消
        </button>
    </div>
</script>