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. javascript单词

    abstract n. 摘要,抽象的东西 adj. 抽象的,理论的 vt. 移除,摘要,偷 vi. 做摘要 do aux. 助动词(无词意) v. 干,做 if conj. 如果,是否,即使 n. 条 ...

  2. PTA 汉诺塔的非递归实现(C 语言)

    借助堆栈以非递归(循环)方式求解汉诺塔的问题(n, a, b, c), 即将N个盘子从起始柱(标记为“a”)通过借助柱(标记为“b”)移动到目标柱(标记为“c”), 并保证每个移动符合汉诺塔问题的要求 ...

  3. 【巨杉数据库SequoiaDB】巨杉Tech | 分布式数据库千亿级超大表优化实践

    01 引言 随着用户的增长.业务的发展,大型企业用户的业务系统的数据量越来越大,超大数据表的性能问题成为阻碍业务功能实现的一大障碍.其中,流水表作为最常见的一类超大表,是企业级用户经常碰到的性能瓶颈. ...

  4. Centos7 虚拟机安装增强功能

    1 yum update kernel -y yum install kernel-headers  kernel-devel gcc make -y init 6 2 菜单栏--设备--安装增强工具 ...

  5. grid 布局(2)

    目录 grid 布局(2) grid区域属性 网格线名称 grid-template-areas 属性 grid-auto-flow 容器内子元素的属性 grid 布局(2) grid区域属性 网格线 ...

  6. Java第二节课总结

    Java的基本运行单位是类.类由数据成员和函数成员组成.变量的类型之间可以相互转换.String是一个类.static代表静态变量. 运行结果: false                false  ...

  7. BLE直接Data channel抓包方法汇总

    之前一致在做一些有关与BLE安全研究的“基础设施建设”工作,我们知道,在BLE进入跳频之后,所有的固定标志都会消失,但是是不是意味着没办法了?不是的.我会提出一些恢复出来的方法. 首先,前导码分析,B ...

  8. Java设计模式(工厂模式)

    一.简单工厂模式 简单工厂模式就是把对类的创建初始化全都交给一个工厂来执行,而用户不需要去关心创建的过程是什么样的,只用告诉工厂我想要什么就行了.而这种方法的缺点也很明显,违背了设计模式的开闭原则,因 ...

  9. 微信小程序 --- 日历效果

    wxml部分: <view class='box1' style='width: {{ sysW * 7 }}px'> <view class='dateBox'>{{ yea ...

  10. webpack, autoprefixer

    可以通过postcss-loader 添加 const autoprefixer = require('autoprefixer'); ... { loader: 'postcss-loader', ...