jqGrid|初始化|参数

最新推荐文章于 2025-06-13 16:25:59 发布
最新推荐文章于 2025-06-13 16:25:59 发布
阅读量2.9k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： jqGrid 文章标签： jqgrid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rundy_Deng/article/details/78128460
本文介绍了 jqGrid 的工作原理及如何通过初始化参数配置展示数据库信息。详细解释了 jqGrid 的核心属性及其使用方法，例如 colModel 参数的设置，帮助读者理解如何利用这些配置项实现数据的有效展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

jqGrid原理

jqGrid是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显示。换句话说，jqGrid可以以一种更加简单的方式来展现你数据库的信息，而且也可以把客户端数据传回给服务器端。

对于jqGrid我们所关心的就是：必须有一段代码把一些页面信息保存到数据库中，而且也能够把响应信息返回给客户端。jqGrid是用ajax来实现对请求与响应的处理。

jqGrid|初始化|参数

名称描述
url获取数据的地址
datatype从服务器端返回的数据类型，默认为xml。可选类型有：xml，local，json等。
mtypeajax提交方式，POST或者GET。默认GET。
colNames列显示名称，是一个对象数组。
colModel常用到的属性：name：列显示的名称； index：传到服务器端用来排列用的列名称；width：列宽度；align：对齐方式；sortable：是否可以排序；
pager定义翻页用的导航栏，必须是有效的html元素。翻页工具可以放在页面的任意位置。
rowNum在grid上显示记录条数，这个参数要被传递到后台。
rowList一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台。
viewrecords定义是否要显示总记录数
caption表格名称
direction表格中文字的显示方向，从左向右（ltr）或者从右向左（rtl）
editurl定义对form编辑时的url
height表格高度，可以是数字，像素值或者百分比
prmNamesDefault valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 当参数为null时不会被发到服务器端
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

jqGrid colModel 参数

ColModel 是jqGrid里最重要的一个属性，设置表格列的属性。

属性描述
align对齐方式。可选：left，center，right；
classes设置列的css。多个class之间用空格分隔，如：‘class1 class2’。表格默认的css属性是ui-ellipsis。
datefmt“/”，“-”，“.”都是有效的日期分隔符。日期格式，string Y-m-d
editable单元格是否可编辑
editoptions编辑的一系列选项。{name：‘goodsId’， index：‘goodsId’， width：200， editable：true， edittype：‘select’，
editoptions：{dataUrl：“goods_goodsEdit.do”}}。动态从服务器端获取数据的例子。
editrules编辑的规则{name：‘age’， index：‘age’， width：90， editable：true， editrules：{edithidden：true， required：true， number：true， minValue：10，
 maxValue：100}}，设定年龄的最大值为100，最小值为10，而且为数字类型，并且必输字段。特别注意：如字段带字母或符号时，此处会失效
fixed列宽度是否要固定不可变
formoptions对于form进行编辑时的属性设置
formatoptions对某些列进行格式化的设置
formatter对列进行格式化时设置的函数名或者类型。
{name：‘sex’， index：‘sex’， align：‘center’， width：60， editable：true， edittype：‘select’， editoptions：{value：‘0：待定；1：男；2：女’}，
formatter：function（cellvalue， options， rowObject）{
var temp = “<img src = './img/”
if (cellvalue == 1) {
temp = temp + "male.png";
} else if (cellvalue == 2) {
temp = temp + "female.png";
} else {
temp = temp + "user.png";
}
temp = temp + " 'border = ' 0'/> "
return temp;
}},                 //返回性别的图标
hidden在初始化表格时是否要隐藏此列。
index索引。其和后台交互的参数是sidx
label如果colNames为空则用此值来作为列的显示名称，如果都没有设置则使用name值。
name表格列的名称，所有关键字、保留字都不能作为名称使用，包括subgrid，cb，rn
sortable是否可排序
sorttype用在当datatype为local时，定义搜索列的类型，可选值：int/integer，对integer排序； float/number/currency，排序数字； date：排序日期； text：排序文本。
width默认列的宽度，只能是像素值，不能使百分比
unformat‘unformat’单元格值
edittype可编辑的类型。可选值：text， textarea， select， checkbox， password， button， image， file。


