先说下本身的项目需求,就是须要在表格生成后点击单元格要出现日期选择器,我使用的是jquery本身的Datepicker,其余日期插件使用方法大同小异(主要是在日期插件配置上不一样)jquery
引入插件的步骤这里就不讲了,相信用到这几个插件的小伙伴都知道怎么作。json
步骤: 1.要将相应列的 editable 属性设为 trueui
$("#grid").jqGrid({ url : //数据连接url, datatype : "json", mtype : "GET", colNames : [ "uuid", "名称", "生产日期" ,"备注"], colModel : [ { name : "uuid", index : "uuid", width : "130", hidden : true }, { name : "name", index : "name", width : "130", editable : true }, { name : "fromDate", index : "fromDate", width : "130", editable : true },{ name : "remark", index : "remark", width : "130", editable : true, } ], rowList : [ 10, 20, 50, 100, 200 ], rowId : "uuid", pager : "#pager", sortname : "name", recordpos : "right", viewrecords : true, sortorder : "asc", multiselect : false, autowidth : true, height : "auto", multiselect : true, jsonReader : { root : "dataList", total : "totalPages", page : "currentPage", records : "totalRows", repeatitems : false }, sortable : false, cellEdit : true,// 表示表格可编辑 cellsubmit : "clientArray", // 表示在本地进行修改 afterEditCell : function(rowid, cellname, value, iRow, iCol) { var cellId = iRow + "_" + cellname; $("#" + cellId).datepicker({ dateFormat: "yy-mm-dd" }); } });
2 在aferEditCell 方法后面加上插件url
afterEditCell : function(rowid, cellname, value, iRow, iCol) { var cellId = iRow + "_" + cellname; $("#" + cellId).datepicker({ dateFormat: "yy-mm-dd" }); }
以后再点击生产日期列 下面的单元格时就能够出现日期选择器了。插件