碼上歡樂
相關內容    簡體    繁體

jeditable參數詳解

本文轉載自   查看原文   2016-04-26 09:43   3017    js jquery

一、導入js文件

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.jeditable.js"></script>

二、基本案例

$('.editable').editable('editable.php',{
    type:'textarea',//實時編輯input框的type
    cancel:'取消',//取消編輯按鈕的文字
    submit:'確定',//確認提交按鈕的文字
    indicator:'保存中...',//提交處理過程中顯示的提示文字
    tooltip:'單擊編輯...'//鼠標懸停時的提示信息
});

把以上代碼放到頁面加載函數中，就實現的基本的實時編輯。editable.php是點擊確定后ajax提交的地址。以上參數只是實現能出來編輯框而已，確定后數據如何傳到后台處理，處理完后又怎么顯示出來，才是最重要的。下面看插件完整的參數。

三、詳細參數

這二三十個參數，並沒有每個都認真測試，即使這樣也搞了大半天。要是有什么錯誤，請大家及時指出。或許看完參數介紹仍然一頭霧水，但至少有個總體印象了。下面以具體例子說明用法：

參數名

值類型

默認值/參數

說明

event

String

click

 觸發編輯的事件，常用的是click或dblclick。

method

String

POST

 內容ajax提交的方式。

callback

Function

value, settings

 內容提交完成后的回調函數。接收兩個參數，value是編輯后的內容，setings為插件所有的參數。在函數內還可以使用this,代表調用editable的dom對象，如基本案例中的class為editable的節點元素(一般為td或span等文字內容容器)。

name

String

value

 觸發編輯事件后會生成一個form表單，表單內含一個input框，這便是該input框name屬性的值。如平時寫的 name = “username”，這里name=”value”。該參數的值是ajax提交時默認提交的一個參數名，對應的值為input框的內容(也即該 input框的value)。

id

String

id

 同name參數，該參數的值是ajax提交時默認提交的另一個參數名，對應的值是調用editable的原dom對象的id值。

submitdata

Mixed

   提交的數據，默認會提交參數name和參數id的值，通過該參數追加傳遞的數據。該參數可以直接寫一個hash數據，如 {a:’1’, b:’2’}，但一般是動態數據，通過像callback一樣的函數返回一個hash數據。如function(value, settings){return {isempty:$(this).attr(‘isempty’)};}。注意：這里的value是編輯前的值，編輯后的內容自動通過name參數的值 (如默認的value)傳遞。

type

String

text

 生成的form表單內input框的類型，有text、select、textarea三種。當是select時，要顯 示的數據應該是由下面的loadurl或者data參數提供的hash。如果想用第三方插件進行輸入，如時間選擇器等，就需要添加type，文章下面有討 論。

rows

Interger

   如果type為textarea，該參數的值就是其rows。

cols

Interger

   如果type為textarea，該參數的值就是其cols。

height

Interger

auto

 form表單內input框的height屬性的值。html5的input框才有height屬性，但設置了好像沒什么用。要控制input框的高，還是通過css吧。

width

Interger

auto

 同height參數。

cssclass

String

   生成的form表單的class樣式名。控制其內部的input框的寬高，可以通過這個css樣式，如該參數的值為editable，則.editable input{width: 20px,  height: 10px}。

style

String

   生成的form表單的style屬性。如display: inline。前端不懂，沒看到什么效果。

loadurl

String

   通常情況下要編輯的數據都是頁面上顯示的，但也可以通過這個參數的地址獲取數據來展示在編輯框內進行編輯並提交。默認會攜帶觸發editable的dom對象的id參數。

loadtype

String

GET

 loadurl獲取數據的請求方式。說默認為GET，但不寫不會發起請求，還是定上為好。

loaddata

Mixed

   loadurl請求時額外攜帶的參數，可參見submitdata。

loadtext

String

Loading…

 loadurl請求過程中顯示的提醒信息，如’數據請求中，請稍候…’。

data

Mixed

   編輯框內顯示的數據，按以下順序來尋找並優先顯示：loadurl參數請求的數據—>data參數的數據—>頁面上已有的數據。data可以直接是一個字符串，也可以是一個像callback中的函數，在需要對數據進行一番處理再編輯時有用。

onblur

String

cancle

 編輯框失去焦點時進行的操作。可以cancle、submit、ignore三個值。cancle：編輯框消失，不進行任何更改；submit：進行提交，相當於點擊了確認按鈕；ignore:不進任何操作，保留編輯框。

indicator

String

   提交過程中顯示的提醒，在調用callback函數之前顯示。

