jqgrid教程(项目实战)

jqGrid是一款强大的web表格组件,采用ajax技术实现客户端异步数据加载,适用于多种后端语言。本文将从背景介绍、原理、参数、ColModel API、事件、方法、实战应用及更多功能进行详尽解析,帮助开发者更好地掌握和运用jqGrid。
摘要由CSDN通过智能技术生成

后台管理助手jqgrid

jqGrid是使用ajax技术代表和处理web表格数据的一种解决方案,由于在客户端使用ajax异步加载数据,使得它能够与许多的后端语言如:PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl中的任何一种结合起来进行开发。下面我从jqGrid的背景到项目实战进行介绍,对于有的功能可能存在疑问的可以参考:jqGrid官方网站

  • jqGrid背景介绍
  • jqGrid原理
  • jqGrid参数说明
  • jqGrid中ColModel API
  • jqGrid事件
  • jqGrid方法
  • 项目实战之jqGrid应用
  • jqGrid其他功能介绍
  • 项目源码

jqGrid背景介绍

jqGrid是Trirand软件开发公司的Tony Tomov开发的一个方便人们开发使用的web组件,它包含了许多免费和开源的库如:jQuery, ThemeRoller, & jQuery UI等 ,同时最新的版本已经支持bootstrapUI,Tony最初的时候是因为他需要一种方式来表示数据库信息,这种方式有速度上的要求同时还要独立于服务器端技术和后台数据库,于是jqGrid诞生了,从最初的版本到现在已经升级到了Guriddo jqGrid 5.0.2 ,之前的各个版本都是在不断的修复bug以及添加符合需求的新功能。jqGrid越来越趋于完善。

jqGrid原理

jqGrid是典型的B/S架构,服务器端只是提供数据管理,客户端只提供数据显示。换句话说,jqGrid可以以一种更加简单的方式来展现你数据库的信息,而且也可以把客户端数据传回给服务器端。

jqGrid参数说明

名称

类型

描述

默认值

可修改

url

string

获取数据的地址

 

 

datatype

string

从服务器端返回的数据类型,默认xml。可选类型:xml,local,json,jsonnp,script,xmlstring,jsonstring,clientside

 

 

mtype

string

ajax提交方式。POST或者GET,默认GET

 

 

colNames

Array

列显示名称,是一个数组对象

 

 

colModel

Array

常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序

 

 

pager

string

定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置

 

 

rowNum

int

在grid上显示记录条数,这个参数是要被传递到后台

 

 

rowList

array

一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台

 

 

sortname

string

默认的排序列。可以是列名称或者是一个数字,这个参数会被提交到后台

 

 

viewrecords

boolean

定义是否要显示总记录数

 

 

caption

string

表格名称

 

 

ajaxGridOptions[a1] 

object

对ajax参数进行全局设置,可以覆盖ajax事件

null

ajaxSelectOptions[a2] 

object

对ajax的select参数进行全局设置

null

altclass

String

用来指定行显示的css,可以编辑自己的css文件,只有当altRows设为 ture时起作用

ui-priority-secondary

 

altRows

boolean

设置表格 zebra-striped 值

 

 

autoencode

boolean

对url进行编码

false

autowidth

boolean

如果为ture时,则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变,为了使表格宽度能够自动调整则需要实现函数:setGridWidth

false

cellLayout

integer

定义了单元格padding + border 宽度。通常不必修改此值。初始值为

5

cellEdit

boolean

启用或者禁用单元格编辑功能

false

cellsubmit

String

定义了单元格内容保存位置

‘remote’

cellurl

String

单元格提交的url

空值

datastr

String

xmlstring或者jsonstring

空值

deselectAfterSort

boolean

只有当datatype为local时起作用。当排序时不选择当前行

true

direction

string

表格中文字的显示方向,从左向右(ltr)或者从右向左(rtr)

ltr

editurl

string

定义对form编辑时的url

空值

emptyrecords

string

当返回的数据行数为0时显示的信息。只有当属性 viewrecords 设置为ture时起作用

 

ExpandColClick

boolean

当为true时,点击展开行的文本时,treeGrid就能展开或者收缩,不仅仅是点击图片

true

ExpandColumn

string

指定那列来展开tree grid,默认为第一列,只有在treeGrid为true时起作用

空值

否<

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值