JQuery插件jqGrid的使用

最新推荐文章于 2021-08-06 13:21:28 发布
最新推荐文章于 2021-08-06 13:21:28 发布
阅读量210 收藏
点赞数
分类专栏： IT[挨踢] 文章标签： jQuery json PHP HTML ViewUI
JQuery和ExtJs相比，各有优点，JQuery侧重对DOM元素开发，而ExtJs侧重组件开发，虽然JQuery有许多插件来实现跟ExtJs同样的效果，但使用起来，却并不容易。如Ricki使用插件jqGrid做的一个小例子：
代码： 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.3.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/src/grid.loader.js"></script>

<script>
$(document).ready(function(){
   $('#grid').jqGrid({
      url:'http://localhost:8089/new_test/TestManager/TestAction!listCps.action',
	  mtype:'GET',
	  height: 255, width: 600, 
	  loadonce:true, 
	  datatype:'json',
	  colNames:['ID','公司全称','公司地址'],
	  colModel:[{name:'id',index:'id',hidden:true},
	      	    {name:'fullName',index:'fullName', search:true,sorttype:'text'},
	      	    {name:'linkAddress',index:'linkAddress', search:true}],
	  jsonReader:{
	   root:'pageList.result',//注意这里 详细请到官方查看
	   total:'totalPage',
	   page:'currentPage',
	   records:'count',
	   repeatitems: false, //注意这个属性的取值 详细请到官方查看
       id: "0"//注意这里 详细请到官方查看
	  },
	  pager:'#navtoolbar',
	  gridview: true,
	  viewrecords: true, 
	  rowNum:4,
	  rownumbers: true, 
	  rowTotal:4,
	  sortname: 'id', 
	  sortorder: "desc", 
	  caption: "Toolbar Searching" 
   }  
   );
  }
 );