[html]  view plain  copy
  1. /*******  
  2.             从后台获取贸易商物资信息数据  
  3.         ******/  
  4.         var grid_data = [];   
  5.         var start = 0;  
  6.         var limit = 100;  
  7.         var currentPage = 0;  
  8.         var dataStr = "start=" + start + "&limit=" + limit;  
  9.         $.ajax({  
  10.             async:false,  
  11.             cache:false,  
  12.             url: "goods_findPageGoodsByTrader.do",  
  13.             data: dataStr,  
  14.             type: 'POST',  
  15.             success: function(result){  
  16.                 var result = eval('('+ result +')');  
  17.                 if(result.root != undefined && result.root.length > 0){  
  18.                     var resultContent = result.root;  
  19.                     var grid_child;  
  20.                     for ( var i = 0; i < resultContent.length; i++) {  
  21.                         grid_child = {id:resultContent[i].goodsId,   
  22.                                 goodsOrder:resultContent[i].goodsOrder, goodsPackage:resultContent[i].goodsPackage, goodsName:resultContent[i].goodsName,  
  23.                                 goodsType:resultContent[i].goodsType, goodsMaterial:resultContent[i].goodsMaterial, goodsNumber:resultContent[i].goodsNumber, goodsWeight:resultContent[i].goodsWeight,   
  24.                                 goodsWarranty:resultContent[i].goodsWarranty, goodsOrigin:resultContent[i].goodsOrigin, originName:resultContent[i].originName,   
  25.                                 goodsContractreadtime:resultContent[i].goodsContractreadtime, dzPurchaseContractNum:resultContent[i].dzPurchaseContractNum, groupPurchaseContractNum:resultContent[i].groupPurchaseContractNum};  
  26.                         grid_data[i] = grid_child;      
  27.                     }  
  28.                 }  
  29.             },  
  30.             error:function(e){alert("获取贸易商物资信息失败");}  
  31.         });  
  32.       
  33.             jQuery(function($) {  
  34.                 var grid_selector = "#grid-table";  
  35.                 var pager_selector = "#grid-pager";  
  36.                 jQuery(grid_selector).jqGrid({  
  37.                     //direction: "rtl",         //表格中文字的显示方向，从左向右（ltr）或者从右向左（rtr）  
  38.                       
  39.                     data: grid_data,  
  40.                     datatype: "local",          //从服务器端返回的数据类型  
  41.                     height: 400,                //表格高度，可以是数字，像素值或者百分比  
  42.                     /****列显示名称******/  
  43.                     colNames:[' ', 'id', '订单号', '捆包号', '品名', '规格', '产品牌号(材质)', '数量', '重量(吨)', '质保书编号', '物资来源', '来源名称', '合同读取时间', '大宗物资网合同号', '集团合同库合同号', '查看附件', '详情'],  
  44.                     /****常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序******/  
  45.                     colModel:[  
  46.                         {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,  
  47.                             formatter:'actions',   
  48.                             formatoptions:{   
  49.                                 keys:true,  
  50.                                 delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},  
  51.                                 //editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}  
  52.                             }  
  53.                         },  
  54.                         {name:'id', index:'id', width:60, editable:false, hidden:true},  
  55.                         {name:'goodsOrder',index:'goodsOrder', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},  
  56.                         {name:'goodsPackage',index:'goodsPackage', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},  
  57.                         {name:'goodsName',index:'goodsName',width:60, editable:true, editoptions:{size:"20",maxlength:"30"}},  
  58.                         {name:'goodsType',index:'goodsType',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},  
  59.                         {name:'goodsMaterial',index:'goodsMaterial',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},  
  60.                         {name:'goodsNumber',index:'goodsNumber',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},  
  61.                         {name:'goodsWeight',index:'goodsWeight',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},  
  62.                         {name:'goodsWarranty',index:'goodsWarranty', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},  
  63.                         {name:'goodsOrigin', index:'goodsOrigin', width:60, editable:true, editrules:{edithidden: true}, hidden:true},  
  64.                         {name:'originName', index:'originName', width:60, editable:true, edittype:'select', editoptions:{value:"贸易商:贸易商"}},  
  65.                         {name:'goodsContractreadtime',index:'goodsContractreadtime', width:60, sorttype:"date", unformat:pickDate},  
  66.                         {name:'dzPurchaseContractNum',index:'dzPurchaseContractNum', width:60, editable:true, edittype:'select', editoptions:{value:getDzContractNum()}},  
  67.                         {name:'groupPurchaseContractNum',index:'groupPurchaseContractNum', width:60, editable:true, edittype:'select', editoptions:{value:getGroupContractNum()}},  
  68.                         //{name:'goodsDetail',index:'goodsDetail', width:60, sortable:false,editable: false, editoptions:{rows:"2",cols:"10"}, formatter:function(cellvalue, options, rowObject){ return '<a href="orderDetail.html">详情</a>'; }}  
  69.                         {name:'checkAttachment',index:'checkAttachment', width:60, sortable:false, editable:false, formatter:function(cellvalue, options, rowObject){return "<a href=\"../attachment/checkAttachment.html\">查看附件</a>";}},  
  70.                         {name:'goodsDetail',index:'goodsDetail', width:60, sortable:false, editable:false, formatter:function(cellvalue, options, rowObject){return "<a href=\"../orderDetail/orderDetail.html\">详情</a>";}}  
  71.                     ],   
  72.               
  73.                     //footerrow: true,//分页上添加一行，用于显示统计信息  
  74.                     rownumbers:true,//添加左侧行号  
  75.                     viewrecords : true,     //定义是否要显示总记录数  
  76.                     rowNum:10,              //在grid上显示记录条数，这个参数是要被传递到后台  
  77.                     rowList:[10,20,30],     //一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台  
  78.                     pager : pager_selector, //定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置  
  79.                     altRows: true,          //设置为交替行表格,默认为false  
  80.                     prmNames:{          //Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 当参数为null时不会被发到服务器端  
  81.                         page:"page",        //设置初始的页码(默认值：1)   
  82.                         rows:"rows",  
  83.                         oper:"oper",  
  84.                         editoper:"edit",  
  85.                         addoper:"add",  
  86.                         deloper:"del",  
  87.                     },  
  88.                     //toppager: true,  
  89.                       
  90.                     multiselect: true,          //定义是否可以多选  
  91.                     //multikey: "ctrlKey",      //只有在multiselect设置为ture时起作用，定义使用那个key来做多选。shiftKey，altKey，ctrlKey  
  92.                     multiboxonly: true,         //只有当multiselect = true.起作用，当multiboxonly 为ture时只有选择checkbox才会起作用  
  93.                       
  94.                     gridComplete:function(){ //在此事件中循环为每一行添加修改和删除链接   
  95.   
  96.                         var ids=jQuery("#grid-table").jqGrid('getDataIDs');                           
  97.                         for(var i=0; i<ids.length; i++){   
  98.                             var id=ids[i];   
  99.                             /* uploadAttachmentHref = "<a href='#' style='color:#f60' onclick='uploadAttachment("+ id +")' >上传附件</a>";  
  100.                             jQuery("#grid-table").jqGrid('setRowData', ids[i], {uploadFile: uploadAttachmentHref}); */    
  101.                             jQuery("#grid-table").jqGrid('setRowData', ids[i], {goodsOrigin: "贸易商"});  
  102.                         }   
  103.                     },  
  104.               
  105.                     loadComplete : function() {  
  106.                         var table = this;  
  107.                         setTimeout(function(){  
  108.                             styleCheckbox(table);  
  109.                               
  110.                             updateActionIcons(table);  
  111.                             updatePagerIcons(table);  
  112.                             enableTooltips(table);  
  113.                         }, 0);  
  114.                     },  
  115.               
  116.                     editurl: "goods_editGoods.do",  //定义对form编辑时的url  
  117.                     caption: "物资信息列表",      //表格名称  
  118.                     autowidth: true             //如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth  
  119.                 });  
  120. });  
