[轉]jQuery EasyUI自定義DataGrid的Editor

原文地址:http://www.jeasyuicn.com/post-3.htmlhtml

官網datagrid的api：http://jquery-easyui.wikidot.com/document:datagridjquery

首先，先看看官方的editor的介紹：api

能夠看到若是咱們要自定義一個editor，須要實現四個方法（init，getValue,setValue,resize)。app

下面是我本身擴展的一個datetimebox類型ide

 
      01 
      $.extend($.fn.datagrid.defaults.editors, { 
     
      02 
           datetimebox: {//datetimebox就是你要自定義editor的名稱 
     
      03 
               init: function(container, options){ 
     
      04 
                   var input = $('<input class="easyuidatetimebox">').appendTo(container); 
     
      05 
                   return input.datetimebox({ 
     
      06 
                       formatter:function(date){ 
     
      07 
                           return new Date(date).format("yyyy-MM-dd hh:mm:ss"); 
     
      08 
                       } 
     
      09 
                   }); 
     
      10 
               }, 
     
      11 
               getValue: function(target){ 
     
      12 
                   return $(target).parent().find('input.combo-value').val(); 
     
      13 
              }, 
     
      14 
               setValue: function(target, value){ 
     
      15 
                   $(target).datetimebox("setValue",value); 
     
      16 
               }, 
     
      17 
               resize: function(target, width){ 
     
      18 
                  var input = $(target); 
     
      19 
                  if ($.boxModel == true){ 
     
      20 
                       input.width(width - (input.outerWidth() - input.width())); 
     
      21 
                  } else { 
     
      22 
                       input.width(width); 
     
      23 
                   } 
     
      24 
               } 
     
      25 
           } 
     
      26 
      });

這是最終出來的效果：post

使用方法：ui

<th field="datetime" width="150" editor="datetimebox">datetime</th>this

或者:spa

在配置裏面prototype

{

field:"dataTime",

editor:"datetimebox"

}

通常咱們只許要注意init，getValue和setValue這三個方法，最主要的仍是init的方法的實現。須要注意的是，這裏的set和getValue方法都是針對於editor的，是給editor設值和獲取值的。

上面例子中涉及到的format方法：

 1 //時間格式化
 2 Date.prototype.format = function(format){
 3     /*
 4      * eg:format="yyyy-MM-dd hh:mm:ss";
 5      */
 6     if(!format){
 7         format = "yyyy-MM-dd hh:mm:ss";
 8     }
 9 
10     var o = {
11             "M+": this.getMonth() + 1, // month
12             "d+": this.getDate(), // day
13             "h+": this.getHours(), // hour
14             "m+": this.getMinutes(), // minute
15             "s+": this.getSeconds(), // second
16            "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
17            "S": this.getMilliseconds()
18             // millisecond
19    };
20 
21    if (/(y+)/.test(format)) {
22         format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
23     }
24 
25     for (var k in o) {
26         if (new RegExp("(" + k + ")").test(format)) { 
27             format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" +o[k]).length));
28        }
29     }
30     return format;
31 };