jqgrid “加载中” 文字修改

古城微笑少年丶 2021-11-05 04:44 464阅读 0赞

最近的项目用到的是jqgrid作为表格控件，有一个页面因为加载大量的数据，导致可能需要加载一秒到两秒的时间，页面就会展示一个"加载中..."，因为字相对于表格来说实在是太小了，所以想动手修改一下这个提示。原本大小大概就是这么大：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dJTkdaSU5HTElV_size_16_color_FFFFFF_t_70][]

首先引用jqgrid只需要一个jqgrid的js和css，查阅css发现jqgrid有一个默认的参数配置（对于中文jqgrid）

defaults : {
            recordtext: "{0} - {1}\u3000共 {2} 条", // 共字前是全角空格
            emptyrecords: "无数据显示",
            loadtext: "读取中...",
    		savetext: "Saving...",
            pgtext : " {0} 共 {1} 页",
    		pgfirst : "First Page",
    		pglast : "Last Page",
    		pgnext : "Next Page",
    		pgprev : "Previous Page",
    		pgrecs : "Records per Page",
    		showhide: "Toggle Expand Collapse Grid",
    		// mobile
    		pagerCaption : "Grid::Page Settings",
    		pageText : "Page:",
    		recordPage : "Records per Page",
    		nomorerecs : "No more records...",
    		scrollPullup: "Pull up to load more...",
    		scrollPulldown : "Pull down to refresh...",
    		scrollRefresh : "Release to refresh..."
        }

loadtext就是加载中展示的文字，那么有一个方案就是直接进行修改这个提示文字，比如加上<h1>标签或者是style进行加样式等等。缺陷在于会同时修改掉所有的引用jqgrid的页面，查阅js文件，发现调用loadtext的地方

![20190808120245885.jpg][]

也就是说如果只有某个页面需要修改样式在加载表格之前去修改掉defaults里面的loadtext即可。

$.jgrid.defaults.loadtext= '<h2>加载中...</h2>';

实现效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dJTkdaSU5HTElV_size_16_color_FFFFFF_t_70 1][]

##  ##

## 后记 ##

查阅源码、修改源码、理解原理都是一个优秀程序员的必经之路，虽然本文章只是简单的介绍了jqgrid的一个默认样式修改，但是多数的修改源码都可以套用这个思维模式一步步进行在源码查找实现并进行修改成自己想要的样子。开源万岁

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dJTkdaSU5HTElV_size_16_color_FFFFFF_t_70]: /images/20211104/e03cbfd32f6e4819926ccb7deed553c9.png
[20190808120245885.jpg]: /images/20211104/0a2baa40f0364d6aa1654938a0949502.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dJTkdaSU5HTElV_size_16_color_FFFFFF_t_70 1]: /images/20211104/6aed5072130e4c0ea6aa902f8df75980.png