JSP组件显示

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

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

前台

ID学号姓名家庭住址余额
     
     

新建一个table组件

<table></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设定。


     


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值