侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

jqgird 加 Datepicker 小测试

2024-05-08 星期三 / 0 评论 / 0 点赞 / 58 阅读 / 3326 字

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

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

广告 广告

评论区