jqgrid 原理2
3.
列属性,对应该写在colmodel对象里面
外面的对象写的是 表格属性。
分页的实现,pager属性。
分页默认,page=1.rows=20
当前页第1页,20条记录。
分页,mvc核心接收这两个参数。
用div id=pager,渲染分页工具栏。
分页工具栏可以放在html的任意位置。 创建页面的时候,分页工具栏会调整到table中。
前端向后台传的参数 page(当前页),row(条数)
实现分页后,后台向前端返回的数据格式:
page 当前页
total 总页数
records 总条数
rows 当前页的数据(是数组)。
viewrecords 属性显示总条数
rowNum显示每页显示条数
rowlist,定义一个下拉列表,让你选择显示多少条。
每次选一个数据,都往后台发一个请求
sortname属性:定义排序列
浏览器 的formdata 中 sidx 表示排序列。 可以是age 、价格或其他列来排序。
接受的参数 名为sidx。
caption 给表格定义标题 配合hidegrid 属性,决定是否允许 表格使用隐藏的功能
autowidth :自动宽度。这个用的比较多。 可以自适应父容器。 铺满整个页面
height属性 表格的高度
了解就行:
pagerpos 指定分页栏的位置,默认居中。 很少用
pgbuttons 是否显示 分页按钮, 默认值为true 很少用
pginput : 是否展示 跳转页的输入框
4. 增删改操作
新手demo左下角
默认有两个 工具,一个刷新,一个搜索。
给现有的 jqgrid 加入 编辑按钮,jquery("#").navGrid("#pager",加一堆参数)
生成增删改编辑按钮,
第7个参数,用得少。
参数2,3,4,5,6,7 可以省略。
只写第一个参数也行
配合之前讲的一个属性 editable。 指定列的可编辑。
表单中是没有复选框、单选框。但是可以定制为下拉列表(部门列)
comodel 的属性中,有一个叫editoption。
而且editonoption要配合 edittype使用。
edittype,编辑类型:text,password等等
<select>
<option value="男性">男</option>
</select>
展示给用户的是文本值:男,传给后台的是value, 男性
编辑表单中,(下拉框数据的获取两种方法1.本地写死数据 2.远程获取)
远程获取 :dataurl,要求相应的是HTML
下拉列表的多选,在实际开发中,用的蛮多的。
jqgrid 无论是增加、修改、删除,走的都是同一个url。
属性是editurl。
formdata 中有属性,oper:对应的有add,edit,del
5.
基本的属性的使用。
gridComplete ,当所有的表格加载完后,触发的事件
以下讲事件的使用。
事件的使用方法。
以下讲方法的使用。。。
举例:
cleargirddata: 清除表格加载的数据。
//调用 grid的方法。
测试效果
其他方法不带大家全看,用到了再说。