JQuery MiniUI development tutorial table control table: Custom cells (3)

Reference example: Custom Cells

Monitor and process "drawcell" Events

You can use the drawcell event to customize cell content, styles, and row styles.

Grid. on ("drawcell", function (e ){
Var record = e. record,
Column = e. column,
Field = e. field,
Value = e. value;

// Format the date
If (field = "birthday "){
If (mini. isDate (value) e. cellHtml = mini. formatDate (value, "yyyy-MM-dd ");

}

// Add a "year" string to the age
If (field = "age "){
E. cellHtml = value + "years old ";
}

// Add the background color to the account Column
If (field = "loginname "){
E. cellStyle = "background: # ecedef ";
}

// The salary exceeds 10 thousand, marked in red
If (field = "salary" & value> = 10000 ){
E. cellStyle = "color: red; font-weight: bold ;";
}

// Display education level
If (field = "educational "){
For (var I = 0, l = Educationals. length; I <l; I ++ ){
Var edu = Educationals [I];
If (edu. id = value ){
E. cellHtml = edu. name;
Break;
}
}
}

// Action column, superjoin OPERATION button
If (column. name = "action "){
E. cellStyle = "text-align: center ";
E. cellHtml = '<a href = "javascript: edit (\'' + record. id +' \ ') "> Edit </a> & nbsp ;'
+ '<A href = "javascript: del (\'' + record. id +' \ ') "> Delete </a>'
}

// Replace gender text with an image
If (column. field = "gender "){
If (e. value = 1 ){
E. cellHtml = "<span class = 'icon-female '> </span>"
} Else {
E. cellHtml = "<span class = 'icon-Boys'> </span>"
}
}

// Set the row style
If (record. gender = 1 ){
E. rowCls = "myrow ";
}
});