jgGrid 自定义头部和Checkbox列外观

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列的定义和内容区域里的Checkbox自定义：

需要首先看清jgGrid渲染成表格头部的html结果：

首先把本身头部的Checkbox 透明度设置0 ，让它不可见，然后在的兄弟节点使用:before :after伪元素分别在的前后定义一块内容，: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;
}