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” 來完成加載完成後觸發事件

效果圖如下:這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章