今天在做表格顯示時 需要在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(/</g, '<').replace(/>/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” 來完成加載完成後觸發事件
效果圖如下: