Jqgrid表格基本总结

Jqgrid表格基本总结Jqgrid表格基本总结创建时间:2016年9月9日(星期五)下午2:56 | 分类:JAVA总结|字数:9975 · jquery-ui-1.8.1.custom.css(jQueryUI界面的CSS文件)· ui.jqgrid.custom.css(专用于jqGrid界面的CSS文件)· jquery-1.7.2.js(jQuery的核心)· jq



Jqgrid表格基本总结

创建时间:2016年9月9日(星期五) 下午2:56 | 分类:
JAVA总结Jqgrid表格基本总结
| 字数:9975 
· 
jquery-ui-1.8.1.custom.cssjQuery UI界面的CSS文件)

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

· jquery-1.7.2.jsjQuery的核心)

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

· grid.locale-zh-CN.js(针对jqGridlocale设置,根据locale不同,选择不同的尾缀)

· jquery.jqGrid.min.jsjqGrid的核心

创建jqgrid对象:

     得到一个tablejquery对象,然后传递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:这个参数用于设定将要得到的数据类型。类型包括:jsonxmlxmlstringlocaljavascriptfunction

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

· heightGrid的高度,可以接受数字、%值、auto,默认值为150

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

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

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

· pager:定义页码控制条PageBar

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

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

· captionGrid的标题。如果设置了,则将显示在GridHeader ;如果未设置,则标题区域不显示 

· 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表格

<script type=“text/javascript”>

 $(“#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的弹出框:

<script>

//明细

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(

‘<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”/>’);

 

}

}

}

 

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

}

</script>

 

 

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

data-backdrop=“static”>

<div class=“modal-dialog” style=”min-width: 820px;”>

<div class=“modal-content”>

<div class=“modal-header no-padding”>

<div class=“table-header”>

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

aria-hidden=“true”>

<span class=“white”>×</span>

</button>

查看明细

</div>

</div>

<div class=“modal-body”

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

  <tr>

  <td><input type=“text” style=”border: none;” value=“合同编号” readonly=“readonly”/></td>

  <td><input type=“text” style=”border: none;” value=“产品” readonly=“readonly” /></td>

  <td><input type=“text” style=”border: none;” value=“发货数量” readonly=“readonly”/></td>

  <td><input type=“text” style=”border: none;” value=“合同数量” readonly=“readonly” /></td>

 

  </tr>

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

</div>

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

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

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注