jqgrid rows怎么设置

Posted 2023-03-20

参考技术A 　　jqGrid提供了大量的选项设置，开发者可以通过设置选项对应值来控制jqGrid，比如表格的宽度、高度、数据类型以及列名称等等都是通过选项设置来完成的。jqGrid的选项一般是名称：值（name:value）的形式，也可以是对象(object)及数组（array）的形式配置。
　　jqGrid选项(Option)
　　调用jqGrid只需要执行以下代码:

jQuery("#grid_id").jqGrid(options);

　　options即jqGrid的选项设置，请参照以下表格。
　　属性 类型 描述 默认值
　　ajaxGridOptions object 此项用于设置当表格设置获得数据时，ajax的全局属性，注意此项可能覆盖所有当前的ajax设置（包括error, complete和beforeSend 事件）。 empty
　　ajaxSelectOptions object 此项用于设置在editoptions或searchoptions对象中通过dataUrl选择元素时， ajax的全局属性。 empty
　　altclass string 交替行的类。 此项仅当altRows设置为true时有效。 ui-priority-secondary
　　altRows boolean 设置为交替行表格 false
　　autoencode boolean 当设置为true时，对来自服务器的数据和提交数据进行encodes编码。如< 将被转换为< false
　　autowidth boolean 当设置为true时，表格宽度将自动匹配到父元素的宽度。这个匹配只在表格建立时进行，为了使表格在父元素宽度变化时也随之变化，可以使用setGridWidth方法 false
　　caption string 表格的标题。显示在Header上。若为空时将不会显示。 empty
　　cellLayout integer 该属性确定单元格的padding + border 宽度。通常不修改该属性，但若表格的CSS中改变了td元素，该属性需要修改。 缺省值5表示paddingLef(2) + paddingRight(2) + borderLeft(1)=5 5
　　cellEdit boolean 是否允许单元格编辑。 false
　　cellsubmit string 确定单元格内容保存方式是remote还是clientArray 。 'remote'
　　cellurl string 单元格保存的url。 null
　　colModel array 描述列参数数组。这是表格最重要的部分，详见colModel API. null
　　colNames array[] 列名称数组。该名称将在Header中显示。名称以逗号分隔，数量应与colModel 数组数量相等 empty
　　data array 以数组的形式保存本地数据。 empty
　　datastr string 当datatype被设置为xmlstring或jsonstring时，为数据串。 null
　　datatype string 定义表格希望获得的数据的类型，有效值有：
Xml —xml数据
xmlstring—xml字符串
json—JSON数据
jsonstring—JSON字符串
local—客户端数据（数组）
javascript—javascript数据
function—函数返回数据
xml
　　deselectAfterSort boolean 只适用于当datatype为local时。当一个排序被应用时取消当前选定行。 true
　　direction string 表格中的书写方向。“ltr”从左到右(缺省值)，“rtl”从右到左 ltr
　　editurl string 定义行内编辑地址URL null
　　emptyrecords string 当返回(或当前)数量为零时显示的信息此项只用当viewrecords 设置为true时才有效。
　　ExpandColClick boolean true时，点击展开行的文字，treeGrid展开或收拢 true
　　ExpandColumn string 指定用于张开treeGrid的列（名称来自colModel），未设置即用第一列。此项只有当treeGrid为true时有效. null
　　footerrow boolean 如果设置为true时，将生成一个表脚行，列数等于colModel false
　　forceFit boolean 如果设置为true，改变列宽，相邻列也将调整以适应整体表格，将不会出现水平滚动条。 false
　　gridstate string 表格的当前状态。有visible或hidden visible
　　gridview boolean 设置为true将提高5~10倍的显示速度。但不能再使用treeGrid, subGrid, 或afterInsertRow事件 false
　　grouping boolean 是否设置表格组 false
　　height mixed 表格高度。可为数值、百分比或auto 150
　　hiddengrid boolean 如果设置为true，表格开始被隐藏，数据不被载入，只显示标题。当第一次点击显示/隐藏按钮显示表格，数据从服务器载入。 false
　　hidegrid boolean 是否允许显示/隐藏按钮可用。只有标题不为空时可用。 true
　　hoverrows boolean 表行是否有鼠标悬停效果 true
　　jsonReader array JSON数据结构数组
　　lastpage integer 请求返回的总页数 0
　　lastsort integer 排序的列号（0开始） 0
　　loadonce boolean 设置为true时，表格只一次读取服务器数据（使用适当datatype），之后，datatype 自动变为local ，所有进一步操作都在客户端完成，pager功能（若存在）将失效。 false
　　loadtext string 数据请求和排序时显示的文本 Loading…
　　loadui string 此项控制ajax进程进行时的动作。Disable—取消jqGrid的进程指示，可使用自定义的指示。 enable (缺省)—表格中间显示loading。 block – 显示“Loading”信息，禁用页面上的所有功能，直到数据装入完成。 enable
　　mtype string 定义提交类型POST或GET GET
　　multikey string 此属性只有当multiselect为true时有效，定义多选时的组合键，可选值有： shiftKey ，altKey，ctrlKey empty
　　multiboxonly boolean 此属性只有当multiselect为true时有效，. Multiboxonly设置为true时，只有点击checkbox时该行才被选中，点击其他列，将清除当前行的选中。 false
　　multiselect boolean 此属性设为true时启用多行选择，出现复选框 false
　　multiselectWidth integer 若multiselect 为true时，定义多选列的宽度。 20
　　page integer 设置请求初始页的数量，此参数通过URL从服务器接受数据 1
　　pager mixed 定义分页浏览导航条。必须是一个html元素，如<div id="page"></div> empty
　　pagerpos string 定义表格浏览导航条的位置，缺省情况下建立一个包括3部分的导航条：页码，导航按钮和记录信息。 center
　　pgbuttons boolean 定义导航激活时导航按钮是否显示。 true
　　pginput boolean 定义导航栏是否有页码输入框。 true
　　pgtext string 当前页信息。第一个量为当前页，第二个量为总页数。
　　prmNames array 缺省情况下prmNames: page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null 以POST方式发送到服务器，字段为： page，rows，sidx，sord，search，nd 例如要将sidx改为mysort，可写成： prmNames: sort: “mysort”. 这样提交到服务器的字符串就变为： page=1&rows=10&mysort=myindex&sord=asc 若将一些参数设为null，这些参数将不再发往服务器。例如prmNames: nd:null 则nd参数将不被发送。 Npage参数参见scroll option. none
　　postData array 此数组能直接传递到url。这个数组可使用这种形式name1:value1…。 empty
　　reccount integer 只读属性。定义表格显示的行数。切勿与records混淆。 0
　　recordpos string 定义页中记录信息的位置，可以是left，center，right。 right
　　recordpos object 交替行的类 true
　　records integer 只读属性。定义从请求中获得的记录数 none
　　recordtext string 可在页面上显示的提示信息，此文字只在viewrecords 为true是有效，并且当记录总数大于0时才显示。
此文字中中的内容表示：
0 该页显示的第一个记录的记录号
1 该页显示的最后一个记录的记录号
2 获得的记录总数
　　resizeclass string 列可变大小时的类 empty
　　rowList array[] 用于改变显示行数的下拉列表框的元素数组。 empty
　　rownumbers boolean 若此属性为true，表格左侧将添加一用于显示行数（从1开始）的列。此时colModel自动扩展出一个名为rn的元素。所以在colModel中不要定义rn。 false
　　rowNum integer 表格中可见的记录数。此参数通过url传递给服务器供检索数据用。注意：若此参数设置为10，而服务器返回15条记录，将只有10条记录被装入。若此参数被设置为-1，则此检查失效 20
　　rownumWidth integer 当rownumbers为true时，定义显示行数的列的宽度。 25
　　savedRow array 只读属性。用于行编辑和单元格编辑保存数据之前 empty
　　scroll boolean or integer 创建动态滚动表格。当设为启用时，pager被禁用，可使用垂直滚动条来装入数据。 false
　　scrollOffset integer 定义垂直滚动条的宽度。 18
　　scrollrows boolean 该项启用时，用setSelection 选定一行，表格将滚动到被选行可见。 false
　　selarrrow array-[] 只读属性。当multiselect 为true时，包含当前选定的行。此为一维数组，值为表格中选定行的ID。 empty
　　selrow string 只读属性。内容是最后选定行的ID。如火应用了排序或pagging，该值为null。 null
　　shrinkToFit boolean or integer 该项描述计算每列相对于表格宽度的初始宽度的类型。
若为true，并且设置了列宽度，则每列的宽度根据定义宽度缩放。
若为false，并且设置了列宽度，表格宽度为设置宽度，列宽度不会重新计算，使用colModel中定义的值 true
　　sortable object 启用此项，允许使用鼠标重新排序列。 true
　　sortname string 从服务器读取XML或JSON数据时初始的排序名，此名被加到URL中。 empty
　　sortorder string 从服务器读取XML或JSON数据时初始的排序类型，此类型被加到URL中。可选值为asc或desc。 asc
　　subGrid boolean 设置为true，可使用子表格。启用子表格，将在基本表的左边将添加一列，并包含一个“+”图像，用户可以点击扩展行。 false
　　subGridModel array-[] 该属性用于描述子表格的模式，只有subGrid 为true时有效。它是一个用于描述子表格列的数组。 empty
　　subGridType mixed 用于定义子表格装入的数据类型，若不定义，则使用与父表格同样的数据类型。 null
　　subGridUrl string 该属性用于定义子表格获得数据的URL。行的ID将键入此URL中，若要添加其他参数，可使用subGridModel 中的选项。 empty
　　subGridWidth integer 定义子表格的列宽 20
　　toolbar array 该参数定义表格的工具栏。参数是一个包含两个值的数组，第一个值使工具栏有效，第二个值相对位置（可以是top、bottom、both）。例如：设置toolbar为 [true,”both”]，将在表格的头部和底部建立两个工具栏，两个工具栏位两个DIV元素，头部DIV元素的ID为“t_表格ID”，底部DIV元素的ID为“tb_表格ID”。若只有一个工具栏（top或bottom）时，DIV的ID为“t_表格ID”。 [false,'']
　　toppager boolean 是否在表格上部显示分页条。 false
　　totaltime integer 只读参数。用于记录装入XML和JSON数据的时间。 0
　　treedatatype mixed 定义初始数据类型 null
　　treeGrid boolean 启用（禁用）TreeGrid。 false
　　treeGridModel string 定义TreeGrid的方法。可以是nested或adjacency。 nested
　　treeIcons array 此数组设置TreeGrid中使用的图标。图标应是UI theme中的有效图标。缺省为 plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'
　　treeReader array 扩展表格的colModel。这里定义的字段将添加到colModel的尾部并隐藏。服务器将返回这些字段的值。
　　tree_root_level numeric 确定treeGrid相对于根元素的级别。 0
　　url string 请求数据的url地址 null
　　userData array 此数组保存请求的自定义信息，可随时使用 empty
　　userDataOnFooter boolean 到为true时， userData直接放置在页脚。 false
　　viewrecords boolean 是否在浏览导航栏显示记录总数 false
　　viewsortcols array 定义表头中排序图标的外观和行为。缺省为[false,'vertical',true]。
第一个参数设定是否显示所有定义了排序的列旁显示图标。缺省的false表示只有当前排序列旁的图标显示。设为true可使所有可排序列都显示图标。
第二个参数设定排序图标如何放置。vertical为垂直放置，horizontal为水平放置。
第三个参数设定点击功能。True表示表头点击排序，false表示只点击排序图标排序。若将此参数设为false时，请确保第一个参数为true，否则将无法排序。
　　width number 若为设置，表格的宽度为colModel 中定义的所有列宽度的总和。若设置了该项，每列的初始宽度按照shrinkToFit 设置的值 none
　　xmlReader array 描述预期的XML数据结构的数组。
　　ColModel API
　　colModel属性以数组的形式定义各个表格列。这是jqGrid中很重要的部分。语法为：

