jqGrid使用

最新推荐文章于 2018-09-17 14:07:54 发布

wuwhai0303

最新推荐文章于 2018-09-17 14:07:54 发布

阅读量950

点赞数

CC 4.0 BY-SA版权

分类专栏： web技术文章标签： java Java JAVA jqgrid jqGrid jQgrid web Web WEB 分页

本文链接：https://blog.youkuaiyun.com/wuwhai0303/article/details/8536948

web技术专栏收录该内容

6 篇文章

订阅专栏

一、 jqGrid的加载。

1.引用相关头文件

引入CSS：

<linkhref="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet"type="text/css" />

<linkhref="Scripts/ui.jqgrid.css" rel="stylesheet"type="text/css" />

引入JS：

<scriptsrc="Scripts/jquery-1.5.1.js"type="text/javascript"></script>

<scriptsrc="Scripts/jquery-ui.min.js"type="text/javascript"></script>

<scriptsrc="Scripts/grid.locale-en.js"type="text/javascript"></script>

<scriptsrc="Scripts/jquery.jqGrid.min.js"type="text/javascript"></script>

因为jqGrid3.6及以后的版本集成了jQuery UI，所以，此处需要导入UI相关js和css。另外grid.locale-en.js这个语言文件必须在jquery.jqGrid.min.js之前加载，否则会出问题。

二、jqGrid实例

function grid(args_datetime){

//表格

$("#gridTable").jqGrid({

mtype:"post",//向后台传送数据的请求类型

datatype: "json",//后台返回的数据类型

url:"report/dogetItemGridData.action?queryDate="+args_datetime+"&nocache="+new Date()+"&queryType="+queryType,//请求的Action地址

height: 50,

width:$(window).width()*1.01,//设置表格宽度为当前显示屏宽度

// autowidth:true,

shrinkToFit:true,

//autoScroll: true,

//forceFit:false,

colNames:[" 日期 <img id='imgs' src='Themes/Images/gridHelp.png'>",

" 语音导航呼叫量 <img id='imgs1' src= 'Themes/Images/gridHelp.png'>",

" 语音导航转人工量 <img id='imgs2' src= 'Themes/Images/gridHelp.png'>",

" 交易转人工 <img id='imgs3' src= 'Themes/Images/gridHelp.png'>",

" 语音转按键量 <img id='imgs4' src= 'Themes/Images/gridHelp.png'>",

" 无声通话量 <img id='imgs5' src= 'Themes/Images/gridHelp.png'>",

" 未到达叶子节点通话量 <img id='imgs6' src= 'Themes/Images/gridHelp.png'>",

" 业务成功量 <img id='imgs7' src= 'Themes/Images/gridHelp.png'>",

" 导航首解率 <img id='imgs8' src= 'Themes/Images/gridHelp.png'>",

" 人工分流率 <img id='imgs9' src= 'Themes/Images/gridHelp.png'>"],

colModel:[

{name:'dataDate',index:' dataDate', width:165,sorttype:"string" ,align:"center",fixed:false},

{name:'callValue',index:' callValue', width:150,sorttype:"string",align:"center"},

{name:'callAgentValue',index:'callAgentValue', width:125,sorttype:"string",align:"center"},

{name:'tranAgentValue',index:'tranAgentValue', width:120,sorttype:"string",align:"center"},

{name:'voiceDigitValue',index:'voiceDigitValue', width:120, sorttype:"string",align:"center"},

{name:'noVoiceValue',index:'noVoiceValue', width:120,sorttype:"string",align:"center"},

{name:'noElementValue',index:'noElementValue', width:130,sorttype:"string",align:"center"},

{name:'businessSucValue',index:'businessSucValue', width:120, sorttype:"string",align:"center"},

{name:'firstRate',index:'firstRate', width:120,sorttype:"string",align:"center"},

{name:'diverRate',index:'diverRate', width:120,sorttype:"string",align:"center"}

sortable:true,

sortname:'age',

sortorder:'asc',

viewrecords:true,

rowNum:10,

rowList:[10,30,50],

loadonce:false,

jsonReader:{root:"rows",

page: "page",

records:"records",

repeatitems: false },

pager:"#gridPager",

// caption: "关键运营指标"

}).navGrid('#gridPager',{edit:false,add:false,del:false});

var url = "report/dogetItemGridData.action?queryDate="+args_datetime+"&queryType="+queryType; //表格不变时用

//$("#gridTable").trigger("reloadGrid");

$("#gridTable").jqGrid('setGridParam',{url:url}).trigger("reloadGrid");

tip();//为提示绑定Tip

};

三、jqgrid属性：

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

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() {

//$("#gridView").setGridHeight("800");//改变高度,如果需同时改变高度，需先改高度再改宽度

//$("#gridView").setGridWidth("200");//

$("#analyDataTab").setGridWidth($(window).width() * 0.99);

$("#charDataTab").setGridWidth(document.body.clientWidth * 0.99);

});

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

四、jQuery jqGrid中ColModel的参数大全

ColModel 是jqGrid里最重要的一个属性，设置表格列的属性。
用法：
java 代码：
jQuery("#gridid").jqGrid({
...
   colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],
...
});

有一些参数当表格初始化完成后是不能被修改的：
     name
      width
      resizable
      label (method avail.)

例子：$("#grid1").xgrid({
   url:{url:'../data/json-grid-standard.htm',pageSize:'10',currentPage:'1'},// 列表数据
    colModel:[{"display":"序号","width":"20","align":"center","sortable":"false","name":"xuhao"},
        {"display":"登陆ID","width":32,"align":"center","sortable":"true","name":"LOGIN_ID"},
        {"display":"姓名","width":32,"align":"center","sortable":"true","name":"XM"},
        {"display":"组织机构","width":32,"align":"left","sortable":"true","name":"ORG_ID"},
        {"display":"区域","width":32,"align":"center","sortable":"true","name":"REGION_ID"},
        {"display":"日期","width":32,"align":"center","sortable":"true","name":"DATE"},
        {"display":"是否删除","width":32,"align":"center","sortable":"true","name":"ISDEL","hide":"true"}
       ], //列表结构配置
    title:'列表控件',
    searchitems:[
        {"display":"登陆ID","name":"LOGIN_ID"},
        {"display":"姓名","name":"XM"},
        {"display":"时间","name":"ORG_ID"},
        {"display":"日期","name":"DATE"},
        {"display":"区域代码","name":"REGION_DM"}
        ],//列表中搜索的条件项
    width:800,
    callback:function(){ alert('列表初始化完成后，执行回调') },
    searchMode:true //搜索模式，初始化时不加载数据并隐藏列表

});