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']);
    }

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

1. 如果是全隐、全显，可以达成效果，但是如果是隐藏部分，显示部分，比如隐藏A,显示B,C，就会出现只看到B，C无法看见（具体测试可能和本地环境有关，这是我的异常）；
2. 如果是隐藏成功，整个页面的行宽会缩短，显示则边长，不美观（主要是不符合需求——定宽）。

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