tooltip

String

   鼠標懸停在等編輯元素上面顯示的文字提醒，就是給待編輯元素加了title。

placeholder

String

click to Edit

 當編輯元素為空值時出現在待編輯元素位置的文字

ajaxoptions

Hash

   ajax提交時ajax的設置，如url,type,data,async等，一般不用寫，上面都基本包括了。

onsubmit

Function

settings,original

 在submit提交前執行。接收兩個參數，settings為當前設置對象，orininal為調用editable的dom對象，相當於callback中的this。該參數中的this是form表單這個dom對象。

onreset

Function

settings,original

 在reset前執行，不知哪里來的reset了，不懂。

onerror

Function

settings,original

 在發生錯誤時執行。

submit

String

   確認提交按鈕的值，沒有則沒有該按鈕。

cancel

String

   取消編輯按鈕的值，沒有則沒有該按鈕。

PS:現在時間2014年6月2日 23：22，搞了這么久網絡又坑爹，沒什么心情了。凌晨有蘋果發布會，暫時到這里吧。

嗯，現在已經是6月23日22：31了，感覺還是把它寫完吧。

先來看看咱們要完成的這個例子的總體效果如下圖，一個常見的table表格，包含用戶的用戶名、性別、出生年月等，在頁面實時修改各屬性的值。為了演效果，還把發送到后台的數據的源代碼輸出。

jeditable詳細使用文檔

最終效果

html代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< tr >
     < th >序號</ th >
     < th >姓名</ th >
     < th >性別</ th >
     < th >聯系電話</ th >
     < th >出生年月</ th >
     < th >喜歡顏色</ th >
     < th width = "30%" >備注</ th >
</ tr >
< tr id = "1" >
     < td >1</ td >
     < td class = "username" field = "username" isempty = "0" >張三</ td >
     < td class = "gender" field = "gender" >男</ td >
     < td class = "phone" field = "phone" >134564321</ td >
     < td class = "birthday" field = "birthday" >1989-12-13</ td >              
     < td >< span class = "color" field = "color" >cccccc</ span >< span class = "colorshow" ></ span ></ td >
     < td class = "comment" field = "comment" >我是屌絲</ td >
</ tr >

以上為頭與第一行。要修改一個屬性的值，一般需要知道它的id，字段名，以及新的值。這里id在其父節點tr內，字段名是field屬性，新值插件的value參數會傳遞，另外比如是否可以為空isempty、修改之前的值都可以一並傳遞到后台。

姓名字段的修改：

姓名字段是最常見的默認的input類型即可完成，難點在於要在jeditable插件基礎上進行驗證，限制不能為空與名字過長之類的。可以直接使 用jquery.validate.js插件進行驗證，大大簡化了驗證工作。先來看一下使用了jeditable進行編輯的時候發生了什么：

jeditable詳細使用文檔

編輯時的html結構

可以看到，插件是在要編輯的dom元素外包一個form表單，把頁面上的原值顯示在input框內供修改。驗證操作寫在提交之前的onsubmit事件內。具體js要點及代碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$( ".username" ).editable( "editable.php" , {
     event: 'dblclick' ,
     tooltip: '雙擊編輯...' ,
     indicator: '保存中...' ,
     submit: '確定' ,
     onblur: 'ignore' , //方便調試樣式
     // width: '20px',//無效
     cssclass: 'username' , //在css樣式中通過.username input{width:60px;}控制input框寬度
     submitdata: function (value, settings) {
         $( "#tip" ).text(
             "id=" +$( this ).parent().attr( 'id' )+ "&" +
             "field=" +$( this ).attr( 'field' )+ "&" +
             "isempty=" +$( this ).attr( 'isempty' )+ "&" +
             "oldvalue=" +value
         );
         return {id: $( this ).parent().attr( 'id' ), field: $( this ).attr( 'field' ), oldvalue: value, isempty: $( this ).attr( 'isempty' )};
     },
     onsubmit: function (settings, original) {
         //簡單驗證
         // var newValue = $(original).find('input').val();
         // newValue = $.trim(newValue);
         // if(newValue == '') {
         //  alert('不能為空！');
         //  return false;
         // }
         //使用jquery.validate.js進行驗證
         $( this ).validate({
             errorPlacement: function (error, element) {
                 var form = $(element).parent();
                 form.next().remove();
                 form.parent().append(error);
             },
             success: function (error, element) {
                 var form = $(element).parent();
                 form.next().remove();
             },
             rules: {
                 value:{required:!0, minlength:2, maxlength:10}
             },
             messages: {
                 value:{
                     required: '不能為空' ,
                     minlength: '不能少於2字符' ,
                     maxlength: '名字過長了吧' ,
                 }
             }
         });
         return $( this ).valid();
     },
     callback: function (value, settings) {
         $( "#tip" ).text( function (index, orignial){ return orignial+ "&value=" +value});
     }
});

