<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP eg starting page</title>
<link rel="stylesheet" type="text/css" href="jqGrid/themes/basic/grid.css">
<link rel="stylesheet" type="text/css" href="jqGrid/themes/jqModal.css">
<script type="text/javascript" src="jqGrid/jquery.js"></script>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="jqGrid/js/jqModal.js"></script>
<script type="text/javascript" src="jqGrid/js/jqDnR.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#grid').jqGrid({
url:'getJson.htm',
datatype:'json',
mtype:'POST',
colNames:['id','name','age'],
colModel :[
{name:'id',index:'id', width:60},
{name:'name',index:'name', width:60},
{name:'age',index:'age', width:60}
],
jsonReader:{
root: "rows",
page: "page",
total: "total",
records: "records",
cell: "cell"
},
pager: 'nav',
rowNum:10,
rowList:[10,20,30],
sortname:'id',
sortorder:"desc",
viewrecords:true,
imgpath:'jqGrid/themes/basic/images',
caption:'用户管理',
multiselect:true,
loadonce:true
});
//定义按键
$('#grid').navGrid('#nav',{refresh: true,edit: true, add: true,del: true,search: true});
});
</script>
</head>
<body>
This is my JSP page. <br>
<table id="grid" class="scroll"></table>
<div id="nav" class="scroll"></div>
</body>
</html>
注:
老是报jqGrid 无效的属性 是怎么回事?
脚本文件都测试过,引入没有问题。
分享到:
相关推荐
**描述:** 当`altRows`为`true`时,此属性指定交替行的CSS类名,以改变行的颜色或样式。 **属性详情:** - **类型**: String - **默认值**: `ui-priority-secondary` - **兼容性**: - 需要`reload`方法的支持。 ...
### jqGrid超详细属性说明(追加整理) #### 概述 `jqGrid`是一款功能强大的jQuery插件,主要用于在Web应用中展示表格数据。它不仅支持多种数据格式(如XML、JSON等),还提供了丰富的配置选项来实现复杂的前端交互...
- **描述内容**:当`datatype`属性设置为`xmlstring`或`jsonstring`时,此属性用于指定具体的数据字符串。 - **默认值**:`null` - **是否可修改**:可以 - **用途**:适用于需要直接使用字符串形式数据的情况。 **...
要启用此功能,我们需要在初始化jqGrid时设置`shrinkToFit`为`false`,以防止表格自适应宽度导致冻结列消失。 至于拖动列,jqGrid通过`sortable`选项支持列的拖放排序。默认情况下,列是不可排序的,我们需要将`...
jqGrid支持多种数据源,如JSON、XML、HTML、CSV等,能够无缝集成到各种Web项目中。其核心功能包括: 1. 数据加载:支持异步加载,能有效处理大数据量。 2. 排序:支持列点击排序,可自定义排序规则。 3. 筛选:提供...
通过`editGridRow`、`addGridRow`方法启动编辑或添加操作。同时,`editParams`和`addParams`可以配置编辑和添加的参数,如确认对话框、提交处理函数等。 八、事件处理 JqGrid有许多内置的事件,如`loadComplete`...
**正文** `jqGrid`是一款基于JavaScript的开源数据网格组件,主要用于在Web...通过其丰富的配置选项、事件和方法,开发者可以轻松构建功能完善的表格应用,同时,其优秀的性能和易用性使得jqGrid在Web开发中广受欢迎。
10. **API 调用**:jqGrid 提供了一系列 API 方法,如 `reloadGrid()` 用于刷新表格,`getGridParam()` 获取当前设置,`setGridParam()` 修改设置,`jqGrid('editRow')` 和 `jqGrid('saveRow')` 用于行编辑等。...
- **需求**:jqGrid 需要 jQuery 库的支持,确保项目环境中已经包含了 jQuery。 - **是否需要付费**:文档中提到无需为 jqGrid 付费,这意味着它可能是免费开源的。 - **安装**:文档提供了安装指南,但具体步骤未给...
3. **数据处理**:jqGrid支持客户端和服务器端的数据过滤、排序和分页,减轻了服务器的压力。同时,它能处理各种数据格式,便于与后端API进行交互。 4. **自定义功能**:开发者可以通过设置各种参数和事件来定制...
通过 AJAX,jqGrid 能够在不刷新整个页面的情况下从服务器获取或发送数据。当用户进行操作,例如排序、搜索或编辑单元格时,jqGrid 会发送请求到服务器,服务器处理这些请求并返回更新后的数据。 jqGrid 支持大量的...
1. **数据加载与分页**:jqGrid支持动态加载数据,用户可以根据需要加载一定数量的数据,实现高效的数据分页。 2. **排序功能**:用户可以通过点击列头对表格数据进行升序或降序排序,方便查找和分析数据。 3. **...
3. **编辑功能**:jqGrid支持行内编辑、弹出式编辑和批量编辑,方便用户对数据进行增删改查操作。 4. **数据源支持**:jqGrid能与多种数据源无缝对接,如JSON、XML、CSV或数据库,适应不同的后端架构。 5. **响应...
jqGrid 从 4.1.2 版本开始支持列锁定功能,这使得在横向滚动时,特定列(通常是关键信息列)始终保持可见。 1. 效果展示:在滚动表格时,被锁定的列保持固定,而其他未锁定的列会随着滚动条移动。 2. 实现方法:在...
2. **远程数据源**:jqGrid支持与服务器端进行异步交互,能够通过AJAX从服务器获取数据,实现动态加载。 3. **编辑功能**:提供行内编辑、弹出式编辑和批量编辑模式,方便用户对表格数据进行修改。 4. **多列排序*...
JQGrid支持多种数据源,包括本地数组、JSON、XML等。`datatype`参数用于指定数据类型,如`'json'`或`'xml'`。`url`参数则用于指定服务器端数据的URL。 4. **列定义与操作** `colModel`数组定义了表格的列,包括...
这个插件支持多种功能,包括但不限于数据的增删改查、分页、排序、过滤和自定义格式化。在这个项目文件“RuanTai.Finance”中,我们将深入探讨如何使用 jqGrid 实现这些功能,并且在修改和添加操作时使用 modal 弹出...
下面是 JQGrid 的一些关键特点和使用方法。 JQGrid 的特点 * 外观时髦,功能齐全 * JS 控件,用来显示和操作表格数据 * 使用 AJAX 方式 * 可以被集成到任何服务器端技术,例如 ASP, JavaServelets, JSP, PHP 等等 ...
jqGrid是一款功能强大的JavaScript表格插件,用于在网页上展示并操作数据,它支持各种操作,包括数据的加载、排序、搜索以及分页等。在这个"jqgrid加载本地数据并且分页例子"中,我们将深入探讨如何利用jqGrid实现从...