①在页面中创建一个或多个表格,设定表头,给每一个th添加一个field属性,属性值与后端数据名字相同
<table>
<thead>
<tr>
<th field="id">编号</th>
<th field="name">姓名</th>
<th field="headImage" formatter = "imgFormat">头像</th>
<th field="dept" formatter = "deptFormat">部门</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<br>
<br>
<table>
<thead>
<tr>
<th field="id">编号</th>
<th field="name">姓名</th>
<th field="headImage" formatter = "imgFormat">头像</th>
<th field="dept" formatter = "deptFormat">部门</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
②为表格添加一定样式
<style type="text/css">
table {
width: 600px;
text-align: center;
}
table td,table th {
border: 1px solid black;
}
</style>
③创建一个json文件,模拟后台数据
{
"totalPage":20,
"totalCount":100,
"data":[{
"id":1,
"name":"tom",
"headImage":"img/1.jpg",
"dept":{
"id":1,
"name":"开发部"
}
},
{
"id":2,
"name":"tonny",
"headImage":"img/2.jpg",
"dept":{
"id":1,
"name":"人事部"
}
}]
}
④扩展datagrid方法,使用$.fn.datagrid = function(){}
//扩展datagrid方法
$.fn.datagrid = function(options){
this.each(function(i,ele){
//读取数据
/*
url:路径
$(ele):操作的元素
*/
loadData(options.url,$(ele));
})
}
⑤创建第四步中的loadData方法用于加载数据
function loadData(url,ele){
$.get(url,function(result){
//console.log(result);
autoCreateTable(result.data,ele);
})
}
⑥加载数据后,我们就要将获取的数据添加到表格中了,接着创建autoCreateTable方法。
//自动创建表
function autoCreateTable(data,ele){
//拿到tbody
var tbody = ele.find("tbody");
//拿到所有的表头
var ths = ele.find("th");
//遍历data
for(var i = 0;i < data.length;i++){
var rowData = data[i];
//创建一个行
var tr = $("<tr>");
/*//创建相应的td
var td1 = $("<td>"+rowData.id+"</td>");
var td2 = $("<td>"+rowData.name+"</td>");
var td3 = $("<td>"+rowData.headImage+"</td>");
var td4 = $("<td>"+rowData.dept+"</td>");
//把td加入到tr上
tr.append(td1).append(td2).append(td3).append(td4);
//把tr加入到tbody里
tbody.append(tr);
*/
//循环表头
for(var j = 0;j < ths.length;j++){
//拿到每一个th
var th = ths[j];
//拿到field的值
var field = $(th).attr("field");
//拿到th上面的formatter属性
var formatter = $(th).attr("formatter");
//创建td
var td = null;
if(formatter == "imgFormat"){//做判断,是否是对应属性值
td = $("<td>"+imgFormat(rowData[field])+"</td>")//如果是,执行这一步
}else if(formatter == "deptFormat"){
td = $("<td>"+deptFormat(rowData[field])+"</td>")
}
else{
td = $("<td>"+rowData[field]+"</td>")
}
tr.append(td);
}
tbody.append(tr);
}
}
⑦因为表中数据存在着图片、对象等无法直接显示的东西,所以我们需要区分对待
如本例中的头像,部门
<th field="headImage" formatter = "imgFormat">头像</th>
<th field="dept" formatter = "deptFormat">部门</th>
为其添加formatter属性,属性名任意取定,添加属性方法
function imgFormat(url){
return "<img width = 60px src = '"+url+"'/>";
}
function deptFormat(data){
return data.name;
}
⑧整个流程梳理:
创建表、添加样式、设置field、formatter属性——>创建datagrid()——>创建loadData()——>创建imgFormat和deptFormat方法——>创建autuCreateTable