jqgird 加 Datepicker 小测试

先说下本身的项目需求,就是须要在表格生成后点击单元格要出现日期选择器,我使用的是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" });  
                }

以后再点击生产日期列 下面的单元格时就能够出现日期选择器了。插件

相关文章
相关标签/搜索