jqGrid学习
jqgrid方法-中文
jqgrid学习（7）方法jqGrid的方法，从3.6开始已经完全兼容jQuery UI库。
用法：Java代码1.<script>2....3.jQuery("#grid_id").jqGridMethod( parameter1,...parameterN );4....5.</script>grid_id:表格的id；jqGridMethod：用到表格上的方法；parameter1,…parameterN ：参数列表此方法并不是返回请求的数据值而是返回一个jqGrid对象。
Java代码1.<script>2....3.jQuery("#grid_id").setGridParam({...}).hideCol("somecol").trigger("reloadGrid");4....5.</script>如果使用新的API：Java代码1.<script>2....3.jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );4....5.</script>grid_id:表格id；jqGrid：表格实例；method：表格支持的方法名；parameter1,...parameterN ：参数列表具体实例：Java代码1.<script>2....3.jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");4....5.</script>jqGrid配置使用新的apiJava代码1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd">2.<html xmlns="http://www.w/1999/xhtml" xml:lang="en" lang="en">3.<head>4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5.<title>My First Grid</title>6.7.<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />8.<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />9.10.<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>11.<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>12.<script type="text/javascript">13. jQuery.jgrid.no_legacy_api = true;14.</script>15.<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>16.17.</head>18.<body>19....20.</body>21.</html>要注意Java代码1.<script type="text/javascript">2. jQuery.jgrid.no_legacy_api = true;3.</script>这段代码必须放在语言包之后jqGrid.js文件之前。
jqgrid 初始化方法时调用的方法
jqgrid 初始化方法时调用的方法jqGrid（jQuery Grid Plugin）是一个基于jQuery的表格插件，用于在Web 页面中展示和操作数据表格。
在jqGrid的初始化过程中，会调用一系列方法来配置和设置表格的属性，以及定义表格的行为。
本文将深入探讨在jqGrid初始化过程中调用的一些重要方法，以及这些方法的作用和用法。
1. jqGrid 初始化方法的调用流程在jqGrid初始化时，通常会调用一系列方法来完成表格的配置和初始化过程。
以下是jqGrid初始化方法的典型调用流程：1.jqGrid方法：这是初始化jqGrid的主要方法，用于配置表格的基本属性、列模型、数据源等。
示例：javascript$("#grid").jqGrid({url:'data.json',datatype:'json',colModel:[{ name:'id',label:'ID',width:50,key:true},{ name:'name',label:'Name',width:150},// 其他列配置],// 其他配置项});2.navGrid方法：用于创建表格的导航栏，包括增删改查等操作按钮。
示例：javascript$("#grid").jqGrid('navGrid','#pager',{ edit:true,add:true,del:true});3.filterToolbar方法：用于添加表格的过滤工具栏，方便用户对数据进行过滤。
示例：javascript$("#grid").jqGrid('filterToolbar',{ stringResult:true,searchOnEnter:false});4.sortableRows方法：允许用户通过拖拽表格行来进行排序。
jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）
jQuery学习笔记——jqGrid的使⽤记录（实现分页、搜索功能）jqGrid 是⼀个⽤来显⽰⽹格数据的jQuery插件，通过使⽤jqGrid可以轻松实现前端页⾯与后台数据的ajax异步通信。
⼀、要引⽤的⽂件要使⽤jqGrid，⾸先页⾯上要引⼊如下css与js⽂件。
1、css<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />2、js <script src='/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script> <script src='/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script> <script src='/Scripts/js/jqGrid/i18n/grid.locale-en.js' type="text/javascript"></script>⼆、使⽤要点说明1、获取值（1）、获取单个id获取⾏号，有这种⽅式：var rowid = $("#grid-table").jqGrid("getGridParam", "selrow");但是经过实际验证，这种⽅式不可⾏，当选中⾏，再点击同⼀⾏会出现获取不到⾏号的情况。
最后先在js最外部定义⼀个变量selId，然后使⽤如下代码在选中⾏时赋值：onSelectRow: function (rowid, status) { selId = rowid; //给最外层的selId赋值 }（2）、获取多个选中⾏的idvar ids=$('#gridTable').jqGrid('getGridParam','selarrrow');其输出格式是逗号分隔的id，如：1,2,3,4,5（3）、获得所有⾏的ID数组var ids = $("jqgridtableid").jqGrid('getDataIDs');（4）、获取⾏数据如果想获取选择的⾏的数据，只要传⼊rowId即可，如下：var rowData = $('#gridTable').jqGrid('getRowData',rowId);⽽这个rowData是⼀个对象，如果要获取选择的⾏的这个对象的属性值，如name的值，需如下：var Name= ;（5）、获取单元格数据var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);（6）、设定⾏选中 //设定选中⾏,可设定多⾏选中： $("jqgridtableid").jqGrid('setSelection',id1); $("jqgridtableid").jqGrid('setSelection',id2);2、⾃定义分页、数据交互何谓⾃定义？就是允许你⽤你⾃⼰喜欢的js对象与后端做数据交互。
jqGrid表格插件——参数配置
pginput boolean 是否显示跳转页面的输入框 true NO
pgtext string 页面信息，第一个值是当前页第二个值是总页数 语言包 YES
reccount integer 只读属性，实际记录数，千万不能跟records 参数搞混了，通常情况下他们是相同的，假如我们定义rowNum=15，但我们从服务器端返回的记录为20即records=20，而reccount=15，表格中也显示15条记录。 0 NO
ajaxGridOptions object 对ajax参数进行全局设置，可以覆盖ajax事件：error，complete 和 beforeSend 空值 是
ajaxGridOptions object 对ajax参数进行全局设置 空值 是
ajaxSelectOptions object 对ajax的select参数进行全局设置，设置editoptions跟searchoptions 参数的select属性值 空值 是
edittext string 编辑按钮上文字 空
edittitle string 当鼠标移到编辑按钮上出现的提示信息 编辑所选择的行
position string 定义按钮位置，可选值left, center and right. left
refresh boolean 是否启用刷新按钮，当点击刷新按钮时会触发trigger(“reloadGrid”)事件，而且会清空搜索条件值 true
事件名 参数 说明
onPaging pgButton 当点击翻页按钮但还为展现数据时触发此事件，当然这跳转栏输入页码改变页时也同样触发此事件。参数pgButton可选值： first,last,prev,next
jQuery学习笔记--jqGrid的使用方法（编辑,删除,更新,新增）
jQuery学习笔记--jqGrid的使用方法（编辑,删除,更新,新增）转：/index.php/07/09/412.htmljquery常用代码集锦admin 七月 9, 2013 Jquery 没有评论1. 如何修改jquery默认编码（例如默认GB2312改成 UTF-8 ）1 2 3 4 5 $.ajaxSetup({ajaxSettings : {contentType : "application/x-www-form-urlencoded;chartset=UTF-8"}});2. jquery判断元素上是否绑定了事件1 2 3 4 5 //jQuery event封装支持判断元素上是否绑定了事件，此方法只适用于jQuery绑定的事件var $events = $("#id").data("events");if ($events && $events["click"]) {// your code}3. 被选中的option元素1$('#element').find('option:selected');4. 禁用右键单击上下文菜单1 2 3 $(document).bind("contextmenu",function(e){ return false;});5. 禁用文本选择功能1 2 3 $(document).bind("selectstart", function() { return false;});6. jquery隔行换色1 2 $(".div_row1:even").addClass("background_even"); // 匹配偶数行$(".div_row1:odd").addClass("background_odd"); // 匹配单数行7. 鼠标移入变色，移除还原背景色1 2 3 4 $(".div_row1").mouseover(function() {$(this).addClass("background_mouseover"); }).mouseout(function() {$(this).removeClass("background_mouseover");5 });8. jquery判断鼠标左键、右键1 2 3 4 5 6 7 $("#id").mousedown(function(e) {if (3 == e.which) {alert("右键单击事件");} else if (1 == e.which) {alert("左键单击事件");}});9.jquery动态添加元素到DOM中1 2 var newDiv = $('<div></div>');newDiv.attr('id', 'myNewDiv').appendTo('body');10.jquery元素居中（屏幕正中间）1 2 3 4 5 6 7 8 jQuery.fn.center = function () {return this.each(function(){$(this).css({position:'absolute',top, ( $(window).height() - this.height() ) / 2 + $(window).scrollTop() + 'px',left, ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft() + 'px' });});}// 这样来使用上面的函数： $(element).center();11. 把特定名称的所有元素的值都放到一个数组中1 2 3 4 var arr = new Array();$("input[name='xxx']").each(function(){ arr.push($(this).val());});12. jquery正则表达式除去HTML标签1 2 3 4 5 6 7 8 9 (function($) {$.fn.stripHtml = function() {var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi; this.each(function() {$(this).html( $(this).html().replace(regexp,'') ); });return $(this);}})(jQuery); // 用法： $('p').stripHtml();13.jquery获得鼠标光标位置x和y1 2 $(document).ready(function() { $(document).mousemove(function(e) {3 4 5$("#mouse").html("X point : " + e.pageX + " | Y " + e.pageY);});});14.jquery检查元素是否存在1 2 3 if ( $("#id").length > 0 ) {// it exists}15.js倒计时1 2 3 4 5 6 7 8 9 var count = 5;countdown = setInterval(function() {$("#mouse").html(count + " 秒后将跳转到百度首页！");if (count == 0) {clearInterval(countdown);window.location = '';}count--;}, 1000);16.jquery回到顶部1 2 3 4 5 6 7 8 9 jQuery.fn.autoscrolltoTop = function() {$('html,body').animate({scrollTop: this.offset().top},500);};// 执行如下代码开始滚动$('#footer').autoscrolltoTop();当然除了这些，还有更多常用的jquery代码等着大家去发掘。
Jqgrid入门-使用模态对话框编辑表格数据（三）
u 010869338的专栏J qgrid入门-使用模态对话框编辑表格数据(三)2013-07-01 11:00 203人阅读 评论(0) 收藏 举报 Jqgrid是一个强大的表格插件，它提供了多种方式来编辑数据。
这三种方式分别是： Cell Editing——只允许修改某一个单元格内容Inline Editing——允许在jqGrid中直接修改某一行的数据Form Editing——弹出一个新的编辑窗口进行编辑和新增在我做的DEMO中，主要运用的是第三种， 弹出一个新窗口来编辑数据。
如果想用其它两种方式可以参考官网。
相比较之前的例子，这个例子最重要的变化是添加了一个id为consoleDlg的<div>块。
在jquery的ready方法里面我将初始化div生成为一个模态对话框，用作编辑数据的界面。
这个用到了jquery ui的dialog。
关于如何使用dialog，参考这篇文章就ok了。
这是主要的js代码。
1 2 3 45 6 7 8 9 // 配置模态对话框$("#consoleDlg").dialog({ autoOpen : false, // 是否自动弹出窗口 modal : true, // 设置为模态对话框resizable : true,width : 500,height : 300,position : "center" // 窗口显示的位置});那么我们通过什么方式来打开这个窗口呢？ 细心的朋友们可以发现我在前面的文章一的截图中，表格的最前面新增了一列操作栏。
这个操作栏主要是通过Jqgrid的gridComplete方法来实现的。
当表格所有数据都加载完成而且其他的处理也都完成时触发此事件。
1 2 3 4 56 7 8 9 10 11 12 1314 15 16 gridComplete : function() {var ids = jQuery("#gridTable").jqGrid('getDataIDs'); for ( var i = 0; i < ids.length; i++) { var cl = ids[i]; update = "<input type='button' value='修改' onclick='updateStu("+ cl + ")'/> ";del = "<input type='button' value='删除' onclick='deleteStu("+ cl + ")'/> ";view = "<input type='button' value='查看' onclick='viewStu(" + cl + ")'/>"; jQuery("#gridTable").jqGrid('setRowData', ids[i], {process : update + del + view});}},从这段代码我们可以看出，我们使用这个方法先获得表格所有列的id，然后在每一列中追加了三个按钮。
jQueryGrid入门指南（2）
jQueryGrid⼊门指南（2）上周以为已经把jqgrid 表格这部分已经搞得差不多了，没想到在实际⽤的时候，出现了不少问题，重新把这块知识整理⼀下。
问题⼀：设置表格的⾃动刷新问题的原因： 使⽤表格⾃带的增删改查的功能，编辑完数据后表中数据会刷新。
但是⼿写⽅法修改数据，例如模态框，修改完成后并不会在表中进⾏数据的刷新。
解决的办法： 在请求发送之后，模态框关闭之前使⽤jqgrid的reloadGrid。
$("#jqGrid").trigger("reloadGrid");问题⼆：表中⽇期的显⽰格式问题的原因： 当数据库中的字段是date类型时，直接将数据加载到表格中，显⽰得是⼀串数字，为时间的毫秒值。
解决的办法： 给字段后追加时间转换的⽅法{ label: '⽇期', name: 'birthday' ,align: 'center',editable: true, formatter:dateConvert }, 编写dateConvert⽅法function dateConvert(cellvalue){var times= new Date(cellvalue) ;date = times.toLocaleString();return date;}问题三：设置表中每⾏交替显⽰样式不同问题的原因： 在设置表格的属性altRows:true 后，表格的样式并没有发⽣改变解决的办法： 在添加altRows:true属性之后，还需要设置altclass来规定需要交替显⽰得样式altRows: true, //设置⾏交替样式altclass: 'differ', //⼿动写的交替的样式.differ{background-color: #DDDDDC;}问题四：表格完成响应式问题的原因： 这个问题本来已经在上⼀篇博客中得到了解决，可是⼜发现了⼀个新的问题，就是当表格的列数⽐较多时，表格中不会出现滚动条，⼿动调整窗⼝⼤⼩时才会出现。
Jquery Jqgrid使用手册
一、jqGrid学习jqGrid学习之------------- 安装jqGrid安装很简单，只需把相应的css、js文件加入到页面中即可。
按照官网文档：*/myproject/css/oui.jqgrid.csso/ui-lightness/+/images/+jquery-ui-1.7.2.custom.css*/myproject/js/o/i18n/+grid.locale-bg.js+list of all language files+….oChanges.txtojquery-1.3.2.min.jsojquery.jqGrid.min.js目录结构如上。
在页面中写法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>My First Grid</title><link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.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" /><style>html, body {margin: 0;padding: 0;font-size: 75%;}</style><script src="js/jquery-1.3.2.min.js" type="text/javascript"></script><script src="js/src/grid.loader.js" type="text/javascript"></script></head><body>...</body></html>需要说明的是，jquery-ui的字体大小与jqgrid字体大小不一致，故需要在页面上在加上一段style来指定页面上文字大小。
jqgrid知识点
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
// datatype:"json", //数据来源，本地数据
// mtype:"POST",//提交方式
// height:420,//高度，表格高度。可为数值、百分比或'auto'
// //width:1000,//这个宽度不能为百分比
// autowidth:true,//自动宽
});
});
</script>
</html>
],
gridview: true,
pager: '#pager',
rowlist: [3, 6, 9],
sortname: 'id',
selectable:true,
viewrecords: true,
sortorder: "asc",
<html>
<head>
<link href="./Content/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" />
JQuery插件jqGrid常用属性说明
希望这个帮助文档能对jQuery插件的学习有所帮助jqGrid包说明:jquery.js is the jQuery library,jquery.jqGrid.js 主单元，包含的功能取决您的选择grid.basic.js主插件其他插件包依赖于该插件正常运行grid.custom.js Grid高级插件功能包grid.formedit.js用于表格编辑、增加、删除功能grid.inlinedit.js 线条编辑grid.subgrid.js 一个处理表格的插件grid.postext.js 一个可以用来操作post数据的包jqModal.js 模态对话框的编辑jqDnR.js 可拖拉的表格编辑themes 包含gird需要的样式表一、功能描述：jqGrid包主要用于将需要展示的数据动态的展示在页面的上，即动态画出表格，并封装了增、删、改、查、分类显示、在线编辑修改等功能。
二、关键使用说明：1、导入jqGrid包，在首页属性里面添加如下包的信息<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\"href=\"/SedSoft/jqGrid/themes/basic/grid.css\"><link rel=\"stylesheet\" type=\"text/css\" media=\"screen\"href=\"/SedSoft/jqGrid/themes/jqModal.css\"><script type=\"text/javascript\" src=\"/sedsoft/jqGrid/jquery.js\" > </script><script type=\"text/javascript\" src=\"/sedsoft/jqGrid/jquery.jqGrid.js\" ></script><script type=\"text/javascript\" src=\"/sedsoft/jqGrid/js/jqModal.js\" ></script><script type=\"text/javascript\" src=\"/sedsoft/jqGrid/js/jqDnR.js\" > </script>注：由于加载js包会耗费大量资源，建议动态加载这些js包，优化页面初始化效率。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jqGrid学习jqGrid学习之 ------------- 安装jqGrid安装很简单，只需把相应的css、js文件加入到页面中即可。
按照官网文档：*/myproject/css/oui.jqgrid.csso/ui-lightness/+/images/+jquery-ui-1.7.2.custom.css*/myproject/js/o/i18n/+grid.locale-bg.js+list of all language files+….oChanges.txtojquery-1.3.2.min.jsojquery.jqGrid.min.js目录结构如上。
在页面中写法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" xml:lang="en" lang="en"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First Grid</title><link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.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" /><style>html, body {margin: 0;padding: 0;font-size: 75%;}</style><script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/src/grid.loader.js" type="text/javascript"></script></head><body>...</body></html>jqGrid学习之 --------- 皮肤jqGrid皮肤从3.5版本开始，jqGrid完全支持jquery UI的theme。
我们可以从/themeroller/下载我们所需要的theme。
当然，你也可以编辑自己的theme。
jqGrid也并不需要把所有的css文件都引入进来，只需导入核心css文件“ui.theme.css ” 以及“ui.core.css”即可，文件位于目录development-bundle/themes下。
jqGrid学习 ----------------- 第一个实例 | jqGrid学习之 --------- 皮肤2009-12-03jqGrid学习 ----------- 原理jqGrid是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显示。
换句话说，jqGrid可以以一种更加简单的方式来展现你数据库的信息，而且也可以把客户端数据传回给服务器端。
对于jqGrid我们所关心的就是：必须有一段代码把一些页面信息保存到数据库中，而且也能够把响应信息返回给客户端。
jqGrid是用ajax来实现对请求与响应的处理。
jqGrid学习 ----------------- 第一个实例1、html文件<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" xml:lang="en" lang="en"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First Grid</title><link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /><link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /><style>html, body {margin: 0;padding: 0;font-size: 75%;}</style><script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script><script src="js/jquery.jqGrid.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){jQuery("#jsonmap").jqGrid({url:WEB_PATH+'/example/JqGridExample.action',//url:WEB_PATH+'/excludes/post.jsp',datatype: 'json',colNames:['编号','姓名','密码','年龄','地址','出生日期'],colModel:[{name:'id',index:'id', width:90,sorttype:"int"},{name:'username',index:'name', width:110,sorttype:"int"}, {name:'password',index:'password', width:80},{name:'age',index:'age', width:80},{name:'address',index:'address', width:80},{name:'time',index:'time', width:80,sorttype:"date"}],imgpath:WEB_PATH+'/resources/javascript/plugins/jqgrid/css/smoothness/images',rowNum:10,rowList:[10,20,30],pager: "pjmap",multiselect: false,sortname: 'id',viewrecords: true,sortorder: "desc",jsonReader: {root: "dataRows",repeatitems : false},caption: "jqGrid test",height: 220}).navGrid('pjmap',{view:true,edit:true,add:false,del:false},{closeOnEscape:true});});</script></head><body><table id="jsonmap" ></table><div id="pjmap" ></div></body></html>jqGrid需要我们事先指定一个table对象，且有一个唯一的id属性。
其他表格属性比如Cellspacing、cellpadding跟border 不要自己设置，jqGrid会设置。
因为我们要分页，所以要定义一个分页的div对象，同样必须有id属性。