jQuery("#gridid").jqGrid(
...
colModel: [ name:'name1', index:'index1'..., ..., ... ],
...
);

　　属性 类型 描述 默认值
　　align string 定义表格单元格（非表头）的对齐方式，可取值：left, center, right. left
　　classes string 此属性用于定义列的类名，当有多个类名时，用空格间隔，例如：“class1 class2”。在表格的CSS中，有一个预定义的类ui-ellipsis用于定义特定的行 empty
　　datefmt string 日期格式，可用/，-和.。作为间隔符。y、Y、yyyy用于4位年，YY、yy用于2位的月，d、dd用于日期 Y-m-d
　　defval string 搜索字段的缺省值，此参数只用于自定义搜索是的初始值。 empty
　　editable boolean 定义字段是否可编辑，用于单元格编辑、行编辑和表单模式 false
　　editoptions array 根据edittype 参数定义可用的值数组 empty
　　editrules array 设置可编辑字段的补充规则 empty
　　edittype string 定义行编辑和表单模式的编辑类型，可以是text、textarea、select、checkbox、 password、button、image和file。 text
　　fixed boolean 若设为true，即使shrinkToFit设置为true，列宽也不允许重新计算。GridWidth方法改变表格宽度时，列宽也不会改变。 false
　　formoptions array 定义表单编辑的各种选项 empty
　　hidedlg boolean 若设置为true，该列将不出现在模式对话框中，用户可以此控制列的显示或隐藏 false
　　hidden boolean 定义初始化时，列是否隐藏。 false
　　index string 通过sidx参数设置排序时的索引名。 empty
　　key boolean 在未从服务器获得ID的情况下，该列可设置为行ID。只有一列可设置该属性，若出现多列，表格只采用将第一个设置了该属性的列，其他列忽略。 false
　　label string 当colNames数组为空时，定义此列的标题。若colNames数组和此属性都为空，标题为该列的name属性值。 none
　　name string 设置列在表格中的唯一名称，此属性是必须的。或者使用保留字subgrid、cb和rn. Required
　　resizable boolean 定义是否可变列宽 true
　　sortable boolean 定义是否可以排序 true
　　sorttype mixed 当datatype为local时，用于定义排序列类型。可取int/integer（整数）、float/number/currency（小数）、date（日期）、text（文本） text
　　title boolean 当设置为false时，鼠标滑向单元格时不显示title属性 true
　　width number 设置列的初始宽度，可用pixels和百分比本回答被提问者和网友采纳

