kendoui学习笔记(查询、表格自适应高度、自定义操作command、弹框window)

司寇星海
2023-12-01

用于查询的写法:

第一种写法

  $("#search").click(function () {
                var name = $("#name").val();
                grid.data("kendoGrid").dataSource.filter([
                    { field: "Name", value: name },
                    { field: "Age", value: 123 }
                ]);
            });

第二种写法

                        read: {
                            type: "post",
                            url: that.crudServiceBaseUrl + "/read",
                            dataType: "json",
                            data: function () {
                                return that.getPara();
                            }
                        },
                $(that.dv).on('click', 'a,button,.btns', function () {
                    var v = $(this).data('command');
                    if (v == 'search') {
                        that.search();
                    }
                })
            getPara: function () {
                var myMap = {};
                var num = $("input[name='num']").val().trim();
                if (num !== "") {
                    myMap['num'] = num;
                }
                var nickname = $("input[name='nickname']").val().trim();
                if (nickname !== "") {
                    myMap['nickname'] = nickname;
                }
                return {where: JSON.stringify(myMap)};
            },
            search: function () {
                this.dataSource.read();
            },

 

表格自适应高度:

                this.size();
                $(window).resize(function () {
                    that.size();
                });
            size: function () {
                var headerHeight = $(".layui-header").outerHeight();
                var tabsHeight = $("#LAY_app_tabs").outerHeight();
                var toolbarHeight = $(this.dv).find('.toolbar').outerHeight() + 15;
                var gridheight = window.innerHeight - headerHeight - tabsHeight - toolbarHeight - 2 * 15;
                var otherElements = this.grid.children().not(".k-grid-content"), otherElementsHeight = 0;
                otherElements.each(function () {
                    otherElementsHeight += $(this).outerHeight();
                });
                var dataArea = this.grid.find(".k-grid-content");
                dataArea.height(gridheight - otherElementsHeight - 2);
            }

另外附上两个参考链接:

http://jsbin.com/yumexugo/1/edit?html,css,js,output

http://jsfiddle.net/dimodi/SDFsz/

 

自定义操作:

{
        name: "details",
        click: function(e) {
          e.preventDefault();
          var tr = $(e.target).closest("tr"); // get the current table row (tr)
          var data = this.dataItem(tr);
          console.log("Details for: " + data.name);
        }
} 

在command内自定义模板,不能根据id或者class引入外部模板,如下写法是行不通的,不能识别模板变量nickname

                        {
                            command: [
                                {name: "edit", text: {edit: "编辑", update: "保存", cancel: "取消"}},
                                {name: "reset", text: "重设密码", click: that.reset},
                                {template: kendo.template($(".update_active").html())}
                            ], title: "操作", width: "250px"
                        }],
<script class="update_active" type="text/x-kendo-template">
    <div class='employee-name'>#: nickname #</div>
</script>

后来尝试如下写法,依然不行,浏览器会报错,提示status_switch没有定义

                template:
		         "<a class='k-button' href='index.php?r=apply/admin/showapply&apply_id=#=apply_id#&apply_from=#=apply_from#' style='min-width:24px'>查看</a><a class='k-button' style='min-width:24px' onclick='IfGoToDistributePermission(#=apply_id# ,#=apply_status_en#)'>分配</a>" +
		         "# if (status_switch == 2) { #" +
			       "<a class='k-button' onclick='RecyclePermission(#=apply_id#)'>回收</a>" +
			 "# } #",

另外在其他文章中看到另外一种写法,可以将用户禁用和启用的状态,绑定到方法中,但是我自己的程序没办法用that.函数名这种方式实现,这个还有待研究

        $("#grid").kendoGrid({
            dataSource: dataSource,
            columns: [
                { field: "item" },
                { field: "foo" },
                { template: '<a class="k-button k-grid-CustomCommand" href="\\#">#= determineName(data) #</a>' }
            ]
        });
        //hook up to the click event
        $("#grid").data("kendoGrid").tbody.on("click", ".k-grid-CustomCommand", function(e) {
            console.log("click fired");
        });
        //function that calculates the command text
        function determineName(data) {
            return (data.foo % 2) ? "odd" : "event";
        }

我现在使用如下方式绑定

                this.grid.data("kendoGrid").tbody.on("click", ".k-grid-disable",that.disable);

由于在command内部添加启用/禁用按钮,通过绑定模板或者直接在command内部写模板,都是行不通的,都提示找不到if里面的变量。最后只能将操作里面的按钮全部模板化,这样才可以识别模板变量的值。

     columns: [
                        {field: "num", title: "登录名", width: "100px"},
                        {field: "nickname", title: "真实姓名", width: "100px"},
                        {field: "", title: "所属角色", width: "100px"},
                        {field: "ucreation_date", title: "创建时间", width: "100px"},
                        {field: "lastlogin", title: "最后登陆时间", width: "100px"},
                        {field: "status_switch", title: "状态", width: "100px"},
                        {template: $(".usermanage_operater").html(), title: "操作", width: "150px"}
                    ],
                    editable: {
                        mode: "popup",
                        template: kendo.template($(".usermanage_edit").html())
                    },
<script class="usermanage_operater" type="text/x-kendo-template">
    <a role="button" class="k-button k-button-icontext k-grid-edit"><span class="k-icon k-i-edit"></span>修改</a>
    <a role="button" class="k-button k-button-icontext k-grid-delete"><span class="k-icon k-i-close"></span>删除</a>
    # if (status_switch == 1) { #
    <a role="button" class="k-button k-button-icontext k-grid-disable">禁用</a>
    # } else {#
    <a role="button" class="k-button k-button-icontext k-grid-disable">启用</a>
    #}#
</script>

通过这种方式,在新增的时候看,又提示报错,于是在model里面加入status_switch

                    schema: {
                        model: {
                            id: "id",
                            fields: {
                                status_switch: {type: "boolean"},
                            }
                        },

自定义弹框window:

            <script>
                var wnd,
                    detailsTemplate;

                $(document).ready(function () {
                    var grid = $("#grid").kendoGrid({
                        dataSource: {
                           pageSize: 20,
                           data: createRandomData(50)
                        },
                        pageable: true,
                        height: 550,
                        columns: [
                            { field: "FirstName", title: "First Name", width: "140px" },
                            { field: "LastName", title: "Last Name", width: "140px" },
                            { field: "Title" },
                            { command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }]
                    }).data("kendoGrid");

                    wnd = $("#details")
                        .kendoWindow({
                            title: "Customer Details",
                            modal: true,
                            visible: false,
                            resizable: false,
                            width: 300
                        }).data("kendoWindow");

                    detailsTemplate = kendo.template($("#template").html());
                });

                function showDetails(e) {
                    e.preventDefault();

                    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                    wnd.content(detailsTemplate(dataItem));
                    wnd.center().open();
                }
            </script>

            <script type="text/x-kendo-template" id="template">
                <div id="details-container">
                    <h2>#= FirstName # #= LastName #</h2>
                    <em>#= Title #</em>
                    <dl>
                        <dt>City: #= City #</dt>
                        <dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
                    </dl>
                </div>
            </script>

showDetails方法将dataItem传递给模板templete,wnd.center().open() 打开自定义弹框,但是不清楚如何在模板中添加一些复杂的组件,上述情况更适合查看详情类弹框

 类似资料: