当前位置: 首页 > ops >正文

jqGrid的常用属性和方法

JQgrid插件:
jquery grid是富客户端的,基于XML , Ajax网格插件的jQuery库。 jqGridView提供专业的解决方案,代表和编辑表格数据在网络上。精心设计的,具有强大的脚本API的,这可编辑网格是很简单的DHTML与XML 的配置,并显示出令人信服的成果与大量数据。现在我现在熟悉一下jquery grid的的使用方法和一些常用的option设置。
一、jqGrid特性:
  • 基于jquery UI主题,开发者可以根据客户要求更换不同的主题。
  • 兼容目前所有流行的web浏览器。
  • Ajax分页,可以控制每页显示的记录数。
  • 支持XML,JSON,数组形式的数据源。
  • 提供丰富的选项配置及方法事件接口。
  • 支持表格排序,支持拖动列、隐藏列。
  • 支持滚动加载数据
  • 支持实时编辑保存数据内容。
  • 支持子表格及树形表格
  • 支持多语言。
  • 最关键目前是免费的。

二、jqGrid的属性设置:

代码:
$(document).ready(function(){$(“#id_name”).jqGrid({//key:value,形式配置属性类似于Ajaxurl: "jqGrid01.action",//地址值,数据来源的地址值,可以是个xml文件也可以是Jsondatatype: "json" ,//  数据类型xml,json。mtype: "POST" ,//请求方式“POST”或者“GET“multiselect:true,    //多选按钮       multiselectWidth:20,    //多选列宽度     height:"auto",   //表格高度自动        autowidth:true,   //宽度自动 也可在colModel设置每列宽度        colNames:["Id","姓名","年龄","身高","爱好"],//列的表头      colModel:[   //每一列的具体属性            {name:"id",index:"id",align:"center",hidden:false},              {name:"name",index:"name",align:"center",hidden:false},         {name:"age",index:"age",align:"center",hidden:false},           {name:"sg",index:"sg",align:"center",hidden:false},          {name:"love",index:"love",align:"center",hidden:false}             ],        viewrecords:true,   //是否显示总记录数     rowNum:5,           //每页记录数       rowList:[5,10,15],   // 每页记录数可选项      pager:"#gridPager",   //分页设置       sortable:true,        //是否可排序    sortname:"id",        //排序列名,这个参数会被传到后台     sortorder:"asc",      //排序顺序asc升序desc降序altRows: true,         // 设置为交替行表格,默认为false      rownumber:true,       //序号列是否显示(不显示名称QWQ)     rownumWidth:50,       //序号列宽度viewrecords: true,    //是否在浏览器导航栏显示记录总数      gridview:true,            //构造一行数据后添加到grid中     loadComplete:function(){                  var  t=this;               setTimeout(function(){         updatePageIcons(t);            },0);            }   });
});


三、jqGrid的常用方法:

1.调用grid
jqGrid已经可以从Server端获得数据,并显示在Grid表格中了。下面说一下,如何操作Grid表格及其数据。jqGrid有很多方法函数, 用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式:
$("#grid_id").jqGridMethod(parameter1,.....,parameterN);
或者
$("#grid_id").jqGrid(function(){},paramter1,.....parameterN);

1. getGridParam
代码:
var id = $("#id_name").jqGrid("getGridParam","selrow");
代码表示:获取的是选中的行的id值,selrow是jqGrid选项之一,默认值是null。
2. getRowData
代码:
var selectedId = $("# id_name ").jqGrid("getGridParam", "selrow");  
var rowdate = $("#id_name").jqGrid("getRowData",selectId);
代码表示:获取某行的数据,返回的是一个name:value的数组
3. addRowData
这个方法用于向Grid中插入新的一行。执行成功返回true,否则返回false。它具有4个参数:
rowid :新行的id号;
data :新行的数据对象,形式为{name1:value1,name2: value2…},其中name为colModel中定义的列名称name;
position :插入的位置( first:表格顶端;last:表格底端;before:srcrowid之前;after:srcrowid之后 );
srcrowid :新行将插入到srcrowid指定行的前面或后面。
代码:
$("#id_name").jqGrid("addRowData",rowid,data,"before",selectId);
4. setRowData
这个方法用于 为某行数据设置数据值 。执行成功返回true,否则返回false。它具有3个参数:
rowid :更新数据的行id;
data :更新的数据对象,形式为{name1:value1,name2: value2…},其中name为colModel中定义的 列名称name ;这个数据对象,不必设置完全,需要更新哪列,就设置哪列的 name:value对
cssprop :如果cssprop为String类型,则会使用jQuery的addClass为行增加相应名称的 css类;如果为object类型,则会使用html的css属性,为行添加样式。如果只想增加css样式而不更新数据,可以将data参数设为false。
代码:
$("#id_name").jqGrid("setRowData",rowid,data,cssprop);
5. delRowData
代码:
$("#id_name").jqGrid("delRowData",rowid);
代码表示:删除某行数据
6. setGridParam
这个方法与getGridParam对应,用于设置jqGrid的options选项。
返回jqGrid对象。参数为{name1:value1,name2: value2…}形式的对象(name来自jqGrid的options选项名)。某些选项在设置之后需要trigger("reloadGrid"),才能显示出效果。
7. setGridWidth
为Grid动态地设定一个新的宽度。两个参数:
new_width :以px为单位的新宽度值;
shrink :作用与jqGrid的shrinkToFit选项相同;如果此参数未设置,则沿用jqGrid的shrinkToFit选项的值。
8. trigger("reloadGrid")
根据当前设置, 重新载入Grid表格 ,即意味着向 Server发送一个新的请求 。此方法只能用于已经构建好的Grid。此外,此方法 不会使对colModel所做出的改变生效 。应该使用gridUnload来重新载入对colModel的新设置。
9. 其他方法
除了以上介绍的的方法外,jqGrid还有其他有用的方法,例如:
addJSONData、clearGridData、hideCol、resetSelection、setCaption、setGridHeight、setLabel、showCol等
以及增强模块提供的方法,例如:
filterGrid、GridDestroy、GridUnload、setColProp等。
这些方法的具体用法,或浅显易懂,或不是非常常用。
参考官方文档(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods )
http://www.xdnf.cn/news/11337.html

相关文章:

  • Java报表工具 JasperReports iReport
  • Cool Edit Pro是什么?Cool Edit Pro怎么用?
  • linux container框架,深度解析Containers--系统架构
  • 中间件之搜索和数据分析组件Elasticsearch
  • Struts与Struts2的区别
  • c++getline 读取一行内容
  • 《入门级-Cocos2d 4.0塔防游戏开发》---实战
  • 阮一峰ES6精缩——Promise对象
  • 扫码登录操作过程
  • 19-1 burpsuite模块介绍之repeater
  • 再生龙linux 系统运行,使用Clonezilla(再生龙)克隆Linux系统
  • GNOME 与 KDE:到底选择哪个 Linux 桌面环境
  • Oracle的PDB和CDB
  • 使用NAGA分析雀魂牌谱
  • 消息中间件的概念
  • Adhesive框架系列文章--Mongodb数据服务模块实现(上)
  • javascript:void(0) 含义
  • 网络知识点之-详解robots协议
  • 【Oracle】CBO优化详解
  • 服务等级目标SLO概述
  • 恶意网站的攻与妨
  • Java在云原生的破局利器——AOT(JIT与AOT)
  • 【Java开发语言 00】环境搭建(配置java环境+‘javac’不是内部或外部命令,也不是可运行的程序+安装idea+idea基本用法+新建项目+在新项目的src路径下新建包和类+基础调试+路径)
  • UPX的使用
  • bootstrap4 左侧导航栏 优秀 大气_7个冷门行业导航网站,冷门行业小伙伴的终极关怀(值得收藏)...
  • 11111111111111
  • Linux解压命令大全
  • IOS Xcode下载教程(各版本)
  • 如何在csdn免费下载资料?
  • 20. 【Linux教程】emacs 编辑器