jqgird 加 Datepicker 小测试

最新推荐文章于 2021-04-08 18:01:07 发布

weixin_33736832

最新推荐文章于 2021-04-08 18:01:07 发布

阅读量81

点赞数

文章标签： python json javascript ViewUI

原文链接：https://my.oschina.net/u/1036767/blog/713589

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

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

转载于:https://my.oschina.net/u/1036767/blog/713589