这个例子展示了不同的编辑输入方式,这是通过两个新的选项实现的.
- edittype :可能的值有text(默认),checkbox, textarea 和select。
- editoptions :这是一个数组,包含了针对控制编辑方式不同的参数选项。
尝试去点击某一行。
<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="rowed5"></table> ···代码省略··· </body> </html>javascript代码举例
$(function(){ pageInit(); }); function pageInit(){ var lastsel2; jQuery("#rowed5").jqGrid({ datatype : "local", height : 250, colNames : [ 'ID Number', 'Name', 'Stock', 'Ship via', 'Notes' ], colModel : [ {name : 'id',index : 'id',width : 90,sorttype : "int",editable : true}, {name : 'name',index : 'name',width : 150,editable : true,editoptions : {size : "20",maxlength : "30"}}, {name : 'stock',index : 'stock',width : 60,editable : true,edittype : "checkbox",editoptions : {value : "Yes:No"}}, {name : 'ship',index : 'ship',width : 90,editable : true,edittype : "select",editoptions : {value : "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}}, {name : 'note',index : 'note',width : 200,sortable : false,editable : true,edittype : "textarea",editoptions : {rows : "2",cols : "10"}} ], onSelectRow : function(id) { if (id && id !== lastsel2) { jQuery('#rowed5').jqGrid('restoreRow', lastsel2); jQuery('#rowed5').jqGrid('editRow', id, true); lastsel2 = id; } }, editurl : ctx+"/RowEditing", caption : "Input Types" }); var mydata2 = [ {id : "12345",name : "Desktop Computer",note : "note",stock : "Yes",ship : "FedEx"}, {id : "23456",name : "Laptop",note : "Long text ",stock : "Yes",ship : "InTime"}, {id : "34567",name : "LCD Monitor",note : "note3",stock : "Yes",ship : "TNT"}, {id : "45678",name : "Speakers",note : "note",stock : "No",ship : "ARAMEX"}, {id : "56789",name : "Laser Printer",note : "note2",stock : "Yes",ship : "FedEx"}, {id : "67890",name : "Play Station",note : "note3",stock : "No",ship : "FedEx"}, {id : "76543",name : "Mobile Telephone",note : "note",stock : "Yes",ship : "ARAMEX"}, {id : "87654",name : "Server",note : "note2",stock : "Yes",ship : "TNT"}, {id : "98765",name : "Matrix Printer",note : "note3",stock : "No",ship : "FedEx"} ]; for ( var i = 0; i < mydata2.length; i++){ jQuery("#rowed5").jqGrid('addRowData', mydata2[i].id, mydata2[i]); } }