JqGrid 表格插件 使用

这里主要记录一些关于Jg Grid 插件的使用经验：

对于Jquery 的Grid 插件，原本并没有接触过，是由于公司业务上要对原有项目根据现有需求做调整，然后开始看，基本的方法都可以在JqGrid Demo网站上查找到。

由于需要调整，所以从最开始看，从最开始模板初始化，到数据获取、数据修改主要使用以下代码:

Grid初始化

jQuery("#gridTable").jqGrid({
data : [],//这里设数据为空，后面使用时再加载
datatype : "local",
height : height || 321,
colNames : columnName,//列名数组
colModel : [
{name:'id',index:'id', hidden:true},
{name:'name',index:'name', width:200,sortable:false},
{name:'endDate',index:'endDate', width:70,sortable:false},
{name:'nodeLevel',index:'nodeLevel', width:100,sortable:false},
{name:'remark',index:'remark', width:80,sortable:false}
] ,//定义好的行模板,需要和传递过来的数据格式匹配
viewrecords : true,
rowNum : rowNum,//分页数据量
rowList : [rowNum, rowNum * 2, rowNum * 3],
pager : "#"+pageId,//分页栏的ID
altRows : true,
// toppager: true,
multiselect : true,//是否允许多选
multiboxonly:true,//复选框
loadComplete : function() {
//数据加载完后执行的方法
},

这里只是简单的一个初始化，使用了一些参数，还有很多，可以按照需要自行添加。

这里主要想说明一下：

1.如果项目里需要多次使用Grid框架，可以考虑自行写initGrid方法，去将原始初始化方法包含，提供一些自己需要的参数设置，这样后面使用的时候只需要进行少量配置，而不必每次写一堆重复配置。

2.我这里写的主要是一些参数配置，其实还有很多像loadcomplete方法，通过这些方法可以让我们完成自定义的一些功能，比如这里有两个：

function hideSelectAll() {
//删除搜索图标,这里gridTable 是初始化的时候用的表格id，gridPager是翻页栏的id
$("#jqgh_gridTable_cb").remove();
if( $("#gridPager_left")!=null )
$("#gridPager_left").empty();
}
function beforeSelectRow() {
//通过每次点击选择前清空已选，达到单选的效果
$("#grid-table").jqGrid('resetSelection');
return(true);
}

使用的话，可以在初始化时添加：

gridComplete: hideSelectAll,
beforeSelectRow: beforeSelectRow,

除了这些，主要想记录一下对于一个需求的处理：

两组不同的数据（含有不同数目、名称的列），需要显示在一个页面里，可以自由切换

第一次赶时间，我用了最笨的方法：使用两个grid，切换时，初始化不同的grid。

后来我从头来看，发现grid自带的方法：hideCol（）和showCol（）可以帮助我实现这个需求：

首先写一个包含两组数据所有列的columns,比如第一组含有的A，和第二组含有的B、C，加上共有的ID。

var column = [
{name:'id',text:'ID',index:'id', hidden:true, width:90,fixed:true},
{name:'A',text:'',index:'A', width:90,fixed:true},
{name:'B',text:'B',index:'B',width:1800, },
{name:'C',text:'C',index:'C',  width:900, fixed:true}
];

当然，这里提一下：grid加载数据时，如果数据不含有相应的列，比如第二组不含有B，那么就会设为空，而不会报错，所以这里可以这么用。

那么在加载数据完成后，我只需要对整个grid对象进行列的隐藏与显示就好,于是我写了两个方法，分别测试显示与隐藏。

function showA（）{
grid.jqGrid('hideCol',['B','C']);
grid.jqGrid('showCol','A');
}
function showBC（）{
grid.jqGrid('hideCol','A');
grid.jqGrid('showCol',['bdCode','bdName']);
}

虽然完成了列的隐藏，测试结果并不如意：

如果是全隐、全显，可以达成效果，但是如果是隐藏部分，显示部分，比如隐藏A,显示B,C，就会出现只看到B，C无法看见（具体测试可能和本地环境有关，这是我的异常）；

如果是隐藏成功，整个页面的行宽会缩短，显示则边长，不美观（主要是不符合需求——定宽）。

后来我百度别人做的方法，然后自己尝试，查看界面样式，发现代码执行是正确的，列确实完成了隐藏或显示，但是界面显示效果不正确。发现别人写的代码里有

reloadGrid

方法，我意识到可能是由于在显示隐藏列之后，整个grid的行宽已经变化了，再调用

showCOl

显示的宽度不对，就看不见了。所以我有调整了代码，整合为一，保留变化前的宽度，解决问题：

function columnShow(type){
var len=grid.getGridParam("width");
var arr = [[],['B','C'],['A']];
grid.jqGrid('hideCol',arr[type]);
grid.jqGrid('showCol',arr[3-type]);
grid.setGridWidth(len);
}

最效果达到预期，可以显示指定列，同时宽度保持不变。

后续如果学到更多会进行补充。

查找过程中学习了jqgrid动态改变列以及隐藏列之后保持表格长度不变

本文参考了JqGrid 的中文示例网站：

jqGrid Demos

JqGrid Demos中文网站