jqGrid的若干种用法

支持多种类型的数据集合作为数据源

　　jqGrid可以绑定三种类型的数据:XML,JSON和数组。使用不同的数据类型主要是设置datatype属性,它的值分别为‘xml‘,‘json‘,‘local‘(数组)

$("#grid1").jqgrid(
........
datatype: "xml",
........
);

　　下面则列举各种数据类型的格式

　　XML格式：　

<rows>
  <page></page>
  <total></total>
  <records></records>
  <row id="rowid">
    <cell>value1</cell>
    .........
    <cell>valueN</cell>
  </row>
</rows>

　　json格式

{"page":"页号","rows":[{name1:‘value1‘,name2:‘value2‘,.....nameN:‘valueN‘},.... {....} ], "total":记录数,"records":总记录数}

　　数组格式

var datas=[
{name1:‘value1‘,name2:‘value2‘,..... nameN:‘valueN‘},
.... 
{....} 
];

//把数据添加到jqgrid里
for (var i = 0; i <= mydata.length; i++) {
    jQuery("#grid1").jqGrid(‘addRowData‘, i + 1, mydata[i]);
}

或者设置data属性

 

$("#grid1").jqgrid(
......
       data:mydata,
　　　　datatype:‘local‘,
.......
);

 

 

统计运算的功能

