//首先引入jquery的相关包组件

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/jQuery-plguin.js"></script>

/**

* 扩展jQuery 的一个方法，调用这个方法，我就可以画出表格，表格有多少列，多少行数据...

*/

$(function(){

        $("#datagrid").datagrid({

               columns:[

                      {title:"车次"},

                      {title:"出发站/始发站"},

                      {title:"出发时间/到达时间"},

                      {title:"商务座"},

                      {title:"特等座"},

                      {title:"备注"}

               ],

               url:"datagrid.json",

               method:"POST"

        })

})    

/**
**
*/引入的jQuery-plguin.js中的内容
$.fn.extend({
　　datagrid:function(object){
　　　　var columns=object.columns;
　　　　var tr="<tr>";
　　　　for(var i=0;i<columns.length;i++){
　　　　　　tr+="<td>"+columns[i].title+"</td>";
　　　　}
　　　　tr+="</tr>";
　　　　$(this).append(tr);
　　　　$.ajax({
　　　　　　url:object.url,
　　　　　　type:object.method,
　　　　　　success:function(data){
　　　　　　　　var rows=data.rows;
　　　　　　　　

　　　　　　　　for(var i=0;i<rows.length;i++){
　　　　　　　　　　var tr1="<tr>";
　　　　　　　　　　tr1+="<td>"+rows[i].ceci+"</td>";
　　　　　　　　　　tr1+="<td>"+rows[i].startstate+"</td>";
　　　　　　　　　　tr1+="<td>"+rows[i].starttime+"</td>";
　　　　　　　　　　tr1+="<td>"+rows[i].swz+"</td>";
　　　　　　　　　　tr1+="<td>"+rows[i].tdz+"</td>";
　　　　　　　　　　tr1+="<td>"+rows[i].bz+"</td>";
　　　　　　　　　　tr1+="</tr>";

　　　　　　　　　　$("#datagrid").append(tr1);
　　　　　　　　}

　　　　　　}
　　　　})
　　}
})

//datagrid.json中的内容

{

    "total":9527,

    "rows":[

        {

            "ceci":"G118",

            "startstate":"北京/青岛",

            "starttime":"9点10分/14点整",

            "swz":"有",

            "tdz":"有",

            "bz":"预定"

        },

        {

            "ceci":"G118",

            "startstate":"北京/青岛",

            "starttime":"9点10分/14点整",

            "swz":"有",

            "tdz":"有",

            "bz":"预定"

        },

        {

            "ceci":"G118",

            "startstate":"北京/青岛",

            "starttime":"9点10分/14点整",

            "swz":"有",

            "tdz":"有",

            "bz":"预定"

        }

        ,

        {

            "ceci":"G118",

            "startstate":"北京/青岛",

            "starttime":"9点10分/14点整",

            "swz":"有",

            "tdz":"有",

            "bz":"预定"

        }

        ,

        {

            "ceci":"G118",

            "startstate":"北京/青岛",

            "starttime":"9点10分/14点整",

            "swz":"有",

            "tdz":"有",

            "bz":"预定"

        }

        ,

        {

            "ceci":"G118",

            "startstate":"北京/青岛",

            "starttime":"9点10分/14点整",

            "swz":"有",

            "tdz":"有",

            "bz":"预定"

        }

        ,

        {

            "ceci":"G118",

            "startstate":"北京/青岛",

            "starttime":"9点10分/14点整",

            "swz":"有",

            "tdz":"有",

            "bz":"预定"

        }

    ]

}