JqGridView 1.0.0.0发布

前几个月，客户要求显示列表做到列锁定+表头锁定+列组合,但从Extjs到Jquery EasyUi，从Jquery Grid到Telerik等等组件，发现无一符合条件，要么只能用列锁定，要么只能用列组合，当两者结合就不行了。于是只好开始自己琢磨了，然后就有了jqGridView。

在开始之前，总得理下思路。我CSS不行，JS一般，但是我有思路，先看看下面两个图：

z

从上图中可以看出，毫无疑问的，我们需要将一个列表切成4块——锁定列表头、锁定列数据行、非锁定列表头、非锁定列数据行。如图：

?

其中，锁定列表头、锁定列数据列、非锁定列表头均无滚动条，滚动条全在非锁定列数据列，但拖动右侧滚动条，需要联动锁定列数据行，但拖动底部滚动条，需联动非锁定列表头。

在我认为，磨刀不误砍柴工。好的想法、好的设计才能更大可能性的走向成功。

接下来，是细节的实现了：

选择什么编程语言呢？好像还没写过Jquery插件，那么就用这个来练练手吧。我对开发新东西或者实现自己的想法或者有兴趣却不熟悉的编码特别来劲。

选择什么方式呢？开始，毫无意外的想到使用Table来组合，于是坑次坑次的开始了。当编码完成后，发现一个棘手的问题——模块之间无法对齐。即使设置了每个单元格宽度以及表格宽度也不行，请了美工辅助也不行，于是放弃了。有意向的朋友可以试试。table不行，那就试试Div吧，人总不能在一条路上走死吧。于是又坑次坑次的开始了，终于修改N次后完成了。

首先举几个例子来说明如何使用：

简单单行表头

    <script type="text/javascript">
        $(function() {
            $.jqGridView(‘<%=gvData.ClientID %>‘, {
                lockColumns: 3,
                isRemoveGridView: true,
                rowStyle: ‘gv-tr-rowStyle‘,
                alternatingRowStyle: ‘gv-tr-alternatingRowStyle‘,
                hoverRowStyle: ‘gv-tr-hoverRowStyle‘
            });
        });
    </script>

合并列

    <script type="text/javascript">
        $(function () {
            $.jqGridView(‘<%=gvData.ClientID %>‘, {
                lockColumns: 3,
                isRemoveGridView: true,
                rowStyle: ‘gv-tr-rowStyle‘,
                alternatingRowStyle: ‘gv-tr-alternatingRowStyle‘,
                hoverRowStyle: ‘gv-tr-hoverRowStyle‘,
                leftGroupCols: ‘<tr><th rowspan="2" colspan="3">单位</th></tr>‘,
                rightGroupCols: ‘<tr><th scope="col" colspan="3" style="text-align:center">待定</th><th scope="col" colspan="3" style="text-align:center">1级</th><th scope="col" colspan="3" style="text-align:center">2级</th><th scope="col" colspan="3" style="text-align:center">3级</th><th scope="col" colspan="3" style="text-align:center">4级</th><th scope="col" colspan="3" style="text-align:center">5级</th><th scope="col" colspan="3" style="text-align:center">6级</th><th scope="col" colspan="3" style="text-align:center">7级</th><th scope="col" colspan="3" style="text-align:center">8级</th><th scope="col" colspan="3" style="text-align:center">9级</th><th scope="col" colspan="3" style="text-align:center">10级</th><th scope="col" colspan="3" style="text-align:center">11级</th><th scope="col" colspan="3" style="text-align:center">12级</th><th scope="col" colspan="3" style="text-align:center">13级</th><th scope="col" colspan="3" style="text-align:center">14级</th><th scope="col" colspan="3" style="text-align:center">15级</th><th scope="col" colspan="2" style="text-align:center">16级</th></tr>‘
            });
        });
    </script>