　　将footerrow设为true,绑定gridComplete事件。

$("#grid1").jqgrid(
......
        footerrow: true,
        gridComplete: completeMethod,
.......
);

    function completeMethod()
    {
        var sum_amount=$("#grid1").getCol(‘amount‘,false,‘sum‘);
        var sum_tax=$("#grid1").getCol(‘tax‘,false,‘sum‘);
        var sum_total=$("#grid1").getCol(‘total‘,false,‘sum‘);
        $("#grid1").footerData(‘set‘, { name: ‘合计:‘, amount: sum_amount, tax: sum_tax, total: sum_total });
   }

　　统计时利用getCol方法，第一个参数为colMode的name值，第二个设为false，否则会返回一个数组而不是但一个数据，第三个是设置统计方式，有‘sum‘,‘avg‘和‘count‘。

排序

　　只要单击列的标题，就可以对该列进行升序或降序的排序。设置该列是否允许排序，在列的属性里设置sortable，同时对于不同的数据类型，也需要设置其相应的排序类型sorttype，类型有int/integer 整型,float/number/currency 浮点型，date 日期，text  文本，function 定义函数来实现自定的排序规则。

 

$("#grid1").jqgrid(

........
colModel: [

.........
       { name: ‘id‘, index: ‘id‘, width: 60, myexport: true, editable: true , sorttype: "int", sortable: true},
.............

],
........
);

 

 

分组

最简单的分组

 

还有复杂一点的排序，那还是上jqGrid Demos看看吧！

