0

我在同一页面上有一个 Kendo UI 网格和一个 Kendo UI 窗口。该窗口包含用于记录插入的表单元素,记录由网格中的一行表示。但是由于我不知道的原因,当我打开窗口并再次将其关闭然后重新打开时,Kendo UI 将其缩小了 100 倍。我不想破解窗口,所以我一直在寻找替代解决方案。

我用过 jQuery 1.7.2。我已将 jQuery 更新到 1.8.0 版。和窗口打开,关闭和重新打开工作。我很高兴,直到我意识到现在网格过滤器不起作用。当我单击网格过滤器时,什么也没有发生,没有弹出窗口,什么都没有。造成这种情况的原因是什么,解决方案是什么?

编辑:

这是我的代码(我已经替换了 Urls 的值)。网格过滤器适用于 jQuery 1.7.2。并且窗口重新打开适用于新版本的 jQuery。此外,如果我删除排序技巧,网格过滤器弹出窗口仍然不会出现。

    var hshflt = {};
    var addWindow;
    var editWindow;
    var init = false;
    //Sort Hack

    /*
    Changes all dataSources to case insensitive sorting (client side sorting).
    This snipped enable case insensitive sorting on Kendo UI grid, too.

    The original case sensitive comparer is a private and can't be accessed without modifying the original source code.
    tested with Kendo UI version 2012.2.710 (Q2 2012 / July 2012).
    */

    var CaseInsensitiveComparer = {

        getterCache: {},

        getter: function (expression) {
            return this.getterCache[expression] = this.getterCache[expression] || new Function("d", "return " + kendo.expr(expression));
        },

        selector: function (field) {
            return jQuery.isFunction(field) ? field : this.getter(field);
        },

        asc: function (field) {
            var selector = this.selector(field);
            return function (a, b) {

                if ((selector(a).toLowerCase) && (selector(b).toLowerCase)) {
                    a = selector(a).toLowerCase(); // the magical part
                    b = selector(b).toLowerCase();
                }

                return a > b ? 1 : (a < b ? -1 : 0);
            };
        },

        desc: function (field) {
            var selector = this.selector(field);
            return function (a, b) {

                if ((selector(a).toLowerCase) && (selector(b).toLowerCase)) {
                    a = selector(a).toLowerCase(); // the magical part
                    b = selector(b).toLowerCase();
                }

                return a < b ? 1 : (a > b ? -1 : 0);
            };
        },

        create: function (descriptor) {
            return this[descriptor.dir.toLowerCase()](descriptor.field);
        },


        combine: function (comparers) {
            return function (a, b) {
                var result = comparers[0](a, b),
        idx,
        length;

                for (idx = 1, length = comparers.length; idx < length; idx++) {
                    result = result || comparers[idx](a, b);
                }

                return result;
            };
        }
    };

    kendo.data.Query.prototype.normalizeSort = function (field, dir) {
        if (field) {
            var descriptor = typeof field === "string" ? { field: field, dir: dir} : field,
    descriptors = jQuery.isArray(descriptor) ? descriptor : (descriptor !== undefined ? [descriptor] : []);

            return jQuery.grep(descriptors, function (d) { return !!d.dir; });
        }
    };

    kendo.data.Query.prototype.sort = function (field, dir, comparer) {

        var idx,
length,
descriptors = this.normalizeSort(field, dir),
comparers = [];

        comparer = comparer || CaseInsensitiveComparer;

        if (descriptors.length) {
            for (idx = 0, length = descriptors.length; idx < length; idx++) {
                comparers.push(comparer.create(descriptors[idx]));
            }

            return this.orderBy({ compare: comparer.combine(comparers) });
        }

        return this;
    };

    kendo.data.Query.prototype.orderBy = function (selector) {

        var result = this.data.slice(0),
comparer = jQuery.isFunction(selector) || !selector ? CaseInsensitiveComparer.asc(selector) : selector.compare;

        return new kendo.data.Query(result.sort(comparer));
    };

    kendo.data.Query.prototype.orderByDescending = function (selector) {

        return new kendo.data.Query(this.data.slice(0).sort(CaseInsensitiveComparer.desc(selector)));
    };
    //Sort Hack

    $("#refresh-btn").click(function () {
        refreshGrid();
    });

    var grid;

    function getPageIndex() {
        if (!(grid)) {
            return 0;
        }
        return grid.pager.page() - 1;
    }

    function getPageSize() {
        if (!(grid)) {
            return 10;
        }
        return grid.pager.pageSize();
    }

    function getFilters() {
        if (!(grid)) {
            return "";
        }
        return grid.dataSource.filter();
    }

    function getSorts() {
        if (!(grid)) {
            return "";
        }
        var arr = grid.dataSource.sort();
        if ((arr) && (arr.length == 0)) {
            return "";
        }
        var returnValue = "";
        for (var index in arr) {
            var type = "";
            for (var col in grid.columns) {
                if (grid.columns[col].field === arr[index].field) {
                    type = grid.columns[col].type;
                }
            }
            returnValue += ((returnValue.length > 0) ? (";") : ("")) + arr[index].field + "," + (arr[index].dir === "asc") + "," + type;
        }
        return returnValue;
    }

    function getColumns() {
        if (!(grid)) {
            return "";
        }
        var columns = "";
        for (var col in grid.columns) {
            if (columns.length > 0) {
                columns += ";";
            }
            columns += grid.columns[col].field + "," + grid.columns[col].type;
        }
        return columns;
    }

    var initGrid = true;
    var grid2Data;

    function getDataSource() {
        $.ajax({
            type: 'POST',
            url: 'mydsurl' + getParams(),
            data: "filter=" + JSON.stringify(getFilters()) + "&columns=" + getColumns(),
            success: function (param) { grid2Data = param; },
            //dataType: dataType,
            async: false
        });
        return grid2Data.Data;
    }

    var shouldClickOnRefresh = false;
    function refreshGrid() {
        shouldClickOnRefresh = false;
        $.ajax({
            type: 'POST',
            url: 'mydsurl' + getParams(),
            data: "filter=" + JSON.stringify(getFilters()) + "&columns=" + getColumns(),
            success: function (param) { grid2Data = param; },
            //dataType: dataType,
            async: false
        });
        grid.dataSource.total = function () {
            return grid2Data.Total;
        }
        for (var col in grid.columns) {
            if ((grid.columns[col].type) && (grid.columns[col].type === "Date")) {
                for (var row in grid2Data.Data) {
                    grid2Data.Data[row][grid.columns[col].field] = new Date(parseInt((grid2Data.Data[row][grid.columns[col].field] + "").replace("/Date(", "").replace(")/", "")));
                }
            }
        }
        grid.dataSource.data(grid2Data.Data);
        shouldClickOnRefresh = true;
    }

    function getParams() {
        return getPageSize() + "|" + getPageIndex() + "|" + getSorts();
    }

    function bindGrid() {
        var editUrl = 'myediturl';
        if (!(editWindow)) {
            editWindow = $("#edit-window");
        }
        $(".k-button.k-button-icontext.k-grid-edit").each(function (index) {
            $(this).click(function () {
                if (!editWindow.data("kendoWindow")) {
                    editWindow.kendoWindow({
                        title: "Edit User",
                        width: "60%",
                        height: "60%",
                        close: onClose,
                        open: onEditOpen,
                        content: editUrl + $("#grid").data().kendoGrid.dataSource.view()[index]["ID"]
                    });
                }
                else {

                    editWindow.data("kendoWindow").refresh(editUrl + $("#grid").data().kendoGrid.dataSource.view()[index]["ID"]);
                    editWindow.data("kendoWindow").open();
                }
                editWindow.data("kendoWindow").center();
                return false;
            })
        });
        $(".k-button.k-button-icontext.k-grid-delete").each(function (index) {
            $(this).click(function () {

                var r = confirm("Are you sure you want to delete this user?");
                if (r == true) {
                    $.ajax({
                        type: 'POST',
                        url: 'mydelurl' + $("#grid").data().kendoGrid.dataSource.view()[index]["ID"],
                        success: function (param) { refreshGrid(); },
                        async: false
                    });
                }
                return false;
            });
        });
    }

    function onDataBound() {
        if (!(shouldClickOnRefresh)) {
            shouldClickOnRefresh = true;
            bindGrid();
        }
        else {
            refreshGrid();
        }
    }

    $(function () {
        $("#grid").kendoGrid({
            dataBound: onDataBound,
            dataSource: {
                autoSync: true,
                data: getDataSource(),
                serverPaging: true,
                schema: {
                    model: {
                        fields: {
                            Email: { type: "string" },
                            FullName: { type: "string" },
                            LogCreateDate: { type: "date" },
                            RoleName: { type: "string" },
                            UserName: { type: "string" }
                        }
                    },
                    total: function (response) {
                        return grid2Data.Total;
                    }
                },
                pageSize: 10
            },
            toolbar: ["create"],
            scrollable: true,
            sortable: true,
            filterable: true,
            pageable: {
                input: true,
                numeric: false,
                pageSizes: true
            },
            columns: [
                    {
                        command: ["edit", "destroy"],
                        title: "&nbsp;"
                    },
                    {
                        field: "Email",
                        title: "Email",
                        type: "String"
                    },
                    {
                        field: "FullName",
                        title: "Full Name",
                        type: "String"
                    },
                    {
                        field: "LogCreateDate",
                        title: "Created",
                        type: "Date",
                        template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
                    },
                    {
                        field: "RoleName",
                        title: "Role",
                        type: "Custom"
                    },
                    {
                        field: "UserName",
                        type: "String"
                    }
                ],
            editable: "popup"
        });
        grid = $("#grid").data("kendoGrid");

        function onAddOpen() {
        }



        addWindow = $("#add-window");
        $(".k-button.k-button-icontext.k-grid-add").click(function () {
            if (!addWindow.data("kendoWindow")) {
                addWindow.kendoWindow({
                    title: "Add User",
                    width: "60%",
                    height: "60%",
                    close: onClose,
                    open: onAddOpen,
                    content: 'myaddurl'
                });
            }
            else {
                addWindow.data("kendoWindow").open();
            }
            addWindow.data("kendoWindow").center();
            addWindow.data("kendoWindow").refresh();
            return false;
        });

    });

    function onClose() {
        $("#refresh-btn").click();
    }

    function onEditOpen() {
        //editWindow.data("kendoWdinow").center();
    }
4

2 回答 2

3

我已经第二次破解了 Kendo UI,这次我解决了它与 jQuery 1.8.3 的不兼容问题。使用以下技巧:

$(".k-grid-filter").each(function(index) {
    $(this).click(function() {
        $($(".k-filter-menu.k-popup.k-group.k-reset")[index]).offset({
            left: $($(".k-grid-filter")[index]).offset().left - $($(".k-filter-menu.k-popup.k-group.k-reset")[index]).width(), 
            top: $($(".k-grid-filter")[index]).offset().top + $($(".k-grid-filter")[index]).height()})
        })
    });

我已将此 hack 放入页面的文档加载事件中,瞧,它可以工作。这个hack肯定看起来很丑,但是在设计之后它看起来就像新的一样。我很高兴我找到了解决方法,但我很不高兴我不得不两次破解 Kendo UI。这是一个非常好的工具,除了错误。

于 2012-12-12T19:41:36.863 回答
1

jQuery 1.8.# 仅与 Kendo UI - Q2 2012 SP1 (2012.2 913) 或更高版本兼容。

如果您的剑道 UI 版本较早,您应该更新它。

于 2012-12-11T17:39:47.790 回答