行点击事件

    <script type="text/javascript">
        $(function () {
            $.jqGridView(‘<%=gvData.ClientID %>‘, {
                lockColumns: 3,
                isRemoveGridView: true,
                rowStyle: ‘gv-tr-rowStyle‘,
                alternatingRowStyle: ‘gv-tr-alternatingRowStyle‘,
                hoverRowStyle: ‘gv-tr-hoverRowStyle‘,
                leftGroupCols: ‘<tr><th rowspan="2" colspan="3">单位</th></tr>‘,
                rightGroupCols: ‘<tr><th scope="col" colspan="3" style="text-align:center">待定</th><th scope="col" colspan="3" style="text-align:center">1级</th><th scope="col" colspan="3" style="text-align:center">2级</th><th scope="col" colspan="3" style="text-align:center">3级</th><th scope="col" colspan="3" style="text-align:center">4级</th><th scope="col" colspan="3" style="text-align:center">5级</th><th scope="col" colspan="3" style="text-align:center">6级</th><th scope="col" colspan="3" style="text-align:center">7级</th><th scope="col" colspan="3" style="text-align:center">8级</th><th scope="col" colspan="3" style="text-align:center">9级</th><th scope="col" colspan="3" style="text-align:center">10级</th><th scope="col" colspan="3" style="text-align:center">11级</th><th scope="col" colspan="3" style="text-align:center">12级</th><th scope="col" colspan="3" style="text-align:center">13级</th><th scope="col" colspan="3" style="text-align:center">14级</th><th scope="col" colspan="3" style="text-align:center">15级</th><th scope="col" colspan="2" style="text-align:center">16级</th></tr>‘,
                rowClick: function (e) {
                    var tds = e.data.tds;
                    var rowIndex = e.data.rIndex;
                    var isLeft = e.data.isLeft;
                    alert("列1行" + rowIndex + "的值为：" + tds.eq(0).text() + "，您点击的是" + (isLeft ? "锁定列" : "非锁定列"));
                }
            });
        });
    </script>

?

?

既然决定使用div，那么样式少不了。我倾向于外观方面的控制全放在样式里面，于是定义了以下样式：

jqGridView样式/*jqGridView Style */
.gv-dataContent
{
	width: 750px;
	height: 320px;
	margin: 5px auto;
	text-align:left;
}

.gv-dataContent th, tr
{
	white-space: nowrap;
}
.gv-dataContent td, th
{
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	white-space: nowrap;
}
.gv-header-left
{
	width: auto;
	overflow: hidden;
	float: left;
	border-left: 1px solid #539ebb;
	border-collapse: collapse;
}
.gv-header-right
{
	overflow: hidden;
	border-collapse: collapse;
}
.gv-data-left
{
	width: auto;
	overflow: hidden;
	float: left;
	border-left: 1px solid #539ebb;
	border-bottom: 1px solid #539ebb;
	border-collapse: collapse;
}
.gv-data-right
{
	overflow: scroll;
	border-collapse: collapse;
}
.gv-div-table
{
	border-collapse: collapse;
	width: auto;
}
.gv-div-tr
{
	clear: both;
	height: 30px;
	overflow: hidden;
}
.gv-div-th, .gv-div-td
{
	height: 30px;
	float: left;
	border: 1px solid white;
	margin: 0px 0 0 -1px;
	text-align: center;
	vertical-align: middle;
	line-height: 30px;
	border-collapse: collapse;
	float: left;
	color: #3274a4;
}
.gv-div-th
{
	background-color: #86A9D2;
	font-weight: bold;
	border: 1px solid white;
}
.gv-tr-rowStyle
{
	background-color: #8ecbe3;
}
.gv-tr-alternatingRowStyle
{
	background-color: #d3ebf4;
}
.gv-tr-hoverRowStyle
{
	background-color: #6786d6;
	cursor:pointer;
}
/*GridView 样式*/
.HeaderStyle
{
	background-color:#86A9D2;
	font-weight:bold;
	height:26px;
	white-space: nowrap;
	text-align:center;
	border: 1px solid white;
	color: #3274a4;
}
.RowStyle
{
	background-color: #8ecbe3;
	height:26px;
	text-align:center;
	white-space: nowrap;
	border: 1px solid white;
	color: #3274a4;
}
.AlternatingRowStyle
{
	background-color: #d3ebf4;
	height:26px;
	white-space: nowrap;
	border: 1px solid white;
	color: #3274a4;
	text-align: center;
}
.datacontent
{	
	font-size:12px;
	font-family:微软雅黑;
	width:740px;
    border:1px solid #7C9BBF; 
    margin:0 auto;
	clear: both; 
	text-align: center; 	
	*text-align: center; 
	margin-left: 5px;
	padding:5px;
	width:760px;
	overflow:auto;
      
}

JqGridView 1.0.0.0发布

原文：https://blog.51cto.com/u_14180063/2812990