使用ajax发送请求，获取grid.json中的数据，并以表单的形式呈现信息

关注

原创最新推荐文章于 2021-08-05 13:11:08 发布 582 阅读 AI 写同款· GEO 优化 ›

LigerUI之Grid使用详解(一)——显示数据 LigerUI之Grid使用详解(一)——显示数据示例程序源码立即下载

制作一个表格:

	<table id="emplyeeInfo">
		<tr>						//一个tr是一行
			<th>姓名</th>
			<th>城市</th>
			<th>年龄</th>
			<th>性别</th>
			<th>部门编号</th>
			<th>邮箱</th>
			<th>职位</th>
			<th>创建时间</th>
			<th>学校</th>
			<th>学位等级</th>
			<th>婚姻</th>
			<th>生日</th>
			<th>国家</th>
			<th>职位编号</th>
			<th>登录名</th>
			<th>备注</th>
			<th>部门</th>
			<th>删除</th>
		</tr>
	</table>

.json文件存储数据

[
	{
		"姓名":"谢忠哲",
		"城市":"上海",
		"年龄":"25",
		"性别":1,
		"部门编号":"js",
		"邮箱":"xzz@126.com",
		"职位":"前端工程师",
		"创建时间":"2012-01-31",
		"学校":"宁波工程大学",
		"学位等级":"本科",
		"婚姻":0,
		"生日":"1987-10-22",
		"国家":"fr",
		"职位编号":"js3",
		"登录名":"xzz@163.com",
		"备注":"332",
		"部门":"技术部"
	},
	{
		"姓名":"沈臻妍3",
		"城市":"南京",
		"年龄":"25",
		"性别":1,
		"部门编号":"rs",
		"邮箱":"jan3844@gmail.com",
		"职位":"人事助理",
		"创建时间":"2012-01-31",
		"学校":"浙江理工大学",
		"学位等级":"本科",
		"婚姻":0,
		"生日":"1987-03-26",
		"国家":"",
		"职位编号":"rs2",
		"登录名":"jan3844@gmail.com",
		"备注":"",
		"部门":"人事部"
	},
	……
	}
]

js处理数据：

$(function(){
	$.ajax({
		url: '../data/tableinfo.json',
		type: 'GET',
		dataType: 'json',
	})
	.done(function(data) {
		console.log("success");
		putInfo(data);
	})
	.fail(function() {
		console.log("error");
	})
	.always(function() {
		console.log("complete");
	});
})
function sex(i){
	var sex;
	if(i===1){
		sex ='男';
	}else{
		sex ='女';
	}
	return sex;
}

function marry(i){
	var marry;
	if(i===1){
		marry='已婚';
	}else{
		marry='未婚';
	}
	return marry;
}

function deleteItems(e){//这里的e参数是button中的参数this，代表鼠标点击的按钮本身，其父节点是按钮所在的<td>，再父节点是所在的一整行<tr>
	var element =e.parentNode.parentNode;
	$(element).remove();//jQuery remove() 方法删除被选元素及其子元素
}

function putInfo(data){
	for(i in data){
		temp=data[i];
		var str="<tr>";
		for(var x in temp){
			if(x==="性别"){
				str+="<td class='td-item'>"+sex(temp[x])+"</td>";
			}else if(x==="婚姻"){
				str+="<td class='td-item'>"+marry(temp[x])+"</td>";
			}else{
				str+="<td class='td-item'>"+temp[x]+"</td>";
			}
		}
		str +="<td><button onclick='deleteItems(this)'>删除</button></td>";
		str +="</tr>";
		$("table").append(str);//append jQuery方法。
	}
}

css布局：

h1{
	text-align: center;
}

table{
	width: 1300px;
	border-collapse: collapse;//消除每格数据间的空隙
	margin:auto;//表整体居中
	text-align: center;
}

table tr:nth-child(odd){//odd偶数行
	background-color: #f5f5f5;
}

table tr:nth-child(even){//even奇数行
	background-color: #fff;
}

tr{
	background-color: yellow;
}

td{
	border: 1px solid red;
}

th{
	border: 1px solid red;
}

收录于