项目要改版,于是在网上找到了一款素材,表格为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
});
}
下一篇继续