1.写div

<div class="ibox-content">
<div class="jqGrid_wrapper">
 <!– jqGrid数据列表 开始–>
  <table id="table_list_1"></table>
    <!– jqGrid数据列表 结束–>
    <!– jqGrid翻页导航栏 开始–>
  <div id="pager_list_1"></div>
    <!– jqGrid翻页导航栏 结束–>
</div>
</div>

2.引用js,css

bootstrap.min.css
ui.jqgrid.css

jquery.min.js
bootstrap.min.js
jquery.jqGrid.min.js

3.写js

$(function() {
$.jgrid.defaults.styleUI = "Bootstrap";
//指定表格使用样式风格,不可修改
$("#table_list_1").jqGrid({
url:’${pageContext.request.contextPath}/roleController/list’,//获取数据的地址,需修改
mtype : "POST",
contentType : "application/json",
datatype : "json",
page : 1,
autowidth: true, //如果为ture时,则当表格在首次被创建时会根据父元素比例重新调整表格宽度
shrinkToFit: true, //此属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。如果为false,则列宽度使用colModel指定的宽度
rownumbers: true, //如果为ture则会在表格左边新增一列,显示行顺序号,从1开始递增。此列名为’rn’.
rowNum: 10, //在grid上显示记录条数,这个参数是要被传递到后台
rowList: [10, 20, 30], //一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台
colNames: ["角色名称" , "角色代码"],//列显示名称,是一个数组对象,需修改
cellEdit : false, //启用或者禁用单元格编辑功能,可修改
colModel: [//常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序
        {name: "fRoleName",index: "fRoleName",sortable :false},
        {name: "fRoleCode",index: "fRoleCode",sortable :false},
pager: "#pager_list_1", //定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置,可修改
viewrecords: true, //是否要显示总记录数,可修改
caption: "角色管理", //表格名称,可修改
hidegrid: false, //启用或者禁用控制表格显示、隐藏的按钮,只有当caption 属性不为空时起效,可修改
multiselect: true, //定义是否可以多选,可修改
multiboxonly:true, //只有当multiselect = true.起作用,当multiboxonly 为ture时只有选择checkbox才会起作用,可修改
jsonReader: { //描述json 数据格式的数组,需
             root: ‘list’,
          page: "current", // json中代表当前页码的数据
          total: "pages", // json中代表页码总数的数据
          records: "total",// json中代表数据行总数的数据
          repeatitems: false, // 如果设为false,则jqGrid在解析json时,会根据name来搜索对应的数据元素(即可以json中元素可以不按顺序);而所使用的name是来自于colModel中的name设定。
          cell: "cell",
          id: "fRoleId",
          userdata: "userdata",
          },     
});
});

4. 获取jqgrid选中的数据行:

var id = $(‘#jqGridList‘).jqGrid(‘getGridParam‘, ‘selrow‘);
if (id)
return $(‘#jqGridList‘).jqGrid("getRowData", id);
else
return null;

5.获取jqgrid的所有选中的数据

var grid = $(‘#jqGridList‘);
var rowKey = grid.getGridParam("selrow"); if (rowKey) {
var selectedIDs = grid.getGridParam("selarrrow");
for (var i = 0; i < selectedIDs.length; i++) {
console.log(selectedIDs[i]);
}
}

jQuery jqgrid的更多相关文章

  1. jQuery jqGrid中ColModel的参数大全

    ColModel 是jqGrid里最重要的一个属性,设置表格列的属性. 用法: java 代码: jQuery("#gridid").jqGrid({  ...     colMo ...

  2. jQuery jqgrid 应用实例

    1.html <div class="ibox-content"> <div class=\"jqGrid_wrapper\"> < ...

  3. jQuery jqGrid 4.7

    https://jeesite.gitee.io/front/jqGrid/4.7/index.html https://jeesite.gitee.io/front/jqGrid/4.7/jqgri ...

  4. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  5. jQuery插件:jqGrid引入及基本属性

    1. jqGrid下载 jqGrid下载地址: http://www.trirand.com/blog/ jqGrid Demo: http://www.guriddo.net/demo/guridd ...

  6. jQuery插件:jqGrid使用(一)

    1. Loading Data Load from JavaScript Array BundleConfig.cs using System.Web; using System.Web.Optimi ...

  7. Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. Web jquery表格组件 JQGrid 的使用 - 全部代码

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. 【Jquery系列】JqGrid参数详解

    1   概述 本篇文章主要与大家分享JqGrid插件参数问题. 2   参数详解 2.1 初始化参数 2.2  ColModel参数 3   json数据 jqGrid可支持的数据类型:xml.jso ...

随机推荐

  1. alibaba工程师,如何解决乐观锁冲突问题?

    很多做过电商系统的人应该知道,我们在设计电商系统中关于商品库存扣减时,在大部分情况下(并发量不高时),商品库存都可以直接在关系型数据库中进行扣减,那么在限时抢购活动正式开始后,那些单价比平时更给力.更 ...

  2. 用Python20行代码实现人脸识别

    OpenCV 是最流行的计算机视觉库,原本用 C 和 C++ 开发,现在也支持 Python.注意:很多人学Python过程中会遇到各种烦恼问题,没有人帮答疑.为此小编建了个Python全栈免费答疑交 ...

  3. cisco 添加静态路由

    静态路由:由人,手动写出的路由条目就叫静态路由,永久有效,优先级最高,效率最高. 路由器是干啥的? 连接不同地址段的网络.屏蔽不同地址段的网络广播. 路由器有多个接口,至少得有2个吧,一边一个局域网. ...

  4. 吴裕雄--天生自然HADOOP操作实验学习笔记:hbase学生选课案例

    实验目的 复习hbase的shell操作和javaAPI操作 了解javaWeb项目的MVC设计 学会dao(数据库访问对象)和service层的代码编写规范 学会设计hbase表格 实验原理 前面我 ...

  5. 小白的java学习之路 “ 变量、数据类型和运算符”

    一.变量: 1.什么是变量? 变量是一个数据存储空间的表示 变量由:变量名  变量类型  变量的值 2.创造变量的两种方法: 1.声明-->赋值-->取值 //声明变量 int money ...

  6. Linux 进程调度笔记(一)

    主要讨论的是单核 CPU 的情况下,进行调度的一些算法和思路.讨论都是基于单核 CPU 的条件下进行. 在内存中,无论对于用户而言有多少个进程,但在 CPU 运行的时候,总是只有只执行一个进程.进程调 ...

  7. lasso-ridge

    线性回归 线性回归很简单,用线性函数拟合数据,用 mean square error (mse) 计算损失(cost),然后用梯度下降法找到一组使 mse 最小的权重. lasso 回归和岭回归(ri ...

  8. gulp常用插件之gulp-rev-collector使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-collector这是一款根据gulp-rev生成的manifest.json文件中的映射, 去替换文件名称, 也可以替换路径. ...

  9. win10系统中按顺序安装jdk、tomcat

    一.首先安装jdk1.8,重点在于配置环境 安装步骤见另一篇软件安装中的博客 配置环境 1.首先要打开系统环境变量配置的页面.具体操作是:桌面上找到“此电脑”,然后右键 “属性”. 然后打开高级系统配 ...

  10. 检测到 LoaderLock Message: 正试图在 OS 加载程序锁内执行托管代码。不要尝试在 DllMain 或映像初始化函数内运行托管代码,这样做会导致应用程序挂起。

    解决方法: 调试状态=>异常(Ctrl+Alt+E)=>Managed Debuggin Assistants=>LoaderLock 的选中状态去掉即可.