筛选

　　jqGrid的筛选并不是在grid里面的内容进行筛选，其实是对数据库里的数据筛选查询。

　　html:

<table id="s2list"></table>
 <div id="s2pager"></div>

　　javascript:

 jQuery("#s3list").jqGrid(‘navGrid‘,‘#s3pager‘,{edit:false,add:false,del:false,search:false,refresh:false});
 jQuery("#s3list").jqGrid(‘navButtonAdd‘,"#s3pager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :‘ui-icon-pin-s‘, 
　　　　onClickButton:function(){
　　　　　　 mygrid[0].toggleToolbar() 
　　}
});
jQuery("#s3list").jqGrid(‘navButtonAdd‘,"#s3pager",{caption:"Clear",title:"Clear Search",buttonicon :‘ui-icon-refresh‘,
　　　　 onClickButton:function(){ 
　　　　　　mygrid[0].clearToolbar() 
　　}
}); 
jQuery("#s3list").jqGrid(‘filterToolbar‘);

 

增删改查工具栏及分页栏
　　jqGrid附带了分页栏，在分页栏上可以添加增加，修改，删除以及查询按钮。

　　在html多添加一个层，这个层就存放分页栏：

<div id="pager"></div>

$("#grid1").jqgrid(
......
        pager:"#pager",
　　　　　//通过这属性还可以设置可选的页面大小
　　　　 rowList: [10, 20, 30],
.......
);
//这里的 edit,add等就是对应编辑新增等按钮，通过设置布尔值来决定是否显示
jQuery("#grid1").jqGrid(‘navGrid‘, ‘#pager‘, { edit: true, add: true, del: true, search: true, refresh: true});
//或者用这种形式

　　jQuery("#grid1").jqGrid(‘navGrid‘, ‘#pager‘,
　　　　{}, //options
　　　　{height: 280, reloadAfterSubmit: false }, // edit options
　　　　{height: 280, reloadAfterSubmit: false }, // add options
　　　　{reloadAfterSubmit: false }, // del options
　　　　{} // search options
　　);

记得要在colModel里给可供编辑的列的editable赋值为true，才可以编辑。

 

分页读取数据

 　　既然上面已提及到分页，下面则介绍另一种分页方式，通过滚动条进行翻页。在这种分页方式中，数据库的所有数据并非一下子读取出来填充到grid中，而是通过滚动条的位置得出当前浏览到的哪一页数据，才从数据库读取那部分的数据。

$("#grid1").jqgrid(
......
        //设置了这个才会根据滚动分页读取数据
        scroll: 1,
　　  //设置页面的大小
　　  rowNum: 10,
.......
);

下面的例子只是用到本地的数据，同样也是实现了滚动翻页的效果

滚动条翻页

 

父子表

　　通过以下设置可使用子表

$("#grid1").jqgrid(
......
     //启用子表
        subGrid : true,
    subGridUrl: ‘............‘,
    //设置子表的属性
    subGridModel: [{
                  name  : [‘name1‘,‘name2‘,......,‘nameN‘], 
                   width : [width1,width2,.....,widthN] } ],
.......
);        

 

这里子表的设置只是最基本的，更多属性的资料可参阅 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid

 

Get/Set 单元格的值

　　获取某个单元格的值就调用getCell(rowid, iCol) 。iCol既可以是当前列在colModel中的位置索引也可以是name值。注意：在编辑行或者单元格时不能使用此方法，此时返回的并不是改变的值，而是原始值。

　　设置某个单元格的值就调用setCell(rowid,colname, data, class, properties)。rowid：当前行id；colname：列名称，也可以是列的位置索引，从0开始；data：改变单元格的内容，如果为空则不更 新；class：如果是string则会使用addClass方法将其加入到单元格的css中，如果是array则会直接加到style属性中；properties：设置单元格属性colModel。

　　当然也可以Get/Set 行或者列，在这里可查阅更多get/set/add的方法http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

 

 数据验证

 　　通过设置colModel的editrules属性，可以对输入的数据进行验证

jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:‘price‘, ..., editrules:{edithidden:true, required:true....}, editable:true },
      ...
   ]
...
});

下面则是可用的验证选项