jqgrid初始化
qingtong_gu的博客
12-20 2670
Jqgrid插件使用总结： td[aria-describedby="grid-table_rn"] 这条属性用来描述，自己的理解就是为了让选择器更好的选择加一个描述约束一下 jQuery(    function($){         var grid_selector = "#grid-table";         var pager_selector = "#grid-
jqgrid实现字段显示或隐藏问题
sning999
08-08 1万+
jqgrid实现字段在不同模式下的显示问题
jqgrid中文文档API
06-28
jqgrid中文文档API，使用JQGRID
jqgrid初始化参数及colModel参数
热门推荐
sning999
07-13 3万+
jqgrid初始化参数及colModel参数
jqGrid学习与应用 - 掌握数据网格的JavaScript插件
最新发布
weixin_35706255的博客
06-13 298
jqGrid 是一个流行的 JavaScript 插件，用于以表格形式展示复杂的数据集。它支持动态数据交互、分页、排序和搜索等功能。本章首先介绍 jqGrid 的基础架构，然后深入到如何配置数据源，为后续章节中对数据进行操作打下基础。jqGrid 是由 Tony Tomov 开发的一个强大的网格组件，允许开发者快速地构建具有丰富交互功能的网格界面。它基于 jQuery 库，与后端技术如 ASP.NET、PHP、Ruby on Rails 等无缝集成，广泛用于管理信息系统（MIS）和企业级应用中。
jqGrid选项(Option)
Rod_Johson的专栏
04-17 707
jqGrid提供了大量的选项设置，开发者可以通过设置选项对应值来控制jqGrid，比如表格的宽度、高度、数据类型以及列名称等等都是通过选项 设置来完成的。jqGrid的选项一般是名称：值（name:value）的形式，也可以是对象(object)及数组（array）的形式配置。 jqGrid选项(Option) 调用jqGrid只需要执行以下代码: jQuery("#grid_id" )...
jQuery学习之：jqGrid表格插件——参数配置
Go语言中文网
12-30 279
由于jqGrid功能强大，配置比较复杂，在第一个例子中，对于jqGrid的配置参数没有进行什么解释。从现在开始，会陆续介绍jqGrid的参数。这 些参数的详细介绍请查看官方文档。由于本人英语水平有限，翻译不好，请多原谅。（为了保证连贯性，翻译时引用了 http://a3mao.iteye.com，在此感谢。但在他的基础上增加了一些内容。） a3mao永久域名 http://a3mao.iteye...
jqgrid之路初始篇
vigor(软件开发)
10-05 937
常用options： url ：jqGrid控件通过这个参数得到需要显示的数据，具体的返回值可以使XML也可以是Json。datatype ：这个参数用于设定将要得到的数据类型。我最常用的是“json”，其余的类型还包括：xml、xmlstring、local、javascript、function。mtype : 定义使用哪种方法发起请求，GET或者POST。height ：Grid的高度，可
jqgrid 初始化请求带参数
06-10
要在 jqGrid 初始化时带参数发送请求，可以在jqGrid的配置项中使用 postData 属性设置参数。postData 的值应该是一个对象，其中的属性名是参数名，属性值是参数值。例如： ```javascript $("#grid").jqGrid({ url:...
jqgrid参数中文说明
09-14
jqGrid参数中文说明 jqGrid是一种基于jQuery的网格控件，用于在Web应用程序中显示和编辑数据。它提供了许多参数来控制网格的行为和显示样式。下面是jqGrid的一些常见参数的中文说明： 1. options参数 jqGrid的...
jqgrid多次查询导致参数值累加，无法以最新查询条件查询
01-08
// 初始化并清空jqgrid的postData参数 function initGridPostData() { var postData1 = $("#gridTable").jqGrid("getGridParam", "postData"); for (key in postData1) { delete postData1[key]; } } ``` 在这...
jqgrid分页参数
12-28
1. **初始化分页参数**： ```java private Integer page = 1; // 当前页 private Integer total; // 总页数 private Integer pageSize = 20; // 每页记录数 private Integer records; // 总记录数 private ...
Initialize Grid(初始化)
jellen129的专栏
07-23 1443
DHTML JavaScript Grid 初始化加载示例：----方法一：--html/JSP页面中：-------------------------------
jqGrid
little_beauty的博客
03-08 1539
jqGrid初始化表格 obj['table'].jqGrid({ url: curPath + '/minstone/roomApply/getMyRoomApplyList', styleUI: 'Bootstrap', datatype: 'json', ...
02jqGrid - 初始化参数大全
阿甘兄
04-23 337
代码位置 参数详解
jqGrid的属性列表
weixin_33779515的博客
12-16 346
为什么80%的码农都做不了架构师？>>> ...
初始化设置Grid的样式
johncools的博客
06-21 1986
//最后一列数据让表格填充满   grid1.ExtendLastCol= true;   //显示固定行数   grid1.DisplayRowNumber =true;   //设置列数   grid1.Cols =7;   //设置行数   grid1.Rows=100;   //返回或设置控件在当前活动单元格是否显示一个虚框。   grid1.DisplayFocusRect = fals
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值