jqGrid随窗口大小变化自适应大小的示例代码
第一种:
$(function(){
$(window).resize(function(){
$("#listId").setGridWidth($(window).width());
});
});
window.onresize = function _doResize() {
var ss = pageSize();
$("#listId").jqGrid('setGridWidth', ss.WinW-10).jqGrid('setGridHeight', ss.WinH-200);
}
function pageSize() {
var winW, winH;
if(window.innerHeight) {// all except IE
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {// IE 6 Strict Mode
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
} else if (document.body) { // other
winW = document.body.clientWidth;
winH = document.body.clientHeight;
} // for small pages with total size less then the viewport
return {WinW:winW, WinH:winH};
}
相关推荐
-
jqGrid用法汇总(全经典)
支持多种类型的数据集合作为数据源 jqGrid可以绑定三种类型的数据:XML,JSON和数组.使用不同的数据类型主要是设置datatype属性,它的值分别为'xml','json','local'(数组) $("#grid1").jqgrid( ........ datatype: "xml", ........ ); 下面则列举各种数据类型的格式 XML格式: <rows> <page></page> <total>
-
Bootstrap嵌入jqGrid,使你的table牛逼起来
Bootstrap原生的table组件只能满足简单的数据展示,满足不了更富有操作性的要求.当然了,你可以找到一款叫做"DataTables-1.10.11"的基于bootstrap的table组件,但如果你对API看得不甚了解的话,用起来可就痛苦了,但是如果你选择使用jqGrid,那么本篇教程就给你带来了解决这种富操作性table的解决方案. 一.效果展示 OK,就展示这一张图片,相信你已经爱上了bootstrap版的jqGrid,和bootstrap很兼容,简直完美,当然了,这需要我
-
jqGrid 学习笔记整理——进阶篇(一 )
在浏览导航栏添加所需按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DEMO</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> <link rel=&
-
获取jqGrid中选择的行的数据
下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$('#gridTable').jqGrid('getGridParam','selrow'); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下: var ids=$('#gridTable').jqGrid('getGridParam','selarrrow'); 如果想获取选择的行的数据,只要传入rowId即可,如下: var rowData = $("#gridTabl
-
通过点击jqgrid表格弹出需要的表格数据
首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的. 特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及删除资料等功能. 自定义的工具列 预设的Navigator工具列,可以很容易的使用新增.删除.编辑.检视及搜寻等功能. 完整的分页功能 按下任一栏位的标头,皆可以该栏位为排序项目.无论是升序或降序皆可. 预设的action formatter,可以快速而直觉地对每笔资料做运算. 支持多种数据格式.比如json.xm
-
jqgrid 编辑添加功能详细解析
ColModel 是jqGrid里最重要的一个属性,设置表格列的属性. 用法: Java代码 : 复制代码 代码如下: jQuery("#gridid").jqGrid({ ... colModel: [ {name:'name1', index:'index1'...}, {...}, ... ], .. }); 属性 数据类型 备注 默认值 align string 定义单元格对齐方式:可选值:left, center, right. left
-
Jqgrid之强大的表格插件应用
jqGrid是一款基于jQuery的功能强大的表格插件,使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信,jqGrid运行速度相当快,可以很好的应用在一些后台管理系统来管理大量数据的场合. jqGrid特性: 基于jquery UI主题,开发者可以根据客户要求更换不同的主题. 兼容目前所有流行的web浏览器. Ajax分页,可以控制每页显示的记录数. 支持XML,JSON,数组形式的数据源. 提供丰富的选项配置及方法事件接口. 支持表格排序,支持拖动列.隐藏列. 支持滚动加载数
-
Jqgrid表格随窗口大小改变而改变的简单实例
使用jquery插件,主要实现当窗口发生改变时jqgird表格也随着改变大小 html:<div id="liste"> <table id="list" class="scroll" cellpadding='0' cellspacing='0' ></table> <div id="pager" class="scroll" style="t
-
Jqgrid设置全选(选择)及获取选择行的值示例代码
1.添加multiselect: true 2.获取选择行的值 复制代码 代码如下: var rowData = jQuery('#List').jqGrid('getGridParam','selarrrow'); if(rowData.length) { for(var i=0;i<rowData.length;i++) { var name= jQuery('#List').jqGrid('getCell',rowData[i]
-
jqGrid读取选择的多行的某个属性代码
复制代码 代码如下: var selrow =articleTable.getGridParam('selarrrow');//获取多行的id var columnCodes=[];//初始化一个数组 $(selrow).each(function (index, yu) {//遍历每个id 找到每个data 并把属性加到初始化数组里 var rowData = articleTable.jqGrid("getRowData", yu); columnCodes.push(rowDat
-
ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项
一直想自己做个博客网站,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之后,发现即使你用了bootstrap还是要自己写css样式,都是自学的,前端真的很垃圾,在网上找了很多UI,以下是各种UI的地址,需要的可以去看看: H-ui:http://www.h-ui.net/H-ui.admin.shtml ,是一个前端大牛弄得,模仿bootstrap,做适合中国网上的UI. Ama
随机推荐
- 详解使用docker 1.12 搭建多主机docker swarm集群
- 用AJAX技术聚合RSS
- HTML 30分钟入门教程
- CentOS 6.4下安装Oracle 11gR2详细步骤(多图)
- php简单获取目录列表的方法
- php常用字符串处理函数实例分析
- php adodb连接不同数据库
- [图]Flash+ASP实现电子互动地图在线标注功能
- 体验Java 1.5中面向(AOP)编程
- MySQL中UPDATE语句使用的实例教程
- jquery实现聚光灯效果的方法
- javascript 流畅动画实现原理
- Andorid自定义attr的各种坑
- Linux 管理员手册(5)
- JavaScript中的splice方法用法详解
- PHP判断一个数组是另一个数组子集的方法详解
- Python2中文处理纪要的实现方法
- Python实现的圆形绘制(画圆)示例
- MyBatis SQL xml处理小于号与大于号正确的格式
- 利用Kotlin + Spring Boot实现后端开发