ASP.NET กับ jQuery: การใช้ callback function ใน jQuery template

ความต้องการ

ในขณะที่ template กำลัง render ข้อมูลอยู่ เราต้องการทำงานบางอย่างกับข้อมูล หรือ template นั้นๆ ในขณะกำลังแสดงผลข้อมูล (callback function) ตัวอย่างที่จะทำต่อไปนี้ผมจะทำต่อจากบทความ ASP.NET กับ jQuery: การใช้ template เพื่อ render ข้อมูลที่มีรูปแบบจาก web services โดยจะใส่ callback function เข้าไปในแต่ละ row เพื่อ highlight สีให้สลับกัน

ลงมือทำกันเลย… Action!

จากบทความก่อนที่ผมอ้างถึง ให้ไปที่ code ตรงส่วนของ JavaScript แล้วเติม callback function ให้ทำงาน  highlight row สลับสีกัน ใส่เข้าไปหลังจบ function tmpl โดย binding การทำงานนี้เข้าไปที่ function each หลังจากทำงานกำหนดค่า highlight สีในแต่ละ rowเป็นที่เรียบร้อยแล้ว ก็ให้แสดงผลนี้เข้าไปใน table contentTble ที่เตียมไว้โดยใช้ function appendTo ครับ code หลังจากเขียนเสร็จจะเป็นแบบนี้

function sendAndRenderData () {

$.ajax({

type: “POST”,
url: “EmployeeService.asmx/GetEmployeeData”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,

success: function (msg) {

$(“#contentTble”).removeClass(“hide”);

$(“#empTemplate”).tmpl(msg.d).each(

function(index, item){

if (index % 2)//ตรวจสอบ row index เป็นแถวคู่มั้ย

$(this).css(“background-color”, “Silver”);//เป็นแถวคู่ก็จัดสีพื้นหลังให้เป็นสี Silver

}).appendTo(“#contentTble”);

$(“#btnSubmit”).addClass(“hide”);

},

error: function () {

alert(“An unexpected error has occurred during processing.”);

}

});

ผมได้แสดงสีแดงกับ code ที่เพิ่งจะเติมเข้าไปเมื่อตะกี้นี้ เพื่อให้มันแสดงผลตามต้องการ

ทดสอบ

ลอง run web form นี้ขึ้นมาใหม่ แล้วกดปุ่ม [Click to retrieve Employee data] จะแสดงแบบนี้

เสร็จแล้วละ…

อ่านเพิ่มเติม: ASP.NET กับ jQuery: แนะนำให้รู้จัก jQuery Template

ขอบคุณครับ

#:P

Advertisements

#asp-net, #javascript, #jquery