源自数据库的数据显示表格
前台
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设定。