<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jqgrid宽度高度自适应</title>
<link rel="stylesheet" type="text/css" media="screen" href="jquery/jquery-ui/css/redmond/jquery-ui-1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jquery/jqgrid/css/ui.jqgrid.css" />
<script src="jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="jquery/jqgrid/js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="jquery/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style>
<!--
.zebra-striped {
background: #efefff 50% 50% repeat-x;
}
-->
</style>
<script language='javascript'><!--
$(function() {
$("#gridTable").jqGrid({
url:'userData.action',
datatype: "json",
autowidth: false,
altRows: true,
altclass: "zebra-striped",
colNames:['登录名','姓名', '性别', '邮箱'],
colModel:[
{name:'loginName',index:'loginName', width:160, sorttype:"int"},
{name:'realName',index:'realName', width:190},
{name:'gender',index:'gender', width:190},
{name:'email',index:'email', width:290}
],
sortname:'userId',
sortorder:'asc',
viewrecords:true,
rowNum: 20,
rowList: [20, 30, 50, 100, 150],
jsonReader:{
repeatitems : false,
id: "userId",
total: "totalPageCount",
page: "pageNumber",
records: "totalRecordCount"
},
toolbar: [true, "top"],
pager:"#gridPager",
rownumbers: true,
//multiselect: true,
pagerpos: "left"
}).navGrid('#gridPager',{edit:false,add:false,del:false, refresh:false, search:false});
doResize();
});
var t=document.documentElement.clientWidth;
window.onresize = function(){
if(t != document.documentElement.clientWidth){
t = document.documentElement.clientWidth;
doResize();
}
}
function doResize() {
var ss = getPageSize();
$("#gridTable").jqGrid('setGridWidth', ss.WinW-10).jqGrid('setGridHeight', ss.WinH-100);
}
function getPageSize() {
//http://www.blabla.cn/js_kb/javascript_pagesize_windowsize_scrollbar.html
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};
}
//http://www.wsria.com/archives/1147有另一种算法
--></script>
</head>
<body style="margin: 5px 5px">
<table id="gridTable"></table>
<div id="gridPager"></div>
</body>
</html>
分享到：
相关推荐
本文将深入探讨“数据表格JqGrid自适应列宽度”这一主题，以帮助开发者更好地理解和实现这一功能。 首先，JqGrid允许用户根据屏幕尺寸或窗口大小自动调整列宽，以优化用户体验。这种自适应性是现代Web应用中必不可...
为了实现自适应窗口大小，你可以监听窗口的`resize`事件，然后调用jqGrid的`setGridWidth`方法来动态调整表格宽度： ```javascript $(window).on('resize.jqGrid', function () { var newWidth = $(this).width();...
**方法一：基于窗口宽度自适应** 这种方法主要用于使jqGrid的宽度随窗口宽度的变化而改变，确保表格始终充满整个视口。以下是一个示例代码： ```javascript $(function() { $(window).resize(function() { $("#...
jqgrid 采用冻结栏之后往往会出现冻结的栏的高度和非冻结栏高度的不一致，滚动滚动条的时候出现冻结栏的div小好几个px 的问题
要启用此功能，我们需要在初始化jqGrid时设置`shrinkToFit`为`false`，以防止表格自适应宽度导致冻结列消失。 至于拖动列，jqGrid通过`sortable`选项支持列的拖放排序。默认情况下，列是不可排序的，我们需要将`...
JqGrid还提供了其他高级功能，如行选择、列自适应、导出数据、树形结构展示等。通过配置`multiselect`、`autoresizeAllColumns`、`gridview`等参数，可以启用这些特性。 通过深入学习JqGrid中文API文档，开发者可以...
3. **列配置**：讲解如何定义表格列，包括列名、宽度、对齐方式、排序和搜索功能。 4. **操作功能**：如排序、分页、筛选、编辑和删除行的实现方法。 5. **自定义行为**：如何添加按钮、监听事件并实现自定义功能，...
9. **自定义功能**：jqGrid 的强大之处在于其高度可定制性，开发者可以通过编写插件或扩展其 API 来实现更复杂的功能需求。 通过理解和运用这些知识点，你可以利用 jqGrid4.6 完整包构建出功能强大的、交互友好的...
JqGrid是一款强大的JavaScript表格插件，用于在Web应用程序中展示和操作数据。它基于jQuery库，提供了丰富的功能，如数据排序、筛选、分页、编辑、添加、删除和保存等，极大地增强了网页中表格的交互性和数据管理...
jQgrid中文文档API jQgrid是一个功能强大且流行的JavaScript插件，用于创建交互式表格。它基于jQuery库，提供了许多强大的功能，例如排序、过滤、编辑、分页等，使得开发者可以快速创建复杂的表格应用程序。本文将...
《jQuery.jqGrid详解——打造高效数据管理界面》 jQuery.jqGrid是一款强大的JavaScript插件，主要用于构建数据密集型Web应用程序，特别是在展示和操作大量结构化数据时。它以其丰富的功能集、高度可定制性和易用性...
jqGrid 是一个基于 jQuery 的数据网格插件，用于在网页上展示和操作表格化的数据。在开始使用 jqGrid 之前，需要具备基本的 JavaScript 和 jQuery 知识，因为 jqGrid 是构建在 jQuery 库之上的。jQuery 提供了简便的...
总的来说，jqGrid5.5版本是一个功能全面且高度可定制的数据网格解决方案，适合开发复杂的Web应用程序，特别是在处理大量数据和需要复杂用户交互的场景中。学习jqGrid5.5不仅可以提高数据展示和管理的效率，还能提升...
jquery.jqGrid-4.8.2（jquery表格插件）.zip----------jqGrid4.8.2包，官网下载的，原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
根据提供的文件信息，我们可以提取出关于jqGrid的知识点，具体如下： 1. jqGrid基础概念 jqGrid是一个用于Web应用程序的JavaScript表格插件，它遵循典型的B/S（浏览器/服务器）架构。在这种架构中，服务器端负责...
- 自定义列：开发者可以自定义列的显示样式、宽度和对齐方式，甚至可以添加自定义的列模板。 - 国际化：支持多语言，方便不同地区的用户使用。 3. **jqGrid的使用步骤** - 引入依赖：在HTML文件中引入jQuery库和...
5. **列定义**：每列的显示和操作可以通过 `colModel` 配置项来定义，包括列名、宽度、对齐方式、可编辑性等。 6. **功能特性**：jqGrid 提供了许多内置功能，如排序（`sortable`）、分页（`pager`）、搜索（`...
jqGrid 是一个强大的 jQuery 插件，用于在网页上创建、操作和展示数据表格。它提供了丰富的功能，如数据分页、排序、过滤、编辑和更多。本资源为 jqGrid5.X 的官方全Demo下载，包含中文文档和离线演示，用户可以在...
jqGrid是一款功能强大的jQuery插件，专用于在Web页面上展示和操作表格数据。它以其高效、灵活和可定制性而受到开发者的广泛欢迎。在jqGrid 4.6和4.7这两个版本中，我们可以深入探讨一些核心知识点： 1. **数据网格...