jgGrid 之前使用Ace Admin从未考虑过自定义外观。想当然觉得复用就可以了,可是换成adminLTE后默认的jgGrid外观十分的丑陋。于是想稍微改造下,研究了Ace Admin的头部和Checkbox列后,开始自己动手来实践,这里记录下实践的过程。希望对学习jgGrid有点帮助。
首先借鉴下Ace Admin jgGrid表格的头部:如下图所示:
她使用的是:background-image 样式,用一个从上到下的渐变色来填充:
.ui-jqgrid .ui-jqgrid-htable thead th {
padding-right: 2px;
overflow: hidden;
border-bottom: none;
background-image: linear-gradient(to bottom,#EFF3F8 0,#E3E7ED 100%);
background-repeat: repeat-x;
}
接着看了下Ace Admin的Demo Checkbox列,Checkbox比较小,外观难看也难得选中,于是乎再来一个自定义:
下面是自定义的效果:
原理也比较简单:分头部Checkbox列的定义和内容区域<td>里的Checkbox自定义:
需要首先看清jgGrid渲染成表格头部的html结果:
首先把本身头部的Checkbox 透明度设置0 ,让它不可见,然后在<input>的兄弟节点<lable>使用:before :after伪元素分别在<lable>的前后定义一块内容,:before 定义一个长和宽为17px,带边框和白色背景的小正方形;:after定义一个填充块,使用图标字体显示一个对勾;显示选中的效果。
内容区域的checkbox如法炮制:
看下上面这个小图,一图胜千言,可以看到原本的input 漏出了一小部分,小正方形则是通过:after强行加塞进入布局空间去的。这里使用了一个小技巧margin-left:-2px;把小正方形盖住了input漏出的一截。
下面是炮制后的css样式,仔细研究就可领会css伪元素使用的巧妙;
.ui-jqgrid .ckbox,.rdio {
position: relative;
display: block;
padding-right: 0px;
line-height: initial;
float: left;
}
.ui-jqgrid .ckbox input[type="checkbox"],.rdio input[type="radio"] {
opacity: 0;
margin: 2px 0;
}
.ui-jqgrid .ckbox label,.rdio label {
padding-left: 10px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ui-jqgrid .ckbox label:before {
width: 17px;
height: 17px;
position: absolute;
top: 0px;
left: 0;
content: '';
display: inline-block;
border: 1px solid #ccc;
background: #fff;
}
.ui-jqgrid .ckbox input[type="checkbox"]:disabled + label {
color: #999;
}
.ui-jqgrid .ckbox input[type="checkbox"]:disabled + label:before {
background-color: #eee;
}
.ui-jqgrid .ckbox input[type="checkbox"]:checked + label::after {
font-family: 'FontAwesome';
content: "\F00C";
position: absolute;
top: 4px;
left: 1px;
display: inline-block;
font-size: 11px;
width: 15px;
height: 15px;
color: #fff;
}
.ui-jqgrid .ckbox input[type="checkbox"]:checked + label:before {
border-color: #337ab7;
background-color: #337ab7;
}
.ui-jqgrid-btable tr td > input[type="checkbox"] {
margin: 0px 2px;
}
.ui-jqgrid-btable tr td > input[type="checkbox"]:after {
width: 17px;
height: 17px;
position: absolute;
top: 0px;
left: 2px;
margin-left: -2px;
content: '';
display: inline-block;
border: 1px solid #ccc;
background: #fff;
}
.ui-jqgrid-btable tr td > input[type="checkbox"]:checked::after {
width: 17px;
height: 17px;
font-family: 'FontAwesome';
content: "\F00C";
position: absolute;
top: 0px;
left: 2px;
display: inline-block;
font-size: 11px;
color: #fff;
text-align: center;
padding-top: 2px;
border-color: #337ab7;
background-color: #6e99e8;
}