jqgird 加 Datepicker 小測試

先說下本身的項目需求，就是須要在表格生成後點擊單元格要出現日期選擇器，我使用的是jquery本身的Datepicker，其餘日期插件使用方法大同小異（主要是在日期插件配置上不一樣）

引入插件的步驟這裏就不講了，相信用到這幾個插件的小夥伴都知道怎麼作。

步驟： 1.要將相應列的 editable 屬性設爲 true

$("#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 方法後面加上插件

afterEditCell : function(rowid, cellname, value, iRow, iCol) { 
                   var cellId = iRow + "_" + cellname; 
                   $("#" + cellId).datepicker({ dateFormat: "yy-mm-dd" });  
                }

以後再點擊生產日期列 下面的單元格時就能夠出現日期選擇器了。