选项	类型	描述
edithidden	boolean	这个选项只适用于表单编辑模块。默认情况下隐藏的字段是不可编辑的。如果该字段隐藏在grid中并且edithidden设置为true，当调用增加或编辑方法时该字段就可以编辑。
required	boolean	（true或false）如果设置为true，该值将被检查，如果为空，错误信息将被显示。
number	boolean	（true或false）如果设置为true，该值将被检查，如果这不是一个数字，一个错误信息将被显示。
integer	boolean	（true或false）如果设置为true，该值将被检查，如果这不是一个整数，错误信息将被显示。
minValue	number(integer)	如果设置了值，单元格的值将被检查，如果单元格的值小于这个值，就会显示错误信息。
maxValue	number(integer)	如果设置了值，单元格的值将被检查，如果单元格的值大于这个值，就会显示错误信息。
email	boolean	如果设置为true，则该值将被检查，如果这是无效的电子邮箱地址，将显示一条错误消息。
url	boolean	如果设置为true，则该值将被检查，如果这不是有效的URL，将显示一条错误消息。
date	boolean	如果设置为true，则该值将被检查，如果不是有效的日期，将显示一条错误消息。
time	boolean	如果设置为true，则该值将被检查，如果这不是有效的时间，错误信息将被显示。目前只支持hh：mm格式和可选的AM / PM结束时
custom	boolean	如果设置为true，允许通过自定义功能自定义检查规则的定义。
custom_func	function	当custom设置为true时，function一定要使用。传递到此函数的参数是value,该值一定要被检查和命名。该函数一定要返回由以下参数组成的数组:1，true/false。2，返回给用户的错误信息。例如[false,"请输入正确的数据"]。

 

设置条带状的列

jQuery("#ghcs").jqGrid(‘setGroupHeaders‘, {
　//设置列头是否启用colSpan效果
  useColSpanStyle: false, 
  groupHeaders:[
    {　　
　　　　startColumnName: ‘colName‘,   //合并列组的第一个列名

　　　　numberOfColumns: number,  //合并列的数量
　　　　titleText: ‘title‘ //合并列的标题
　　　},
　　　　........

  ]    
}

 

 

编辑器

　　jqGrid的模板列自带了一些很基本的编辑器，包括：‘text‘单行文本框, ‘textarea‘多行文本框, ‘select‘下拉框, ‘checkbox‘复选框, ‘password‘密码框, ‘button‘按钮, ‘image‘图片按钮, ‘file‘文件上传框 以及‘custom‘自定义编辑器。

在colModel里设置edittype则可

jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:‘price‘, ..., editable:true, edittype:‘text‘,editoptions: {size:10, maxlength: 15}....},
　　　　 ... 
　　] 
　　... 
});

其中editoption是对编辑器的一些设置，文本框就可以设置size,maxlength等；复选框可设置value ；

ditoptions: { value:"Yes:No" }

下拉框以这种形式

editoptions: { value: “val1:text1; val2:text2; val3:text3” }

更多资料参阅http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype

 

模板列调用其他编辑器

上面介绍的编辑器只是使用了html的表单元素而已，下面介绍的是调用插件。

<script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>

<script type="text/javascript">

        function InitDatePicker(cl) {
            $(cl).click(function () {
                WdatePicker();
            });
        }
        ....

        jQuery("#grid_id").jqGrid({
    ...
       colModel: [ 
              ... 
              {name:‘date‘, ..., editable:true, edittype:‘text‘,editoptions: {dataInit:InitDatePicker}....},
　　　　     ... 
　　        ] ,
　　    ... 
    });

    .......

</script>

这里调用了My97DatePicker插件作为日历编辑器。

如果想在一个模板列里放置多种控件，可以用一下方式

 jQuery("#grid_id").jqGrid({
    ...
      afterInsertRow: function (rowid, aData) {
         var  controls=" ";  //放置在模板里的控件
         .......
        $("#grid_id").jqGrid(‘setCell‘, rowid, ‘tag‘, controls);
    }
　　    ... 
    });

这个其实是在grid的单元格内通过编辑其html来实现。

 

模仿Excel移动选择单元格

　　设置单元格编辑模式后，可以通过上下左右的导航键跳到需要编辑的单元格，按回车进入编辑状态，按Esc键不保存更改内容，按回车保存更改内容

jQuery("#grid_id").jqGrid({
    ...
    cellEdit:true,
     cellsubmit:‘clientArray‘,  //定义了单元格内容保存位置 默认值是‘remote‘
　　    ... 
    });