性別字段的修改：

性別字段就不是默認的text類型了，需要用到select。這里傳遞到后台的時候value是實際值1，2，3之類的，但callback回調中 的value是頁面看到的男、女、人妖，為顯示實際的值做了個轉換。submitdata中的value是原值，也是頁面顯示的男、女、人妖，實際傳遞時 也是傳遞男、女、人妖。具體代碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$( ".gender" ).editable( "editable.php" , {
     event: 'dblclick' ,
     tooltip: '雙擊編輯...' ,
     indicator: '保存中...' ,
     submit: '確定' ,
     onblur: 'ignore' ,
     type: 'select' , //類型不再是默認的text
     data: { '1' : '男' , '2' : '女' , '3' : '人妖' },
     submitdata: function (value, settings) {
         $( "#tip" ).text(
             "id=" +$( this ).parent().attr( 'id' )+ "&" +
             "field=" +$( this ).attr( 'field' )+ "&" +
             "oldvalue=" +value
         );
         return {id: $( this ).parent().attr( 'id' ), field: $( this ).attr( 'field' ), oldvalue: value};
     },
     callback: function (value, settings) {
         switch (value) {
             case '男' :
                 value = 1;
                 break ;
             case '女' :
                 value = 2;
                 break ;
             case '人妖' :
                 value = 3;
                 break ;
         }
         $( "#tip" ).text( function (index, orignial){ return orignial+ "&value=" +value});
     }
});

電話字段的修改：

電話字段也可以是text類型用jquery.validate.js來進行驗證。但這里要說的是增加jeditable的input類型，默認有 text，select，textarea三種，往往不能滿足要求，比如我們想使用一些第三方的輸入插件，比如時間選擇器，顏色選擇器等。 jeditable支持增加input類型來集成第一方輸入插件，這里我們使用的是masked-input-plugin（官網點我），它可以限制我們只能輸入一定個數的數字，當個數不是指定個數時提交的數據為空。顯然這不是很標准的電話號碼驗證，只為說明如何增加input類型，為后面增加時間選擇器、顏色選擇器等作參考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$.editable.addInputType( 'phone' , {
     element : function (settings, original) {
         var input = $( '<input type="text">' ).mask( "999999999" );
         $( this ).append(input);
         return (input);
     }
});
 
$( ".phone" ).editable( "editable.php" , {
     event: 'dblclick' ,
     tooltip: '雙擊編輯...' ,
     indicator: '保存中...' ,
     submit: '確定' ,
     onblur: 'ignore' ,
     cssclass: 'phone' ,
     type: 'phone' , //用自己添加的input樣式
     placeholder: '雙擊添加電話' ,
     submitdata: function (value, settings) {
         $( "#tip" ).text(
             "id=" +$( this ).parent().attr( 'id' )+ "&" +
             "field=" +$( this ).attr( 'field' )+ "&" +
             "oldvalue=" +value
         );
         return {id: $( this ).parent().attr( 'id' ), field: $( this ).attr( 'field' ), oldvalue: value};
     },
     callback: function (value, settings) {
         $( "#tip" ).text( function (index, orignial){ return orignial+ "&value=" +value});
     }
});

jeditable的addInputType()方法添加input類型，我們指定類型名字，創建input元素，綁定第三方輸入插件，追加到form內部（方法內的this指代form表單），再返回即可！詳細的介紹參見官網這里

日期字段的修改：

在日期字段這里，我們綁定bootstrap的datetimepicker。至於這里使用的第三方輸入插件的參數不贅述，不了解的另百度谷歌。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$.editable.addInputType( 'birthday' , {
     element : function (settings, original) {
         var input = $( '<input type="text" size="8" readonly>' ).datetimepicker({
             language: 'zh-CN' ,
             format: 'yyyy-mm-dd' ,
             autoclose: 1,
             startView: 2,
             minView: 2,
         });
         $( this ).append(input);
         return (input);
     }
});
 
