Grid控件

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>

 

运行效果：

控件脚本下载：

JTemplate

JGrid

posted @ 2012-06-08 19:06  Joe·Zhou  阅读(760)  评论(0)  编辑  收藏  举报