jQuery jqgrid
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的更多相关文章
- jQuery jqGrid中ColModel的参数大全
ColModel 是jqGrid里最重要的一个属性,设置表格列的属性. 用法: java 代码: jQuery("#gridid").jqGrid({ ... colMo ...
- jQuery jqgrid 应用实例
1.html <div class="ibox-content"> <div class=\"jqGrid_wrapper\"> < ...
- jQuery jqGrid 4.7
https://jeesite.gitee.io/front/jqGrid/4.7/index.html https://jeesite.gitee.io/front/jqGrid/4.7/jqgri ...
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
- jQuery插件:jqGrid引入及基本属性
1. jqGrid下载 jqGrid下载地址: http://www.trirand.com/blog/ jqGrid Demo: http://www.guriddo.net/demo/guridd ...
- jQuery插件:jqGrid使用(一)
1. Loading Data Load from JavaScript Array BundleConfig.cs using System.Web; using System.Web.Optimi ...
- Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 全部代码
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- 【Jquery系列】JqGrid参数详解
1 概述 本篇文章主要与大家分享JqGrid插件参数问题. 2 参数详解 2.1 初始化参数 2.2 ColModel参数 3 json数据 jqGrid可支持的数据类型:xml.jso ...
随机推荐
- javascript单词
abstract n. 摘要,抽象的东西 adj. 抽象的,理论的 vt. 移除,摘要,偷 vi. 做摘要 do aux. 助动词(无词意) v. 干,做 if conj. 如果,是否,即使 n. 条 ...
- PTA 汉诺塔的非递归实现(C 语言)
借助堆栈以非递归(循环)方式求解汉诺塔的问题(n, a, b, c), 即将N个盘子从起始柱(标记为“a”)通过借助柱(标记为“b”)移动到目标柱(标记为“c”), 并保证每个移动符合汉诺塔问题的要求 ...
- 【巨杉数据库SequoiaDB】巨杉Tech | 分布式数据库千亿级超大表优化实践
01 引言 随着用户的增长.业务的发展,大型企业用户的业务系统的数据量越来越大,超大数据表的性能问题成为阻碍业务功能实现的一大障碍.其中,流水表作为最常见的一类超大表,是企业级用户经常碰到的性能瓶颈. ...
- Centos7 虚拟机安装增强功能
1 yum update kernel -y yum install kernel-headers kernel-devel gcc make -y init 6 2 菜单栏--设备--安装增强工具 ...
- grid 布局(2)
目录 grid 布局(2) grid区域属性 网格线名称 grid-template-areas 属性 grid-auto-flow 容器内子元素的属性 grid 布局(2) grid区域属性 网格线 ...
- Java第二节课总结
Java的基本运行单位是类.类由数据成员和函数成员组成.变量的类型之间可以相互转换.String是一个类.static代表静态变量. 运行结果: false false ...
- BLE直接Data channel抓包方法汇总
之前一致在做一些有关与BLE安全研究的“基础设施建设”工作,我们知道,在BLE进入跳频之后,所有的固定标志都会消失,但是是不是意味着没办法了?不是的.我会提出一些恢复出来的方法. 首先,前导码分析,B ...
- Java设计模式(工厂模式)
一.简单工厂模式 简单工厂模式就是把对类的创建初始化全都交给一个工厂来执行,而用户不需要去关心创建的过程是什么样的,只用告诉工厂我想要什么就行了.而这种方法的缺点也很明显,违背了设计模式的开闭原则,因 ...
- 微信小程序 --- 日历效果
wxml部分: <view class='box1' style='width: {{ sysW * 7 }}px'> <view class='dateBox'>{{ yea ...
- webpack, autoprefixer
可以通过postcss-loader 添加 const autoprefixer = require('autoprefixer'); ... { loader: 'postcss-loader', ...