JSP组件显示

最新推荐文章于 2021-02-17 05:04:52 发布

番茄yeah

最新推荐文章于 2021-02-17 05:04:52 发布

阅读量652

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sinat_34812870/article/details/80091320

这篇博客介绍如何利用JQuery和jqGrid组件在前端展示从数据库获取的数据。主要内容包括创建table组件，设置JQuery部分以指定数据源URL、数据类型、列显示名称和ColModel属性。jqGrid的mtype用于指定AJAX请求方式，height定义表格高度，而jsonReader则解释了如何解析服务器返回的JSON数据。

源自数据库的数据显示表格

前台

ID	学号	姓名	家庭住址	余额

新建一个table组件

用JQuery控制

JQuery部分如下，主要学习jqGrid

url 获取数据的地址

datatype 从服务器端返回的数据类型,我们一般指定为json

colNames 前台列显示名称

ColModel 是jqGrid里最重要的一个属性，设置表格列的属性

常用：

name：为Grid中的每个列设置唯一的名称，这是一个必需选项

index：设置排序时所使用的索引名称，这个index名称会作为sidx参数（prmNames中设置的）传递到Server。

width：设置列的宽度，目前只能接受以px为单位的数值，默认为150。

hidden 在初始化表格时是否要隐藏此列

sortable 是否可排序

sorttype

edittype 可编辑的类型。可选值：text， textarea， select， checkbox， password， button， image， file。

mtype ajax提交方式。POST或者GET，默认GET.当为POST的时候我们指定POST

height 表格高度，可以是数字，像素值或者百分比

jsonReader

jsonReader用于设置如何解析从Server端发回来的json数据。上面表格之所以能够成功解析出来得益于，jsonReader的默认设置。

jsonReader默认设置：

root: "rows", // json中代表实际模型数据的入口
page: "page", // json中代表当前页码的数据
total: "total", // json中代表页码总数的数据
records: "records", // json中代表数据行总数的数据
repeatitems: true, // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。