$( ".birthday" ).editable( "editable.php" , {
     event: 'dblclick' ,
     tooltip: '雙擊編輯...' ,
     indicator: '保存中...' ,
     submit: '確定' ,
     onblur: 'ignore' ,
     cssclass: 'phone' ,
     type: 'birthday' , //用自己添加的input樣式
     submitdata: function (value, settings) {
         $( "#tip" ).text(
             "id=" +$( this ).parent().attr( 'id' )+ "&" +
             "field=" +$( this ).attr( 'field' )+ "&" +
             "oldvalue=" +value
         );
         return {id: $( this ).parent().attr( 'id' ), field: $( this ).attr( 'field' ), oldvalue: value};
     },
     callback: function (value, settings) {
         $( "#tip" ).text( function (index, orignial){ return orignial+ "&value=" +value});
     }
});

顏色字段的修改：

顏色字段，綁定的是之前說過的colpick-jQuery-Color-Picker（點我查看介紹）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$.editable.addInputType( 'color' , {
     element : function (settings, original) {
         var input = $( '<input type="text">' ).colpick({
             layout: 'hex' ,
             submit: false ,
             colorScheme: 'light' ,
             // color: '0066CC',
             showEvent: 'focus' ,
             onChange: function (hsb, hex, rgb, el, bySetColor) {
                 if (!bySetColor) $(el).val(hex);
             }
         }).keyup( function (){
             $( this ).colpickSetColor( this .value);
         });
         $( this ).append(input);
         return (input);
     }
});
 
$( ".color" ).editable( "editable.php" , {
     event: 'dblclick' ,
     tooltip: '雙擊編輯...' ,
     indicator: '保存中...' ,
     submit: '確定' ,
     onblur: 'ignore' ,
     cssclass: 'color' ,
     type: 'color' , //用自己添加的input樣式
     submitdata: function (value, settings) {
         $( "#tip" ).text(
             "id=" +$( this ).parent().parent().attr( 'id' )+ "&" +
             "field=" +$( this ).attr( 'field' )+ "&" +
             "oldvalue=" +value
         );
 
         return {id: $( this ).parent().parent().attr( 'id' ), field: $( this ).attr( 'field' ), oldvalue: value};
     },
     callback: function (value, settings) {
         $( this ).next().css( 'background-color' , '#' +value);
         $( "#tip" ).text( function (index, orignial){ return orignial+ "&value=" +value});
     }
});

備注字段的修改：

這里使用自帶的textarea類型即可。驗證使用jquery.validate.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$( ".comment" ).editable( "editable.php" , {
     event: 'dblclick' ,
     tooltip: '雙擊編輯...' ,
     indicator: '保存中...' ,
     submit: '確定' ,
     onblur: 'ignore' ,
     cssclass: 'comment' ,
     type: 'textarea' ,
     rows: 3,
     onsubmit: function () {
         $( this ).validate({
             rules:{value:{maxlength:20,}},
             messages:{value:{maxlength: '最多20個字符' }}
         });
         return $( this ).valid();
     },
     submitdata: function (value, settings) {
         $( "#tip" ).text(
             "id=" +$( this ).parent().attr( 'id' )+ "&" +
             "field=" +$( this ).attr( 'field' )+ "&" +
             "oldvalue=" +value
         );
         return {id: $( this ).parent().attr( 'id' ), field: $( this ).attr( 'field' ), oldvalue: value};
     },
     callback: function (value, settings) {
         $( "#tip" ).text( function (index, orignial){ return orignial+ "&value=" +value});
     }
 
})

至此，各個字段已經實現即時編輯並進行前端驗證。這里是靜態寫死沒有輸入數據庫，有了發送到后台的那些數據，相信要進行后台驗證並更新數據都不是難事了。附這里的后台程序：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
$value = $_POST [ 'value' ];
if ( $_POST [ 'field' ] == 'gender' )
{
     switch ( $value )
     {
         case 1:
             $value = '男' ;
             break ;
         case 2:
             $value = '女' ;
             break ;
 
         case 3:
             $value = '人妖' ;
             break ;
     }
}
echo $value ;

終於搞完，這幾種輸入類型，基本滿足一般的要求了吧。算是給自己做個筆記，也希望能幫助廣大網友！溫馨提醒演示demo在開頭的DEMO按鈕。

 

 轉自:http://www.xiaomlove.com/2014/06/02/jquery%E5%AE%9E%E6%97%B6%E7%BC%96%E8%BE%91%E6%8F%92%E4%BB%B6jeditable%E8%AF%A6%E7%BB%86%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3/


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Jeditable - jQuery就地編輯插件使用 Sqlmap全參數詳解 DockerFile 參數詳解 xheditor的參數配置詳解 Http請求的各參數詳解 MySQL配置參數詳解 Redis配置參數詳解 Flink Checkpoint 參數詳解 tcpdump安裝與參數詳解 Redis的appendfsync參數詳解
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM