效果图如下:
首先看一下布局如下:
<table id="moretable" class="table table-bordered text-center table-striped">
<thead>
<tr class="bg-primary text-white">
<th>学生ID</th>
<th>学生姓名</th>
<th>学生性别</th>
<th>家庭地址</th>
<th>学校名称</th>
<th>专业名称</th>
</tr>
</thead>
<tbody></tbody>
</table>
Table-bordered:表格边框||table-striped:表格隔行换色。
数据库字段如下:
第一张表:学院表
第二张表:专业表
第三张表:学生表
其次是把SQL数据库里面的数据通过Models引入到我们的项目中,实例化:Models.morechartEntities myModal2 = new Models.morechartEntities();
接下来就到了Javascript部分:
$(function () {
同一控制下可以不用指定控制器,可直接调用方法,data指接收返回回来的数据
$.get("moreInfor", function (data) {
console.log(data);
var str = "";
$.each(data, function (index) {each循环,第一个要遍历的数据,第二个回调的函数
字符串拼接
str += '<tr οndblclick="amend(this)"><td>'
+ '<input type="checkbox" name="studentID" type="checkbox" value=" ' + data[index].studentID + '" />'
+ '</td><td>' + data[index].studentName
+ '</td><td>' + data[index].studentSex
+ '</td><td>' + data[index].studentAddress
+ '</td><td>' + data[index].schoolName
+ '</td><td>' + data[index].zhuanyeName
+ '</td></tr>';
console.log(data[index].studentname);
})
把str添加到table表格里的tbody里面创建tr
$("#moretable tbody").append(str);
});
控制器中的方法如下:
public ActionResult moreInfor()
{ 创建一个变量,通过myModal2查找出studentchart表
var list = (from tbstudent in myModal2.studentchart
join把表连接起来 equals等于
join tbschool in myModal2.school on tbstudent
.schoolID equals tbschool.schoolID
join tbzhuanye in myModal2.zhuanyechart on tbstudent
.zhuanyeID equals tbzhuanye.zhuanyeID
查询需要的数据
select new {
tbstudent.studentID,
tbstudent.studentName,
tbstudent.studentSex,
tbstudent.studentAddress,
tbschool.schoolName,
tbzhuanye.zhuanyeName,
}).ToList();
ToList返回一个包含输入序列中的元素
return Json(list, JsonRequestBehavior.AllowGet);返回数据
}