jQuery("#grid").jqGrid('navGrid','#navtoolbar',{del:false,add:false,edit:false,search:true}); 
jQuery("#grid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false}); 
</script>
</head>
<body>
<table id="grid"></table> 
<div id="navtoolbar"></div>
</body>
</html>

效果：
[img]http://dl.iteye.com/upload/attachment/368793/7c25fd11-b5fd-32fb-8845-e57e3b068a65.jpg[/img]

存在的问题：
1.rownumber为负数，但单击标头后，如公司全称，就恢复正常。
2.在标题头下方没出现搜索工具条。
3.可能还有其他问题，暂时没找到。
jqGrid的相关文档：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
有空的话，欢迎你到[url=http://hongfanshu.blogbus.com/]红番薯[/url]逛逛
andy_2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Js插件之JqGrid的使用
qq_34368587的博客
03-26 7871
简介：jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。官网地址：http://blog.mn886.net/jqGrid/示例：需要引入的文件：css:ui.jqgrid.cssjs:jquery-2.0.3.min.jsjquery.jqGrid.min.jsgrid.locale-en.jsdemo:页面加载：$(f...
jqgrid源码
11-10
pggrid、jqgrid源码
比较JqGrid与XtraGrid
weixin_34408624的博客
10-15 84
　　将JqGrid和XtraGrid拿来比较，觉得怪怪的，因为前者用于Web，后者是用于WinForm的。因此只能比较两者的功能优劣，实现某种功能、效果的方便性和效率。首先分别粗略介绍XtraGrid和jqGrid 　　DevExpress是目前.net下最为强大和完整的UI控件库， XtraGrid是这个控件库中重要的控件之一。在XtraGrid中集成了大量的高级特征，所以使用它进行开发的人员...
对asp.net mvc 下使用JQGrid的一些个人想法
showtime5156的专栏
07-29 2458
这段时间研究了下jqgird的官方网下载的ASP.NET MVC的demo，发现的对数据绑定支持的类型必须继承了IQueryable接口，也就是说它最适合用来访问数据库的框架是Linq，如果我们访问数据库不使用linq框架的话就很麻烦了。我想到的解决方法：1.用linq访问数据库
jqgrid--rownumbers添加标题头
时光足迹
08-08 9384
rownumbers: true //可自动在表格前面添加序号 setLabel（）方法可为其添加表头信息 jQuery("#gridtable").jqGrid('setLabel',0, '序号', 'labelstyle‘); setLabel参数说明： rowid,行号 colname, colNames中的name属性 data, 要修改后的值 class, 添
jquery.jqGrid.groupHeader-0.2.1.js
10-15
jqGrid没有setComplexGroupHeaders方法，使用此插件实现三级分组表头功能
jQuery插件jqGrid动态获取列和列字段的方法
10-20
在jQuery插件jqGrid中，动态获取列和列字段是一项重要的功能，这使得开发者能够根据需求灵活地展示或隐藏表格中的列，或者调整列的顺序和属性。以下将详细介绍如何实现这一功能，并通过实例代码进行解析。 首先，...
JQuery插件jqGrid常用属性说明.pdf
02-28
jqGrid是一款基于jQuery的开源数据网格插件，用于在网页上动态展示数据并提供丰富的交互功能，如增、删、改、查、分类显示以及在线编辑。它通过XML、JSON或其他数据格式获取数据，并将其组织成表格形式。下面将详细...
JQuery插件jqGrid常用属性说明.docx
02-28
使用`jQuery("#list").jqGrid()`方法创建表格，其中`#list`是表格的ID。配置参数如`viewrecords: true`，表示是否显示当前数据的总数；`imgpath`设置图片路径；`caption`定义表格标题。 4. **表格样式与行为**： ...
jqGrid表格插件源码概览
weixin_34233618的博客
05-13 144
作为jQuery的表格插件，jqGrid我觉得是最好的，此文有一定jqGrid基础的阅读较好 此文一为大家阅读，二为自己笔记，如有差错，请不吝赐教！ 打开jqGrid的src文件夹如下 Css是样式表 I18n是本地化文件 接下来的就是主要的js文件了 一，非jqGrid自有 　　jqDnR.js Drag'n'Resize 拖拽和拉伸 　　jquery.sea...
58jqGrid - 数据合并单元格
阿甘兄
04-28 459
在bindKeys新方法的帮助下，我们可以导航这个表格，在表格中定义根据不同的按键定义不同的动作。 在这个例子中，选择一行，然后尝试使用向上和向下按键来导航表格的行。 当我们点击Enter的时候，一个弹出框就出现了。 HTML代码举例 <html> <head> <title>jqGrid 实例</title> </head&...
ajax jqgrid,JavaScript系列：ajax异步加载jqgrid
weixin_42310271的博客
08-05 677
ajax简介Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 1通过在后台与服务器进行少...
jquery queue ajax,使用jQuery.queue（）将Ajax请求排队
weixin_29994587的博客
08-05 445
您的问题是，这.ajax()会引发异步运行的Ajax请求。这意味着，.ajax()立即返回，非阻塞。因此，您将函数排队，但它们几乎会像您描述的那样同时触发。我认为在这不是接收.queue()Ajax请求的好地方，它更适合用于fx methods。您需要一个简单的经理。var ajaxManager = (function() {var requests = [];return {addReq: ...
jqgrid怎么接收ajax,如何通过jqgrid中的ajax调用json数据加载
weixin_42516710的博客
08-06 432
通过ajax调用从服务器中获取的数据，但问题是响应 应该在jqgrid中加载，但不加载。在var dataAjax = jData.responseText; dataAjax从服务器接收到数据。如何通过jqgrid中的ajax调用json数据加载这是什么错误。请帮忙$(document).ready(function(){var resData = "";$(".btnLoad").click(...
jquery.cookie.js 用法 jquery获取当前cookie
weixin_33728268的博客
01-07 202
获取当前登录用户COOKIE字符串JS获取方式&lt;head id="Head1" runat="server"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type='text/javascript' src='/j/jquery-1.7.2.min.js'&gt;&lt;/script&gt; &lt;script
*jqwidgets jqxgrid 使用心得 jqxgrid教程 jqxgrid+SpringMVC（初级） 集成JAVA SSM
愤怒的小马哥的学习历程
12-29 6852
jqwidgets jqxgrid 使用心得（初级）及集成JAVA SSM框架通用后台配置（急速列表开发）项目采用Spring springmvc mybatis框架开发 主要功能需求 服务器端分页 服务器端查询（筛选） 服务器端排序 简单配置无需重复编写后台实现思路 前端提供分页所需字段：页码、每页显示行数、过滤条件、排序条件、表名、初始过滤条件（除了表名外，其他字段由插件自行提供） 服务器端通
jqGrid结合POI实现自定义Excel列导出
weixin_30466421的博客
07-23 267
通过之前讲过的jqGrid的columnChooser可以动态隐藏或者显示列，将显示列的列名和字段名传入后端，通过POI就可以实现自定义字段导出Excel 以下是js代码 $(function(){ //页面加载完成之后执行 pageInit(); }); function pageInit(){ //创建jqGrid组件 jQuery("#list2").jqGrid...
jqgrid简单学习
weixin_30699955的博客
05-03 123
JqGrid是JQuery的表格插件，功能非常强大，基本上能想到，它都能实现。下面是一个例子，希望能通过这个示例，能让你了解下JqGrid。 JqGrid文档：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs JqGrid Demo：http://trirand.com/blog/jqgrid/jqgrid.html#t...
jqGrid---单元格添加回车事件(afterSaveCell)
lsh15846393847的博客
11-27 6338
1项目需求:有一个jqGrid的一列,在该列的单元格输入完,按回车后,触发某个事件。 afterSaveCell事件 afterSaveCell(rowid,name,val,iRow,iCol) rowid：行id name：列名称 val:修改后的单元格的值 iRow：编辑单元格行索引 iCol：编辑单元格列索引 实现代码：afterSaveCell可以在该事件中来实现单元...
jquery.jqGrid 使用
最新发布
06-02
jquery.jqGrid是一个基于jQuery的表格插件，用于展示和编辑数据。下面是使用jquery.jqGrid的基本步骤： 1. 引入必要的文件： ```html <!-- 引入jQuery库 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入jqGrid库 --> <script src="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script> <!-- 引入jqGrid CSS文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css"> ``` 2. 创建HTML表格元素： ```html <table id="myGrid"></table> ``` 3. 初始化jqGrid： ```js $("#myGrid").jqGrid({ url: "data.json", // 数据源URL datatype: "json", // 数据类型 colModel: [ // 列模型 { name: "id", label: "编号", width: 50 }, { name: "name", label: "姓名", width: 100 }, { name: "age", label: "年龄", width: 50 }, { name: "sex", label: "性别", width: 50 }, { name: "email", label: "邮箱", width: 150 } ], viewrecords: true, // 显示总记录数 width: 600, // 表格宽度 height: 400 // 表格高度 }); ``` 4. 如果需要编辑功能，可以添加以下代码： ```js $("#myGrid").jqGrid("navGrid", { edit: true, add: true, del: true }); ``` 以上是使用jquery.jqGrid的基本步骤，具体可以根据需求进行配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值