1、jquery的局部方法开发
//首先引入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":"预定" } ] }