必威体育Betway必威体育官网
当前位置:首页 > IT技术

JqGrid 表格插件 使用

时间:2019-10-14 08:42:19来源:IT技术作者:seo实验室小编阅读:59次「手机版」
 

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中文网站

相关阅读

分享到:

栏目导航

推荐阅读

热门阅读