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

来源：互联网发布：软件找不到怎么卸载编辑：程序博客网时间：2024/06/05 14:54

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>

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

阅读全文

0 0