• jqGrid常用属性和方法介绍


      jqGrid API中文手册:http://blog.mn886.net/jqGrid/

    一、jqGrid属性:

    width:
    Grid的宽度,如果未设置,则宽度应为所有列宽的之和;如果设置了宽度,则每列的宽度将会根据shrinkToFit选项的设置,进行设置。

    height :

    Grid的高度,可以接受数字、%值、auto,默认值为150。
    shrinkToFit:
    此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值,则每列宽度会根据width成比例缩放;如果shrinkToFit为false且设置了width值,则每列的宽度不会成比例缩放,而是保持原有设置,而Grid将会有水平滚动条。  
    autowidth
    默认值为false。如果设为true,则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段;如果当父容器尺寸变化了,同时也需要变化Grid的尺寸的话,则需要在自己的代码中调用setGridWidth方法来完成。

      这些属性只能是保证第一次时的宽度,当浏览器大小变化如还想让表格宽度自适应,就需要用jqgrid的方法setGridWidth,它有两个参数:new_width、shr,当第二个参数不设置时会按照shrinkToFit的设置值或默认值,而第一个参数则要设置的新的宽度值,所以可用js实现对浏览器宽度变化的自适应:  

    $(function(){  
        $(window).resize(function(){  
            $("#analyDataTab").setGridWidth($(window).width()*0.99);
            $("#charDataTab").setGridWidth(document.body.clientWidth*0.99); 
        });  
    });

    注:这里的百分比可按自己需要来设定,也可直接是浏览器的宽度大小。

    rownumWidth控制序号栏的宽度

    rownumbers: true,//序号栏是否显示
    rownumWidth: 50,//序号栏宽度

     viewrecords: true,是否显示总记录数

     rowNum:是jqgrid分页时每页记录数,默认是20;如果设置rownum设置为10,不管后台返回记录数是多少,最多只显示10条。如果设置为-1,则显示后台返回的所有记录。

     二、jqGrid保持显示垂直滚动条

    在IE中记录比较少的时候,默认情况下不显示垂直滚动条,会出现标题行与数据行位置对不齐的情况,通过保持显示垂直滚动条可以解决这个问题。

    $( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });

    需要保持水平滚动条,则:

    $( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'scroll' });

    三、动态显示隐藏某一列

    $("#grid_id").setGridParam().showCol("colname").trigger("reloadGrid");
    $("#grid_id").setGridParam().hideCol("colname").trigger("reloadGrid");

     三、常用方法:

    $("#gridTable").jqGrid("getGridParam","selrow");//获取选中行的id
    $.currentIframe().$("#gridTable").jqGrid("getRowData","4028f65d5d1bb627015d1c297ecf0006");//根据选中的行的id获取选中行的数据
    //取消所有选中的行:
    $("jqgridtableid").trigger("reloadGrid");
    //设定选中行,可设定多行选中:
    $("jqgridtableid").jqGrid('setSelection',id1);
    //获得选中行的ID数组:
    var ids = $("jqgridtableid").jqGrid('getGridParam','selarrrow');
    //获得某单元格的数据:
    var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);
    //获得所有行的ID数组:
    var ids =  $("jqgridtableid").jqGrid('getDataIDs');

    下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id:

    var id=$(‘#gridTable’).jqGrid(‘getGridParam’,'selrow’);

    如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下:

    var ids=$(‘#gridTable’).jqGrid(‘getGridParam’,'selarrrow’);

    如果想获取选择的行的数据,只要传入rowId即可,如下:

    var rowData = $(“#gridTable”).jqGrid(‘getRowData’,rowId);

    而这个rowData是一个对象,如果要获取选择的行的这个对象的属性值,如name的值,需如下:

    var rowName=rowData.name;

    当然你这个对象得有name这个属性才行。

    四、标题栏的checkbox,全选全不选

    当在JqGrid表格属性中设置了 multiselect:true,这时会在每一行前面出现checkbox

    而在点击栏的checkbox时,表格全选或全部选,这时触发的事件是onSelectAll

       onSelectAll:function(rowids,statue){

                           //函数里做自己的处理
                    };
       rowids:表示表格的所有行Id,即设置了key=true的那一列的值,如果设置了多列的                     key=true,那么只选取第一个
       statue:true/false,如果全选则为true,全不选则为false

       全选的时候需要注意的是,rowids是个数组,当从id再获取行数据时需要循环遍历:

    onSelectAll:function (rowid,status) {
                if (status) {
                    for(var i=0,l=rowid.length;i<l;i++){
                        getCheckedId(rowid[i]);
                    }
                } else {
                    for(var i=0,l=rowid.length;i<l;i++){
                        unCheckedId(rowid);
                    }
                }
            },
    var rowsObj = {},
        rowsId = [];
    function getCheckedId(id) {
        rowsId.push(id);
        rowsObj[id] = $("#gridTable").getRowData(id);
    }
    
    function unCheckedId(id) {
        removeRowId(id,rowsId);
        rowsObj[id] = null;
    }

     五、前端分页:

    pager: "#gridPager",  
    rowNum:30,   
    rowList: [30,50,100],  
    loadonce:true,//关键所在  

     六、获取id数组

    $("#gridTable").jqGrid('getDataIDs');//获取所有行的id数组
    
    $("#gridTable").jqGrid('getGridParam','selarrrow');//获取所有选中行的id数组

    七、重新设置高度

      设置height和setGridHeight都是无效的。原因是因为css的height样式覆盖了设置的height样式。
      正确的应该是再次强制important(优先权):
    var newHeight = $(window).height() - $(".gridPanel").offset().top - 66;
    $(".ui-jqgrid .ui-jqgrid-bdiv").css("cssText","height: "+newHeight+"px!important;");
     
  • 相关阅读:
    ad域的那些事儿
    关于vs无法创建虚拟目录的问题
    关于Java链接c#的webapi的注意事项
    创建.net framework webapi出现“Web 服务器被配置为不列出此目录的内容。”错误
    vs2017专业版和企业版的密钥
    数据库‘master’中拒绝CREATE DATABASE权限
    vue局部路由守卫使用
    记一次关于vantUI 下拉列表list加载数据的问题
    vue中使用require动态拼接img路径
    记录一次关于el-tree中让内容与左边有距离的爬坑记录
  • 原文地址:https://www.cnblogs.com/goloving/p/7109829.html
Copyright © 2020-2023  润新知