Jqgrid表格基本总结

创建时间：2016年9月9日(星期五) 下午2:56 | 分类：
JAVA总结

| 字数：9975
·
jquery-ui-1.8.1.custom.css（jQuery UI界面的CSS文件）

· ui.jqgrid.custom.css（专用于jqGrid界面的CSS文件）

· jquery-1.7.2.js（jQuery的核心）

· jquery-ui-1.8.1.custom.min.js（用于支持jQuery UI界面）

· grid.locale-zh-CN.js（针对jqGrid的locale设置，根据locale不同，选择不同的尾缀）

· jquery.jqGrid.min.js（jqGrid的核心

创建jqgrid对象：

得到一个table的jquery对象，然后传递options。例如： $(“#grid-table”).jqGrid(options);

jQuery(“#grid-table”).jqGrid({

subGrid : false,

url :“${contextPath}/sys/ycheck/getYcheck”,

datatype : “json”,

//contentType:”application/x-www-form-urlencoded;charset=utf-8″,

type : “post”,

height : 450,

colNames : [ ‘编号’, ‘供应商’,

‘进料总批次’, ‘合格总批次’,

‘让步总批次’, ‘不合格总批次’,

‘制成退货总批次’, ‘年度批次合格率’ ],

colModel : [ {

name : ‘yScrwdh’,

index : ‘yScrwdh’,

label : ‘编号’,

width : 80,

hidden : true,

editable : false,

search : false

}, {

name : ‘yGys’,

index : ‘yGys’,

label : ‘供应商’,

width : 120,

editable : false,

searchoptions : {

sopt : [ ‘cn’ ]

search : true

}, {

name : ‘yJlzpc’,

index : ‘yJlzpc’,

label : ‘进料总批次’,

width : 50,

editable : false,

//formatter : zpc,

search : false

}, {

name : ‘yHgzpc’,

index : ‘yHgzpc’,

label : ‘合格总批次’,

width : 50,

editable : false,

editoptions : {

size : “20”

//formatter : hgzpc,

search : false

}, {

name : ‘yRbzpc’,

index : ‘yRbzpc’,

label : ‘让步总批次’,

width : 50,

editable : false,

editoptions : {

size : “20”

//formatter : rbzpc,

search : false

}, {

name : ‘yBhgzpc’,

index : ‘yBhgzpc’,

label : ‘不合格总批次’,

width : 50,

editable : false,

editoptions : {

size : “20”

//formatter : bhgzpc,

search : false

}, {

name : ‘yZcthzpc’,

index : ‘yZcthzpc’,

label : ‘制成退货总批次’,

width : 50,

editable : true,

editoptions : {

size : “20”

/* editoptions : {

dataUrl : “${contextPath}/sys/department/getDepartmentSelectList”

}, */

search : false

}, {

name : ‘yNdpchgl’,

index : ‘yNdpchgl’,

label : ‘年度批次合格率’,

width : 50,

editable : false,

editoptions : {

size : “20”,

maxlength : “100”

// formatter :hgl,

search : false

} ],

· url：提交处理数据的地址。

· datatype：这个参数用于设定将要得到的数据类型。类型包括：json、xml、xmlstring、local、javascript、function。

· type: 定义使用哪种方法发起请求，GET或者POST。

· height：Grid的高度，可以接受数字、%值、auto，默认值为150。

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

· shrinkToFit：此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；如果shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是保持原有设置，而Grid将会有水平滚动条。

· autowidth：默认值为false。如果设为true，则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段；如果当父容器尺寸变化了，同时也需要变化Grid的尺寸的话，则需要在自己的代码中调用setGridWidth方法来完成。

· pager：定义页码控制条PageBar

· sortname：指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到服务端。

· viewrecords：设置是否在PagerBar显示所有记录的总数。

· caption：Grid的标题。如果设置了，则将显示在Grid的Header层；如果未设置，则标题区域不显示。

· rowNum：用于设置Grid中一次显示的行数，默认值为20。

· rowList：一个数组，用于设置Grid可以接受的rowNum值。例如[10,20,30]。

· prmNames：这是一个数组，用于设置jqGrid将要向服务端传递的参数名称。我们一般不用去改变什么。

· colModel：最重要的数组之一，用于设定各列的参数。（稍后详述）

· jsonReader：这又是一个数组，用来设定如何解析从Server端发回来的json数据。（稍后详述）

colModel:列

· name：为Grid中的每个列设置唯一的名称，这是一个必需选项

· index：设置排序时所使用的索引名称，这个index名称会作为sidx参数传递到服务端。

· label：表格显示的列名。

· width：设置列的宽度，目前只能接受以px为单位的数值，默认为150。

· sortable：设置该列是否可以排序，默认为true。

· search：设置该列是否可以被列为搜索条件，默认为true。

· resizable：设置列是否可以变更尺寸，默认为true。

· hidden：设置此列初始化时是否为隐藏状态，默认为false。

· formatter：预设类型或用来格式化该列的自定义函数名。

getGridParam：获得jqGrid的选项值

var id = $(“#grid-table”).jqGrid(“getGridParam”, “selrow”); //获得选中行的ID

var sort = $(“#grid-table”).jqGrid(“getGridParam”, “sortname”); //获得排序的字段

var page = $(“#grid-table”).jqGrid(“getGridParam”, “page”); //获得当前的页数

var row = $(“#grid-table”).jqGrid(“getGridParam”, “rowNum”); //获得当前页的行数

var count = $(“#grid-table”).jqGrid(“getGridParam”, “records”); //获得总记录数

var rows = $(“#grid-table”).jqGrid(“getGridParam”, “selarrrow”); //可以多选时，返回选中行的ID

getRowData：获得某行的数据。它具有一个rowid参数，Jqgrid会根据这个rowid返回对应行的数据，返回的是name:value类型的数组。如果rowid未能被找到，则返回一个空数组；如果未设置rowid参数，则以数组的形式返回Grid的所有行数据

var selectedId = $(“#grid-table”).jqGrid(“getGridParam”, “selrow”); //获取选中行的ID

var rowData = $(“#grid-table”).jqGrid(“getRowData”, selectedId);//根据id获取行数据,返回的是对象

刷新重新载入Grid表格

$(“#submit”).click(function(){

var gysmc=$(“#gysmc”).val();

var yclxh=$(“#yclxh”).val();

var mc=$(“#mc”).val();

// alert(gysmc+” “+yclxh+” “+mc);

$(“#grid-table”).jqGrid(‘setGridParam’,{

url:‘${contextPath}/sys/ycheck/selectByTiaojian?gysmc=’+encodeURI(gysmc)+‘&yclxh=’+encodeURI(yclxh)+‘&mc=’+encodeURI(mc),

datatype:‘json’,

page:1

}).trigger(“reloadGrid”); //重新载入

});

</script>

Jqgrid的子网格subGridRowExpanded：

// caption: ‘My first grid’,

subGrid : true,// (1)开启子表格支持

subGridRowExpanded : function(

subgrid_id, row_id) {
// (2)子表格容器的id和需要展开子表格的行id，将传入此事件函数

var subgrid_table_id;

subgrid_table_id = subgrid_id+ “_t”;// (3)根据subgrid_id定义对应的子表格的table的id

//subGridRowExpanded获取选中行

var rowData = $(this).getRowData(row_id);

//获取子表格容器的发货单号

var uid = rowData[‘yScrwdh’];

var name = rowData[‘yGys’];

//alert($(“#yclxh”).val());

// (5)动态添加子报表的table和pager

jQuery(“#” + subgrid_id)

.html(

“<table id='”+subgrid_table_id+“‘ class=’scroll’> </table>”);

// (6)创建jqGrid对象

jQuery(

“#”

+ subgrid_table_id)

.jqGrid(

{

url : “${contextPath}/sys/ycheck/groupByGysZwg?id=”

+ encodeURI(uid)

+ “&name=”

+ encodeURI(name)

+ “&yclxh=”

+ encodeURI($(“#yclxh”).val())

+ “&mc=”

+ encodeURI($(“#mc”).val()),// (7)子表格数据对应的url，注意传入的contact.id参数

datatype : “json”,

// data:”{id:'” + encodeURI(uid) + “‘,name:'” + encodeURI(name) + “‘}”,

colNames : [

‘日期’,

‘名称’,

‘型号’,

‘数量’,

‘判定’ ],

colModel : [

{

name : “yDate”,

index : “yDate”,

width : 250,

key : true

{

name : “yName”,

index : “yName”,

width : 200,

key : true

{

name : “yModel”,

index : “yModel”,

width : 200

{

name : “yNumber”,

index : “yNumber”,

width : 200

{

name : “yJudge”,

index : “yJudge”,

width : 200

}

height : 200,

height : ‘100%’,

rowNum : 100,

sortname : ‘num’,

sortorder : “asc”

});

jqgrid的弹出框：

//明细

function mingxi() {

var grid_selector = “#grid-table”;

var selectedId = $(grid_selector).jqGrid(“getGridParam”, “selrow”);

if (null == selectedId) {

$.gritter.add({

title : “系统信息”,

text : “请选择记录”,

class_name : “gritter-info gritter-center”

});

} else {

$(“#modal-table”).modal(“toggle”);

$(“#htbh”).val(

jQuery(grid_selector).jqGrid(

“getRowData”,

jQuery(grid_selector).jqGrid(“getGridParam”,

“selrow”)).iAwb);

var cgbh = jQuery(grid_selector).jqGrid(“getRowData”,

jQuery(grid_selector).jqGrid(“getGridParam”, “selrow”)).iAwb;

//产品

var icp = jQuery(grid_selector).jqGrid(“getRowData”,

jQuery(grid_selector).jqGrid(“getGridParam”, “selrow”)).iCp;

//发货数量

var fhsl = jQuery(grid_selector).jqGrid(“getRowData”,

jQuery(grid_selector).jqGrid(“getGridParam”, “selrow”)).iSl;

//合同数量

var htsl = jQuery(grid_selector).jqGrid(“getRowData”,

jQuery(grid_selector).jqGrid(“getGridParam”, “selrow”)).iCsl;

//判断是否是多个合同

if (cgbh.indexOf(“,”) > 0) {

var htbh = cgbh.split(“,”);

for (i = 0; i < htbh.length; i++) {

//判断是否是多个产品

if (icp.indexOf(“,”) > 0) {

//alert(“产品包含逗号”);

var cp = icp.split(“,”);

var fsl = fhsl.split(“,”);

var hsl = htsl.split(“,”);

for (j = 0; j < cp.length; j++) {

$(‘#mingxi’)

.append(

‘<input type=”text” style=”border: none;” value=”‘+htbh[i]+‘” readonly=”readonly”/><input type=”text” style=”border: none;” value=”‘+cp[j]+‘” readonly=”readonly”/><input type=”text” style=”border: none;” value=”‘+fsl[j]+‘” readonly=”readonly”/><input type=”text” style=”border: none;” value=”‘+hsl[j]+‘” readonly=”readonly”/>’);

}

} else {

$(‘#mingxi’)

.append(

‘<input type=”text” style=”border: none;” value=”‘+cgbh+‘” readonly=”readonly”/><input type=”text” style=”border: none;” value=”‘+icp+‘” readonly=”readonly”/><input type=”text” style=”border: none;” value=”‘+fhsl+‘” readonly=”readonly”/><input type=”text” style=”border: none;” value=”‘+htsl+‘” readonly=”readonly”/>’);

}

} else {

//判断是否是多个产品

if (icp.indexOf(“,”) > 0) {

//alert(“产品包含逗号”);

var cp = icp.split(“,”);

var fsl = fhsl.split(“,”);

var hsl = htsl.split(“,”);

for (i = 0; i < cp.length; i++) {

$(‘#mingxi’)

.append(

‘<input type=”text” style=”border: none;” value=”‘+cgbh+‘” readonly=”readonly”/><input type=”text” style=”border: none;” value=”‘+cp[i]+‘” readonly=”readonly”/><input type=”text” style=”border: none;” value=”‘+fsl[i]+‘” readonly=”readonly”/><input type=”text” style=”border: none;” value=”‘+hsl[i]+‘” readonly=”readonly”/>’);

}

} else {

$(‘#mingxi’)

.append(

}

// $(“#modal-table”).modal(“toggle”);

}

</script>

<div id=“modal-table” class=“modal fade” tabindex=“-1”

data-backdrop=“static”>

<button type=“button” class=“close” data-dismiss=“modal”

aria-hidden=“true”>

</button>

查看明细

</div>

<div class=“modal-body”

style=”max-height: 500px; overflow-y: scroll“>

<tr>

</tr>

<!– <tr id = “mingxi“> </tr> –>

</div>

今天的文章Jqgrid表格基本总结分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/12693.html

Jqgrid表格基本总结

相关推荐

发表回复