自定义jqgrid的一些小技巧（一）

项目要改版，于是在网上找到了一款素材，表格为jqgrid，主题样式为ace风格；看起来简洁自然，不过第一次接触jqgrid，想弄明白还是花费了很大功夫。现在整理记录一下使用过程中根据需求自定义jqgrid的一些方法：

原型形如：

1.不想要每一行最左边的“铅笔”（编辑按钮）和“垃圾箱”（删除按钮）怎么办？

解决方法：就是将colNames和colModel里的第一项去掉，如下红框所示，除了去掉这两个按钮以外，你也可以不去掉，而是将这两个图标改成“编辑”和“删除”的中文，当然不能改js源码，你要在你当前页面覆盖它的属性，才不会影响其他页面，在浏览器控制台找到这两个图表元素的class属性，也会看到他在哪个文件里定义的，按图索骥，模仿他在自己页面里覆盖就好

2.在每一行有一个“+”符号，代表子表，会显示与每一行相关的子记录。一般用作父子表或关联表。但是我觉得那个加号不太好看，想换成文字，那就要打开浏览器控制台找他的元素属性，通过分析，那个“+”符号的class属性为.fa-plus，并且是在加载该元素时通过before来嵌入这个“+”符号图片，那我们在自己的页面里style标签中覆盖它：

<style>.fa-plus:before{content:"组员管理";font-size:3px;}    </style>

效果如下图：

3.有一个问题就是在实现了将图标改成文字以后，因为以前那一列特别窄，图标能显示正常，但是现在改成这么长的中文，那一列装不下会显示不全，那怎么改变列宽呢？

解决方法：因为“+”符号即子表列属于系统内置的列宽，不像后面数据填充进去的数据列可以用width属性设置，jqgrid没有提供设置系统列列宽的api，那么我们可以在浏览器控制台找到系统列对应的元素属性或class属性，然后用选择器在当前页面覆盖它的样式，将这个函数放到jqgrid的loadComplete事件中就可以：

// 调整子表列列宽
function setwidth() {
    $("table[role='grid']").each(function () {//jqgrid 创建的表格都有role属性为grid
       
        $('.' + $(this).attr("class") + ' tr:first th:nth-child(2)').css("width", "80"); //使表头的子表列宽度为80
        $('.' + $(this).attr("class") + ' tr:first td:nth-child(2)').css("width", "80"); // 使表体的子表列宽度为80
    });
}

那设置序号列或方框（多选框列）也同样道理：找准是第几个th和td，因为jqgrid是区分表体和表头的，两个都要设置

// 调整序号列或方框列列宽
function setwidth() {
    $("table[role='grid']").each(function () {//jqgrid 创建的表格都有role属性为grid
       
        $('.' + $(this).attr("class") + ' tr:first th:first').css("width", "80"); //使表头的序号列或方框列宽度为80
        $('.' + $(this).attr("class") + ' tr:first td:first').css("width", "80"); // 使表体的序号列或方框列宽度为80
    });
}

下一篇继续

自定义jqgrid的一些小技巧（一）

猜你喜欢