匿名通过本文主要向大家介绍了jquery,响应式,jqgrid等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
前言
jqGrid是一款前端jQuery表格，用过后觉得太强大啦~~~
支援排序、分页，可以让用户自己调整栏宽，也可以自己产生全选/复选Checkbox
更重要的是新增、修改、删除画面都自己产生好
修改画面一叫出来也自动资料系结完毕，让工程师专心开发后端Web API，省去套画面很多时间
再更进阶一点，还有subgrid、grouping….等等，用过后，我之后任何后台系统的CRUD都改用jqGrid来呈现
除非新增、修改画面太复杂(例如：ckeditor网页编辑器、档案上传…等等)才另外做画面
但是，这么好用的套件有一个遗憾，就是预设不支援响应式网页
如果浏览器视窗被用户拉大缩小，jqGrid的宽度会仍旧维持不变，有时候还造成破版
好在网路上已经出现各种解法解决此问题，以下记录本人让jqGrid变得可支援响应式网页使用的Code
实作
第一步要先把jqGrid的autowidh:true此项拿掉，autowidth:true原本用意要让jqGrid的呈现为满版宽度，但不知道它详细计算逻辑如何
有时候呈现出来的宽度会破版，所以必须拿掉
第二步呼叫jqGrid方法，填入jqGrid所在的父容器宽度即可。
jqGrid('setGridWidth', jqGrid父容器的width);
以下是范例程式码
<html>
<head>
<!--引用jqGrid樣式表-->
<link rel="stylesheet" href="~/Content/css/ui.jqgrid.min.css" />
</head>
<body>
<div class="row">
<div class="col-xs-12">
<table id="grid-table"></table>
</div><!-- /.col -->
</div><!-- /.row -->
<!--引用jQuery函式庫-->
<script src="~/Content/js/jquery-2.1.4.min.js"></script>
<!--引用jqGrid.js-->
<script src="~/Content/js/jqGrid/jquery.jqGrid.min.js"></script>
<!--載入jqGrid中文語系-->
<script src="~/Content/js/jqGrid/grid.locale-tw.js"></script>
<script type="text/javascript">
$(function(){
const grid_selector = "#grid-table";
const pager_selector = grid_selector + "_toppager";
const $grid = jQuery(grid_selector);
//初始化jqGrid，我只挑幾個重點參數Demo
$grid.jqGrid({
datatype: "local",//小技巧，初始化jqGrid時，datatype設為local可以避免網頁一載入jqGrid就馬上對後端發出ajax request
toppager: true,
pager: pager_selector,
height: "auto",//個人習慣把height設為auto或100%，資料多少筆高度就多少，如果height設為固定高度的話
//資料一多，jqGrid會出現直的捲軸
//autowidth: true,//autowidth有時候會造成破版，廢code得拿掉
});
let parent_dom = $grid.closest('[class*="col-"]');
//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
//本範例先執行jqGrid初始化，所以可不用setTimeout，否則有時候setTimeout還是必須的
//setTimeout(function () {
//讓jqGrid寬度和容器一樣
$grid.jqGrid('setGridWidth', parent_dom.width());
//}, 20);//end setTimeout
//當使用者改變瀏覽器視窗大小時...
//resize to fit page size
$(window).on('resize.jqGrid', function () {
//重新抓父容器新的width
let parent_dom = $grid.closest('[class*="col-"]');
$grid.jqGrid('setGridWidth', parent_dom.width());
});
});
</script>
</body>
</html>
翻译自：高级打字员的技术云