查询数据库的表格信息

查询数据库的表格信息

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Adobe Dreamweaver JavaScript

作者：陈钰桃

撰写时间：2020年8月17日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

成果图

查询数据库的表格信息

HTML页面内容布局

<h3 class="text-center py-3">学生信息维护【实战测试】</h3>

</div>

</form>

</div>

JS部分（学生信息维护案例）

页面部分

1. 声明全局变量：学生表、提示层、表格

var tabStudent, layer, layuiTable;

2.页面加载（初始化表格）

$(document).ready(function () {

layui.use(['layer', 'table'], function () {

layer = layui.layer,

layuiTable = layui.table;

3.渲染表格

tabStudent = layuiTable.render({

elem: "#tabStudent",//table的ID HTML元素的ID

url: "/Main/SelectStudents",//数据接口方法的路径控制器方法名称

4.表格头部名称

cols: [[

{ title: '序号', type: 'numbers' },

//numbers 序号列，title设定标题名称，width: 160 指定宽度，align 指定对齐方式

{ title: '学生编号', field: 'studentNumber', align: 'center' },

{ title: '学生姓名', field: 'studentName', align: 'center' },

{ title: '班级', field: 'calssName', align: 'center' },

{ title: '性别', field: 'studentSex', align: 'center' },

{ title: '手机号', field: 'telephone', align: 'center' },

{ title: '身份证号', field: 'studentIDCard', align: 'center' },

自定义列

{ title: '图片', templet: showPicture, align: 'center' },

{ title: '操作', templet: setOperate, width: 160, align: 'center'}

]],

page: true //开启分页（成果图没有开启分页效果）

})

});

4. 自定义列的方法（如果初始化表格中写了自定义列后面不写自定义列方法就会出错）

学生图片

function showPicture(rowData) {

var picture = rowData.studentPicture;//图片

if (picture != undefined && picture != null && picture != '') {

return '<button type="button" class="layui-btn layui-btn-xs" οnclick="openUserPicture(\'' + picture + '\')">查  看</button>';

} else {

return "未上传";

}

操作（修改删除按钮）

function setOperate(rowData) {

var studentID = rowData.studentID;//学生ID

var btns = "";

btns += '<button type="button" class="layui-btn layui-btn-xs" οnclick=openUpdateModal(' + studentID + ')>修改</button>';

btns += '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" οnclick=saveDelete(' + studentID + ')>删除</button>';

return btns;}

控制器部分

5.控制器查询数据库信息

join tab被连接表 in model.表名 on 连接表.外键/主键/外键 equals tab被连接表.主键/外键/外键

tbStudent表连接（join）tbClass表，通过（on）tbStudent.classID 等于（equals）tbClass.classID

连表查询格式

from tabA

join tabB on tabA.cID equals tabB.cID

public ActionResult SelectStudents(LayuiTablePage layuiTablePage, string studentNumber, string studentName, int? classID, string studentIDCard)

{

var listStudent = from tbStudent in myModel.S_Student

join tbClass in myModel.S_Class

on tbStudent.classID

equals tbClass.classID

select new StudentVo

{

studentID = tbStudent.studentID,//学生ID

classID = tbStudent.classID,//班级ID

studentNumber = tbStudent.studentNumber,//学生编号

studentName = tbStudent.studentName,//学生姓名

calssName = tbClass.calssName,//班级

studentSex = tbStudent.studentSex,//性别

telephone = tbStudent.telephone,//手机号

studentIDCard = tbStudent.studentIDCard,//身份证号

studentPicture = tbStudent.studentPicture,//图片

};

6.分页查询学生数据

List<StudentVo> listStu = listStudent

.OrderByDescending(m => m.studentID)//根据学生ID倒叙排序

.Skip(layuiTablePage.GetStartIndex())//跳过前面页数的数据

.Take(layuiTablePage.limit)//查询本页数据的条数

.ToList();//返回List集合

7. 查询学生数据的总条数

int intTotalRow = myModel.S_Student.Count();

8. 准备Layui Table所需的数据格式（泛型）

LayuiTableData<StudentVo> layuiTableData = new LayuiTableData<StudentVo>()

{

count = intTotalRow,//总条数

data = listStu,//本页的数据

};

9. 返回Json

return Json(layuiTableData, JsonRequestBehavior.AllowGet);

查询数据库的表格信息

相关推荐