kendo grid表格加载完成之后触发事件dataBound

今天在做表格显示时 需要在kendo grid表格生成之后根据其中一个字段的值进行整列的渲染(底部颜色不同),显示图片如下:

在表格生成之后调用其获取其行的数据,在得到相应的字段值进行判断然后给予相应的css样式,但建立的前提在此事件必须在表格加载完成之后才能触发。这样一遍获取到相应的参数,使用了window.onload 方法结果不行 ,在表格没加载完成之前就执行了,最终找到了kendo 中的一个dataBound属性(表格加载完成后执行)完美的解决的这个问题。
未添加之前效果图:
这里写图片描述
代码如下:

//获取远程的数据
 var _dbopt = {
        transport: {
            read: {
                url: “远程数据的url”,
                type: "POST",
                dataType: "json",
                cache: false,
                //提交form表单进行序列化提交
                data: function (p) {
                    if (formId) {
                        var arr = $(formId).serializeArray(); $(formId).serializeArray();
                        if (arr && arr.length > 0) {
                            var d = {};
                            $.each(arr, function (idx, it) {
                                if (it.value) {
                                    // 多选情况下,同一key有多个值
                                    if (d[it.name]) {
                                        d[it.name] = d[it.name] + ","+it.value;
                                    }
                                    else{
                                        d[it.name] = it.value;
                                    }
                                }
                            });
                            return d;
                        }
                    }
                    return {};
                }
            },
            parameterMap: function (data, type) {
                if (type == "read") {
                    data.pageNo = data.page;
                    data.page = undefined;
                    data.take = undefined;
                    data.skip = undefined;
                    delete data.page;
                    delete data.take;
                    delete data.skip;
                    return data;
                }
            }
        },
        schema: {
            type: "json",
            data: "rows",
            total: "total"
        },
        serverPaging: true,
        pageSize: options.pageSize || 20,
        change: function () {
            _constants.DATA_GRID_NUMBER_START = 0;
        }
    };
var columns = [

                        {
                            field: "sbbh",
                            hidden:true
                        },
                        {
                        field:"hphm",
                        title: "号牌号码",
                            template:function (dateItem) {
                                return "<span>"+dateItem.hphm+"</span>"
                            },
                            width:100
                        },
                        {
                            field: "wfdz",
                            title:"违法地址",
                            template:function (dateItem) {
                                return "<span>"+dateItem.wfdz+"</span>"
                            },
                            width:200
                        },
                        {
                            field: "wfsj",
                            title: "违法时间",
                            template:function (dateItem) {
                                return "<span>"+dateItem.wfsj+"</span>"
                            },
                            width:130,
                            //attributes: {style: "#= 'color:red;' #"}

                        },

                        {
                            field:"isCheck",
                            title: "状态",
                            width: 70,

                            template:function (dateItem) {
                                if(dateItem.isCheck == 0){
                                    return "<span>未处理</span>"
                                }else if(dateItem.isCheck == 1){
                                    return "<span style='color: #FFC414'>已校对</span>"
                                }else if(dateItem.isCheck == 2){
                                    return "<span style='color: green'>已审核</span>"
                                }else if(dateItem.isCheck == 3){

                                    return "<span style='color: green' >上传成功</span>"
                                }else if(dateItem.isCheck == 4){
                                    return "<span onclick='addColor()' style='color: #e00f0f'>已作废</span>"
                                }else if(dateItem.isCheck == 5){
                                    return "<span  style='color: #FB6D17'>审核作废</span>"
                                }else if(dateItem.isCheck == 6){
                                    return "<span style='color: red'>上传失败</span>"
                                }
                            }
                        },
                        {
                            field: "zfyy",
                            title: "备注",
                            template:function (dateItem) {
                                return "<span>"+dateItem.zfyy+"</span>"
                            },
                            width:180

                        }

                ]

//调用kendo ui 的配置项
 var _opt = {
        dataSource: new kendo.data.DataSource(_dbopt),
        toolbar: hc.template($(toolbarId).html().replace(/&lt;/g, '<').replace(/&gt;/g, '>')),
        height: "100%",
        groupable: false,
        selectable: true,
        pageable: {
            refresh: true,
            pageSizes: [10, 20, 50, 100],
            input: (showShort==true?false:true),
            buttonCount: (showShort==true?1:5),
            messages: {
                empty: "没有数据",
                display: (showShort==true?"":"共{2}条数据,本页显示{0}-{1}条"),
                page: "",
                of: "/ {0}",
                itemsPerPage: "",
                first: "首页",
                last: "末页",
                next: "下一页",
                previous: "上一页",
                refresh: "刷新",
                morePages: "更多页"
            }
        },
        showNumber: true,
        columns: columns,
        dataBound:addColor //在这里添加一个dataBound属性 在表格加载完成后执行 addColor方法
        sortable: {
                        mode: "multiple",
                        allowUnsort: true //允许不分类
                    },
        resizable: false,
        selectable: "multiple,row",
        showNumber:true  //展示序号列
    };


     //kendo表格加载完成后触发事件
    function addColor(){
        var grid = $("#grid").data("kendoGrid");    // 行样式
        var rows = grid.tbody.find("tr");
        rows.each(function (i, row) {
            var isCheck = $(this).find("td>span").eq(3).text();
            if(isCheck == '上传成功'){
                $(this).css("background-color", "#d1edb8");
            };

        });
    }

主要代码在倒数23行左右 “dataBound:addColor” 来完成加载完成后触发事件

效果图如下:这里写图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Kendo UI框架提供了强大的Excel导出功能,通过Grid的saveAsExcel能方便地导出Grid中的数据,而且格式美观大方,使用起来也非常方便。但是在实际使用中不是很理想,主要有以下两个问题: 1. 导出的列数据是原始值 Kendo UI默认导出的是该列的value值,及查出来的值,有时候我们会用template渲染一下导出的列,比如将“Y”显示成“是”,把“N”显示成“否”。而Kendo UI导出的却是Y/N这种只有程序员看得懂的数据库标识,显然不是我们需要的,这种情况非常常见。 2. 不能灵活控制可导出的列 Kendo UI的Excel导出主要看两点,一是该列(column)是field字段,而不是自定义的name;二是该列不是隐藏的(hidden:true)。这样我们无法灵活导出我们需要的列。 为了解决上面两个问题,我查看了Kendo UI的源代码,提取并改进了源代码。主要更改点及使用方法请看下面源代码。主要针对以上两点做了更改,只需要在grid定义columns时加上isExport或exportTemplate即可: 在导出数据,先看该列有没有自定义exportTemplate(),没有则看Kendo UI自带的template(),再没有才会导出查出来的值。 判断是否导出该列不再看hidden属性,而是看列的isExport属性,如果为false则不导出,其它情况一律导出该列。 经过这两个更改,基本可以应对所有业务场景,可以方便快捷地开发了! 但要注意,Kendo UI自带的导出功能无法应用于导出大量数据,似乎是浏览器的jvm溢出了,建议超过5万条的数据导出还是老老实实写后台导出功能吧。。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值