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 ...
随机推荐
- 基于java开发jsp+ssm+mysql实现的在线考试系统 源码下载
实现的关于在线考试的功能有:用户前台:用户注册登录.查看考试信息.进行考试.查看考试成绩.查看历史考试记录.回顾已考试卷.修改密码.修改个人信息等,后台管理功能(脚手架功能不在这里列出),科目专业管理 ...
- 【spring boot】SpringBoot初学(8)– 简单整合redis
前言 到目前为止,把项目中需要用到的:properties读取.数据源配置.整合mybatis/JdbcTemplate.AOP.WebService.redis.filter.interceptor ...
- Linux中为什么执行自己的程序要在前面加./
前言 在Linux中,我们执行内置命令时,直接输入命令名称即可,如: $ mv a b #将a重命名为b 而在执行自己写好的程序时,却要带上./,例如: $ hello hello: comm ...
- 手动部署:在eclipse导入web项目并更新包到本地部署
一.eclipse导入java web项目 1.file-import-git-next-clone URL-填写git上面的URL,然后一直next,完成后等待即可 二.导入多个版本项目 1.fil ...
- ssrf漏洞利用(内网探测、打redis)
摘要:存在ssrf漏洞的站点主要利用四个协议,分别是http.file.gopher.dict协议. file协议拿来进行本地文件的读取,http协议拿来进行内网的ip扫描.端口探测,如果探测到637 ...
- P1339 热浪【最短路】
#include <bits/stdc++.h> #define dbg(x) cout << #x << "=" << x < ...
- easyui datagrid设置排序
sortable="true" order="desc" 或者 sortable:true,order:'desc'
- @Html.DropDownList 无法显示默认值问题
1.查看下拉框的id名,是否和ViewBag变量名相同,如果相同的话,更改下拉框的id名字,使之和ViewBag变量名相同即可例如:@Html.DropDownList("List1&quo ...
- vue-routerV3.1版本报错:message: "Navigating to current location ("/home") is not allowed",
出现这个错误的原因是,在路由跳转的时候两次push的path地址相同 解决方法两种: 1.切换版本回3.0版本 2.在你引了vue-router的js文件里加上如下代码即可 import VueRou ...
- Mysql注入汇总!!!!!!!!!
师傅tpl!!!!! https://xz.aliyun.com/t/7169[对MYSQL注入相关内容及部分Trick的归类小结] https://www.jianshu.com/p/f261125 ...