//首先引入jquery的相关包组件
/**
* 扩展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="
";for(var i=0;i
tr+="
"+columns[i].title+"";}
tr+="
";$(this).append(tr);
$.ajax({
url:object.url,
type:object.method,
success:function(data){
var rows=data.rows;
for(var i=0;i
var tr1="
";tr1+="
"+rows[i].ceci+"";tr1+="
"+rows[i].startstate+"";tr1+="
"+rows[i].starttime+"";tr1+="
"+rows[i].swz+"";tr1+="
"+rows[i].tdz+"";tr1+="
"+rows[i].bz+"";tr1+="
";$("#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":"预定"}
]
}