使X-editable完美支持Bootstrap-DatePicker所有功能

  • A+
所属分类:X-editable

使X-editable完美支持Bootstrap-DatePicker所有功能

BootstrapTable 行内编辑解决方案:x-editable

一、x-editable组件介绍

x-editable组件是一个用于创建可编辑弹出框的插件,它支持三种风格的样式:bootstrap、Jquery UI、Jquery。大致效果如下图:
使X-editable完美支持Bootstrap-DatePicker所有功能

首先还是给出开源地址吧

x-editable开源地址:https://github.com/vitalets/x-editable

x-editable文档地址:http://vitalets.github.io/x-editable/docs.html

x-editable在线Demo:http://vitalets.github.io/x-editable/demo-bs3.html

  1. 修改后bootstrap-editable.js下载地址:https://pan.baidu.com/s/1o7B8MN4  

修改bootstrap-editable.js文件

  1. 修改显示窗口  
  2. /** 
  3. Shows container with form 
  4. @method show() 
  5. @param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true. 
  6. **/  
  7. /* Note: poshytip owerwrites this method totally! */            
  8. show: function (closeAll) {  
  9.     this.$element.addClass('editable-open');  
  10.     if(closeAll !== false) {  
  11.         //close all open containers (except this)  
  12.         this.closeOthers(this.$element[0]);    
  13.     }          
  14.     //show container itself  
  15.     this.innerShow();  
  16.     this.tip().addClass(this.containerClass);  
  17.     /* 
  18.     Currently, form is re-rendered on every show.  
  19.     The main reason is that we dont know, what will container do with content when closed: 
  20.     remove(), detach() or just hide() - it depends on container.          
  21.     Detaching form itself before hide and re-insert before show is good solution,  
  22.     but visually it looks ugly --> container changes size before hide.   
  23.     */               
  24.     //if form already exist - delete previous data   
  25.     if(this.$form) {  
  26.         //todo: destroy prev data!  
  27.         //this.$form.destroy();  
  28.     }  
  29.     this.$form = $('<div>');      
  30.     //insert form into container body  
  31.     if(this.tip().is(this.innerCss)) {  
  32.         //for inline container  
  33.         this.tip().append(this.$form);   
  34.     } else {  
  35.         this.tip().find(this.innerCss).append(this.$form);  
  36.     }   
  37.               
  38.     //render form  
  39.     this.renderForm();  
  40. },  
  41. 修改为如下代码  
  42. /** 
  43. Shows container with form 
  44. @method show() 
  45. @param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true. 
  46. **/  
  47. /* Note: poshytip owerwrites this method totally! */            
  48. show: function (closeAll) {  
  49.     this.$element.addClass('editable-open');  
  50.     if(closeAll !== false) {  
  51.         //close all open containers (except this)  
  52.         this.closeOthers(this.$element[0]);    
  53.     }          
  54.     //show container itself  
  55.     this.innerShow();  
  56.     this.tip().addClass(this.containerClass);  
  57.     /* 
  58.     Currently, form is re-rendered on every show.  
  59.     The main reason is that we dont know, what will container do with content when closed: 
  60.     remove(), detach() or just hide() - it depends on container.          
  61.     Detaching form itself before hide and re-insert before show is good solution,  
  62.     but visually it looks ugly --> container changes size before hide.   
  63.     */               
  64.     //if form already exist - delete previous data   
  65.     if(this.$form) {  
  66.         //todo: destroy prev data!  
  67.         //this.$form.destroy();  
  68.     }  
  69.     this.$form = $('<div>');      
  70.     //insert form into container body  
  71.     if(this.tip().is(this.innerCss)) {  
  72.         //for inline container  
  73.         this.tip().append(this.$form);   
  74.     } else {  
  75.         this.tip().find(this.innerCss).append(this.$form);  
  76.     }   
  77.               
  78.     //render form  
  79.     this.renderForm();  
  80.      实例化日期控件  
  81. $(function () {  
  82.     $(".datepicker-Date").datepicker({  
  83.         language: "zh-CN",  
  84.         format: "yyyy-mm-dd",  
  85.         minViewMode: 0,  
  86.         keyboardNavigation: false,  
  87.         forceParse: false,  
  88.         autoclose: true,  
  89.         todayHighlight: true  
  90.     });  
  91.     $(".datepicker-Mon").datepicker({  
  92.         language: "zh-CN",  
  93.         format: "yyyy-mm",  
  94.         minViewMode: 1,  
  95.         keyboardNavigation: false,  
  96.         forceParse: false,  
  97.         autoclose: true,  
  98.         todayHighlight: true  
  99.     });  
  100. });  
  101. },  
  1. 修改获取焦点方法  
  2. Activates input. For text it sets focus.  
  3. activate: function() {  
  4.     if(this.$input.is(':visible')) {  
  5.         this.$input.focus();  
  6.     }  
  7. },  
  8. 修改为如下代码  
  9. activate: function() {  
  10.     if (this.$input.is(':visible')) {  
  11.         //移除焦点  
  12.         if (this.$input.hasClass("RemoveFocus") != true) { this.$input.focus(); }  
  13.         //this.$input.focus();  
  14.         $.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length);  
  15.         if(this.toggleClear) {  
  16.             this.toggleClear();  
  17.         }  
  18.     }  
  19. },  

使用方法

  1.  inputclass: 'RemoveFocus datepicker-Date',  
  2. ----------------------------------------------  
  3. 目前只扩展了两个 后期有需要自行扩展  
  4. RemoveFocus datepicker-Date 格式yyyy-mm-dd  
  5. RemoveFocus datepicker-Mon 格式yyyy-mm  
钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: