HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>网格控件测试</title> <link href="Style/site.css" rel="stylesheet" type="text/css" /> <script src="Script/jquery.js" type="text/javascript"></script> <script src="Script/JTemplate.min.js" type="text/javascript"></script> <script src="Script/JGrid.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#content").grid("<tr style='height:30px;'><td>${Name}</td><td>${ Age}</td><td>${ Adress.Street}</td></tr>",[{ Name: "zhoulq", Age: 28, Adress: { Street: "BaoAn", Road: 1} }, { Name: "sunyd", Age: 23, Adress: { Street: "FengXian", Road: 2} }, { Name: "yangql", Age: 24, Adress: { Street: "HuaGuang", Road: 4}}]); $("#content").grid("<tr style='height:30px;'><td>${Name}</td><td>${ Age}</td><td>${ Adress.Street}</td></tr>", "<tr class='dgAlternatingItem' style='height:30px;'><td>${Name}</td><td>${ Age}</td><td>${ Adress.Street}</td></tr>", [{ Name: "zhouyf", Age: 29, Adress: { Street: "HePing", Road: 2} }, { Name: "qinly", Age: 28, Adress: { Street: "PuDong", Road: 223} }, { Name: "zhoujh", Age: 28, Adress: { Street: "GuangHua", Road: 27}}]); }); </script> </head> <body> <table id="content" class="dgMain"> <tr class="dgHeader" style="height:30px;"><th>姓名</th><th>年龄</th><th>街道</th></tr> </table> </body> </html>
运行效果：
控件脚本下载：