[jQuery] 把jqGrid修改为响应式表格

最新推荐文章于 2022-06-21 08:23:05 发布

wwwdaan5com

最新推荐文章于 2022-06-21 08:23:05 发布

阅读量2.8k

点赞数

jqGrid 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

响应式

1 篇文章 0 订阅

订阅专栏

jQuery

0 篇文章 0 订阅

订阅专栏

本文介绍了如何使jqGrid支持响应式设计，解决jqGrid在浏览器窗口大小变化时保持固定宽度导致的布局问题。通过取消autowidth属性并应用特定方法，可以实现jqGrid的响应式效果。

摘要由CSDN通过智能技术生成

set jqgrid with responsive

前言

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>

翻译自：高级打字员的技术云

wwwdaan5com

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[jQuery] 把jqGrid修改为响应式表格

set jqgrid with responsive前言jqGrid是一款前端jQuery表格，用过后觉得太强大啦~~~支援排序、分页，可以让用户自己调整栏宽，也可以自己产生全选/复选Checkbox更重要的是新增、修改、删除画面都自己产生好修改画面一叫出来也自动资料系结完毕，让工程师专心开发后端Web API，省去套画面很多时间再更进阶一点，还有subgrid、grouping….等等，用过后，我
复制链接

扫一扫

专栏目录