入门

  1. 确定要使用的核心库:
    • Bootstrap
    • jQuery UI
    • only jQuery (+ Poshytip)

    将其包含在您的网页上。以下示例适用于bootstrap:

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    
  2. 下载相应的X-editable构建并将其包含在您的页面上:
    <link href="bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
    <script src="bootstrap-editable/js/bootstrap-editable.js"></script>
    
    注意包括x-editable 后核心库(bootstrap,jquery-ui)!
  3. 标记元素应该是可编辑的。通常它是<A>具有附加data-*属性的 元素
    <a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>
    
    您应该定义的主要属性是:
    • type - 输入类型 (text, textarea, select, etc)
    • url - URL服务器端脚本来处理提交的值 (/post, post.php 等等)
    • pk -要更新的记录的主键 (数据中的ID)
    • idname - 要更新的字段名称 (数据中的列)。取自iddata-name 属性
    • value - 初始值。有用于select,其中value是要显示的文本的整数键。如果为empty - 将从元素html内容中获取

  4. 设置可编辑模式: inlinepopup (默认)
    //转到内联模式
    $.fn.editable.defaults.mode = 'inline';
    
  5. editable()方法应用于这些元素
    $(document).ready(function() {
        $('#username').editable();
    });
    
    或者,您可以通过javascript设置所有选项
    <a href="#" id="username">superuser</a>
    
    $('#username').editable({
        type: 'text',
        pk: 1,
        url: '/post',
        title: 'Enter username'
    });
    
  6. 前端准备好了!!

    查看演示下载还示zip

    打开页面并单击元素。输入新值并提交表单。它将发送带有新值的ajax请求/post.
    请求包含name, valuepk 要更新的记录:

    POST /post
    {
        name:  'username',  //字段名称 (数据库中的列)
        pk:    1            //主键 (记录 id)
        value: 'superuser!' //新仁
    }
    

  7. 编写后端部分:
    X-editable对服务器端部分没有限制:您可以使用您喜欢的任何语言编写它
    例如,您要在服务器上验证提交的值:
    • I如果值有效, 则应返回HTTP 状态 200 OK。页面上的元素将自动更新。无需回复机构。
    • 如果值无效, 则应返回HTTP 状态 != 200(例如400 Bad请求),并在响应正文中显示错误消息。页面上的元素不会更新,可编辑的表单将显示错误消息。

    默认请求方法是POST,您可以通过默认配置更改它:
    $.fn.editable.defaults.ajaxOptions = {type: "PUT"};
    
    JSON响应:
    如果您的服务器返回JSON,您始终可以在响应正文中发送带有错误标志的HTTP状态200。
    要处理它使用success 处理程序:
    //假设服务器响应:200 Ok {status: 'error', msg: 'field cannot be empty!'}
    
    $('#username').editable({
        ...
        success: function(response, newValue) {
            if(response.status == 'error') return response.msg; //msg将以可编辑的形式显示   
        }
    });
    

    局部工作:
    如果您不想在服务器上发送值,只需保留空url选项。您可以在success处理程序中处理值:
    $('#username').editable({
        type: 'text',
        title: 'Enter username',
        success: function(response, newValue) {
            userModel.set('username', newValue); //更新后台模型
        }
    });
    

$().editable(options)

使页面上的任何HTML元素都可编辑。应用为jQuery方法。

可以通过javascript $().editable({...})data-* html属性定义选项。
请参阅输入相关选项。.
此外,您可以从其文档中使用弹出窗口的核心选项: bootstrap-popover, jquery-ui-tooltip.

名称类型默认描述
ajaxOptions
since 1.1.1
objectnull

提交ajax请求的其他选项。值列表:http://api.jquery.com/jQuery.ajax

ajaxOptions: {
    type: 'put',
    dataType: 'json'
}
anim stringfalse

动画速度(仅限内联模式)

autotext string'auto'

允许根据元素的值自动设置元素的文本。可以auto|always|never。适用于选择和日期。例如,如果下拉列表是{1: 'a', 2: 'b'}和元素的值设置为1,则它的html将自动设置为'a'.
auto- 仅当元素为空时才会自动设置文本。
always|never - 总是(从不)尝试设置元素的文本。

defaultValue
since 1.4.6
string|objectnull

如果原始字段值为空((null|undefined|'')),将在输入中显示的值。

disabled booleanfalse

设置可编辑的禁用状态

display
since 1.2.0
function|booleannull

回调以在元素的文本中执行自定义的值显示。
如果 null,使用默认输入的显示。
如果 false没有调用显示方法,元素的文本将永远不会改变。
在元素的范围内运行。
参数:

  • value 要显示的当前值
  • response 服务器响应(如果在ajax提交后调用显示),自1.4.0以来对于带有源(select,checklist)的输入,参数是不同的:
  • value要显示的当前值
  • sourceData当前输入的项目数组(例如下拉项)
  • response服务器响应(如果在ajax提交后调用显示),自1.4.0以来

要使用当前选定的项目$.fn.editableutils.itemsByValue(value, sourceData).

display: function(value, sourceData) {
   //display checklist as comma-separated values
   var html = [],
       checked = $.fn.editableutils.itemsByValue(value, sourceData);
       
   if(checked.length) {
       $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
       $(this).html(html.join(', '));
   } else {
       $(this).empty(); 
   }
}
emptyclass
since 1.4.1
stringeditable-empty

当可编辑文本为空时应用Css类。

emptytext string'Empty'

元素为空时显示的文本。

error
since 1.4.4
functionnull

错误回调。请求失败时调用(响应状态!= 200)。
当您要解析错误响应并显示自定义消息时有用。必须返回string - 要在错误块中显示的消息。

error: function(response, newValue) {
    if(response.status === 500) {
        return 'Service unavailable. Please try later.';
    } else {
        return response.responseText;
    }
}
highlight
since 1.4.5
string|boolean#FFFF80

用于在更新后突出显示元素的颜色。通过CSS3过渡实现,适用于现代浏览器。

mode
since 1.4.0
string'popup'

可编辑的模式,可以是popupinline

name stringnull

字段名称。将在服务器上提交。可以从id 属性中获取

onblur
since 1.1.1
string'cancel'

用户在容器外部单击时的操作。可以 cancel|submit|ignore.
设置 ignore 允许打开几个容器。

params object|functionnull

提交的其他参数。如果定义为object 它将appended到原始ajax数据(pk,name和values)。
如果定义为function - 返回的对象将overwrites原始的ajax数据。

params: function(params) {
    //originally params contain pk, name and value
    params.a = 1;
    return params;
}
pk string|object|functionnull

可编辑对象的主键(例如,数据库中的记录ID)。对于复合键,使用对象,例如{id: 1, lang: 'en'}。可以通过函数动态计算。

placement string'top'

容器相对于元素的放置。可以top|right|bottom|left。不用于内联容器。

savenochange
since 1.2.0
booleanfalse

是否在未更改但保存表单时保存或取消值

selector
since 1.4.1
stringnull

如果提供了选择器,则可编辑将委派给指定的目标。
适用于动态生成的DOM元素。
请注意, 委派的目标无法使用 emptytextautotext 选项进行初始化,因为它们实际上只有在首次单击后才可编辑。
您应该手动将类设置editable-click 为这些元素。
另外,如果元素最初为空,则应添加类 editable-empty,设置data-value="" 并将emptytext写入元素:

<div id="user">
  <!-- empty -->
  <a href="#" data-name="username" data-type="text" class="editable-click editable-empty" data-value="" title="Username">Empty</a>
  <!-- non-empty -->
  <a href="#" data-name="group" data-type="select" data-source="/groups" data-value="1" class="editable-click" title="Group">Operator</a>
</div>     

<script>
$('#user').editable({
    selector: 'a',
    url: '/post',
    pk: 1
});
</script>
send string'auto'

在服务器上发送数据的策略。可以auto|always|never。仅当定义了pk和url时,才会在服务器上发送'auto'数据,否则新值将存储在本地。

showbuttons
since 1.1.1
boolean|stringtrue

显示按钮的位置:left(true)| bottom | false
自动提交没有按钮的表单。

success functionnull

成功回调。在服务器上成功发送值并且响应状态= 200时调用。
有用于处理json响应。例如,如果您的后端响应可以是,{success: true} 或者{success: false, msg: "server error"} 您可以在此回调中检查它。
如果它返回string- 意味着发生错误,字符串显示为错误消息。
如果它返回object like{newValue: <something>} - 它会覆盖用户提交的值。
否则newValue只是渲染到元素中。

success: function(response, newValue) {
    if(!response.success) return response.msg;
}
toggle string'click'

如何切换可编辑。可以click|dblclick|mouseenter|manual.
设置为时,manual您应手动调用show/hide 可编辑的方法。
注意: 如果您调用showtoggle 在某些DOM元素的 click 处理程序内部,则需要应用, e.stopPropagation() 因为在文档上的任何单击时都会关闭容器。

$('#edit-button').click(function(e) {
    e.stopPropagation();
    $('#username').editable('toggle');
});
type string'text'

输入类型。可以text|textarea|select|date|checklist和更多

unsavedclass
since 1.4.1
stringeditable-unsaved

存储值但未发送到服务器时应用的Css类((pk 为空或send = 'never'))。如果您在本地使用可编辑项并将它们一起提交,则可以将其设置为 null

url string|functionnull

用于提交的URL,例如,'/post'
I如果函数 - 将调用它而不是ajax。函数应返回延迟对象以运行失败/完成回调。

url: function(params) {
    var d = new $.Deferred();
    if(params.value === 'abc') {
        return d.reject('error message'); //通过延迟对象返回错误 
    } else {
         //在js模型中异步保存数据
        someModel.asyncSaveMethod({
           ..., 
           success: function(){
              d.resolve();
           }
        }); 
        return d.promise();
    }
}
validate functionnull

客户端验证功能。如果返回字符串 - 表示未传递验证且字符串显示为错误。从1.5.1开始,您可以通过以下方式返回对象来修改提交的值validate: {newValue: '...'}{newValue: '...', msg: '...'}

validate: function(value) {
    if($.trim(value) == '') {
        return 'This field is required';
    }
}
value mixedelement's text

输入的初始值。如果未设置,则取自元素的文本。
请注意,如果元素的文本为空 - 文本是从值自动生成的,可以自定义(请参阅autotext选项)。
例如,要显示货币符号:

<a id="price" data-type="text" data-value="100"></a>
<script>
$('#price').editable({
    ...
    display: function(value) {
      $(this).text(value + '%%%~COMPRESS~PRE~20~%%%#x27;);
    } 
}) 
</script>

所有方法都可以称为 $().editable('method', params);

方法参数描述
$().editable(options)
  • optionsObject

jQuery方法初始化可编辑元素。

$('#username').editable({
    type: 'text',
    url: '/post',
    pk: 1
});
activate() none

激活可见容器的输入(例如设置焦点)

destroy() none

从元素中删除可编辑的功能

disable() none

禁用可编辑

enable() none

启用可编辑

getValue()
  • isSingleBool 是否只返回单个元素的值

返回可编辑元素的当前值。
请注意,它返回一个具有名称 - 值对的object
如果某些可编辑的值是nullundefined 从结果对象中排除。当paramisSingle设置为true -假设您有单个元素并且将返回editable而不是object的值。

$('#username, #fullname').editable('getValue');
//结果:
{
username: "superuser",
fullname: "John"
}
//isSingle = true
$('#username').editable('getValue', true);
//result "superuser"
hide() none

用形式隐藏容器

option(key, value)
  • keyString|object 有多个选项名或对像
  • value 新的选项

设置新选项

$('.editable').editable('option', 'pk', 2);
setValue(value, convertStr)
  • value 混合新值
  • convertStr Boolean是否将值从字符串转换为内部格式

设置可编辑的新值

show()
  • closeAll Boolean显示此文件时是否关闭所有其他可编辑容器。默认为true。

显示带有表单的容器

submit(options)
  • optionsObject
    • url 对象 url提交数据
    • data 对象要提交的其他数据
    • ajaxOptions 对象附加的ajax选项
    • error(obj) 函数错误处理程序
    • success(obj,config) 函数成功处理程序

T此方法从多个可编辑元素中收集值,并将它们全部提交给服务器。
在内部,它只为成功运行所有字段和提交的客户端验证。
请参阅创建新记录以获取详细信
由于1.5.1submit可以应用于单个元素以编程方式发送数据。在这种情况下 url, successerror从最初的拍摄选项,你可以叫$('#username').editable('submit').

toggle()
  • closeAll Boolean显示此文件时是否关闭所有其他可编辑容器。默认为true。

切换容器可见性(显示/隐藏)

toggleDisabled() none

切换可编辑元素的启用/禁用状态

validate() none

对所有匹配的可编辑运行客户端验证

$('#username, #fullname').editable('validate');
// possible result:
{
  username: "username is required",
  fullname: "fullname should be minimum 3 letters length"
}
事件回调参数描述
hidden
  • eventObject 对像事件
  • reasonString 字符串原因导致隐藏。可以是save|cancel|onblur|nochange|manual

当容器被隐藏时被触发。它既可以保存也可以取消。
注意: Bootstrap popover有自己的hidden事件,现在无法与x-editable的事件分开。解决方法是检查arguments.length始终2是否为x-editable。

$('#username').on('hidden', function(e, reason) {
    if(reason === 'save' || reason === 'cancel') {
        //auto-open next editable
        $(this).closest('tr').next().find('.editable').editable('show');
    } 
});
init
since 1.2.0
  • eventObject 事件对像
  • editable 对象可编辑实例(因为它不能通过数据访问('editable'))

元素通过$().editable() 方法初始化时触发。请注意,您应该init 申请 before 设置 editable处理程序。

$('#username').on('init', function(e, editable) {
    alert('initialized ' + editable.options.name);
});
$('#username').editable();
save
  • eventObject 对象事件
  • paramsObject 对象附加参数
    • newValueMixed 提交的值
    • responseObject ajax响应

提交新值时触发。您可以使用$(this).data('editable') 访问可编辑的实例

$('#username').on('save', function(e, params) {
    alert('Saved value: ' + params.newValue);
});
shown
  • eventObject 对象事件

显示容器并呈现表单时触发(对于select将等待加载下拉选项)。
注意: Bootstrap popover有自己的shown事件,现在无法与x-editable的事件分开。解决方法是检查arguments.length始终2是否为x-editable。

$('#username').on('shown', function(e, editable) {
    editable.input.$input.val('overwriting value of input..');
});
注意: 您可以修改 $.fn.editable.defaults为页面上的所有可编辑元素设置默认选项。
例如,要强制所有元素通过PUT方法提交:$.fn.editable.defaults.ajaxOptions = {type: "put"}

输入

库支持几种输入类型。每种类型都可能有其他配置选项。
定义输入选项以及$().editable()方法的其他参数。
目前支持:

  • text
  • textarea
  • select
  • date
  • datetime
  • dateui
  • combodate
  • html5types
  • checklist
  • wysihtml5
  • typeahead
  • typeaheadjs
  • select2

text

文字输入

可以通过javascript$().editable({...})data-*html属性定义选项。

名称类型默认描述
clear booleantrue

是否显示clear 按钮

escape
since 1.5.0
booleantrue

如果 true --html将通过$ .text()方法在元素的内容中进行转义。
如果 false - html不会被转义,则使用$ .html()。
当您使用自己的display 功能时,此选项显然没有效果。

inputclass stringnull

CSS类自动应用于输入

placeholder stringnull

输入的占位符属性。输入为空时显示。

tpl string<input type="text">

HTML输入模板。通常你不应该改变它。

<a href="#" id="username" data-type="text" data-pk="1">awesome</a>
<script>
$(function(){
    $('#username').editable({
        url: '/post',
        title: 'Enter username'
    });
});
</script>

textarea

Textarea输入

可以通过javascript $().editable({...})data-*html属性定义选项。

名称类型默认描述
escape
since 1.5.0
booleantrue

如果 true --html将通过$ .text()方法在元素的内容中进行转义。
如果 false - html不会被转义,则使用$ .html()。
当您使用自己的display 功能时,此选项显然没有效果。

inputclass stringinput-large

CSS类自动应用于输入

placeholder stringnull

输入的占位符属性。输入为空时显示。

rows integer7

textarea中的行数

tpl string<textarea></textarea>

HTML输入模板。通常你不应该改变它。

<a href="#" id="comments" data-type="textarea" data-pk="1">awesome comment!</a>
<script>
$(function(){
    $('#comments').editable({
        url: '/post',
        title: 'Enter comments',
        rows: 10
    });
});
</script>

select

选择(下拉列表)

可以通过javascript $().editable({...})data-* html属性定义选项。

名称类型默认描述
escape
since 1.5.0
booleantrue

如果 true --html将通过$ .text()方法在元素的内容中进行转义。
如果 false- html不会被转义,则使用$ .html()。
当您使用自己的display 功能时,此选项显然没有效果。

inputclass stringnull

CSS类自动应用于输入

prepend string | array | object | functionfalse

数据自动添加到下拉列表的开头。

source string | array | object | functionnull

列表的源数据。
如果是strong>array - 它应该是格式: [{value: 1, text: "text1"}, {value: 2, text: "text2"}, ...]
为了兼容性,还支持对象格式:{"1": "text1", "2": "text2" ...}但它不保证元素顺序。

如果 string - 认为ajax url加载项目。在这种情况下,将为具有相同源和名称的字段缓存结果。另见sourceCache 选项。

如果是function,它应该以上面的格式返回数据(从1.4.0开始)。

由于children 支持1.4.1键来渲染OPTGROUP(仅用于select输入)。
[{text: "group1", children: [{value: 1, text: "text1"}, {value: 2, text: "text2"}]}, ...]

sourceCache
since 1.2.0
booleantrue

如果 true 和source是 string url - 将为具有相同源的字段缓存结果。
可用于网格中的可编辑列以防止额外请求。

sourceError stringError when loading list

无法加载列表时出现错误消息(例如ajax错误)

sourceOptions
since 1.5.0
object|functionnull

从服务器加载列表时,$ .ajax()中使用的其他ajax选项。用于发送额外参数(data键)或更改请求方法(type 键)。

tpl string<select></select>

HTML输入模板。通常你不应该改变它。

<a href="#" id="status" data-type="select" data-pk="1" data-url="/post" data-title="Select status"></a>
<script>
$(function(){
    $('#status').editable({
        value: 2,    
        source: [
              {value: 1, text: 'Active'},
              {value: 2, text: 'Blocked'},
              {value: 3, text: 'Deleted'}
           ]
    });
});
</script>

date

Bootstrap-datepicker.
描述和示例:https://github.com/eternicode/bootstrap-datepicker.
对于i18n,你应该在这里包含js文件:https://github.com/eternicode/bootstrap-datepicker/tree/master/js/locales并设置 language选项。
由于1.4.0日期在popupinline模式下具有不同的外观。

可以通过javascript $().editable({...})data-*html属性定义选项。

名称类型默认描述
clear boolean|string'x clear'

文本显示为清除日期按钮。如果false不显示清除按钮。

datepicker object{ weekStart: 0, startView: 0, minViewMode: 0, autoclose: false }

配置datepicker。完整的选项列表:http://bootstrap-datepicker.readthedocs.org/en/latest/options.html

escape
since 1.5.0
booleantrue

如果 true--html将通过$ .text()方法在元素的内容中进行转义。
如果 false - html不会被转义,则使用$ .html()。
当您使用自己的display功能时,此选项显然没有效果。

format stringyyyy-mm-dd

用于向服务器发送值的格式。从data-value属性转换日期时也应用。
可能的令牌是:d, dd, m, mm, yy, yyyy

inputclass stringnull

CSS类自动应用于输入

tpl string<div></div>

HTML输入模板。通常你不应该改变它。

viewformat stringnull

用于显示日期的格式。在init上从元素的文本转换日期时也应用。
如果未指定等于format

<a href="#" id="dob" data-type="date" data-pk="1" data-url="/post" data-title="Select date">15/05/1984</a>
<script>
$(function(){
    $('#dob').editable({
        format: 'yyyy-mm-dd',    
        viewformat: 'dd/mm/yyyy',    
        datepicker: {
                weekStart: 1
           }
        });
});
</script>

datetime

Bootstrap-datetimepicker.
基于smalot bootstrap-datetimepicker plugin。在使用之前,您应该手动包含依赖的js和css:

<link href="css/datetimepicker.css" rel="stylesheet" type="text/css"></link> 
<script src="js/bootstrap-datetimepicker.js"></script>

对于i18n,您应该从这里包含js文件:https://github.com/smalot/bootstrap-datetimepicker/tree/master/js/locales并设置language 选项。

since 1.4.4

可以通过javascript$().editable({...})data-* html属性定义选项。

名称类型默认描述
clear boolean|string'x clear'

文本显示为清除日期按钮。如果false不显示清除按钮。

datetimepicker object{ }

配置datetimepicker。完整的选项列表:https://github.com/smalot/bootstrap-datetimepicker

escape
since 1.5.0
booleantrue

如果 true --html将通过$ .text()方法在元素的内容中进行转义。
如果 false- html不会被转义,则使用$ .html()。
当您使用自己的 display功能时,此选项显然没有效果。

format stringyyyy-mm-dd hh:ii

用于向服务器发送值的格式。从data-value 属性转换日期时也应用。
可能的令牌是:d, dd, m, mm, yy, yyyy, h, i

inputclass stringnull

CSS类自动应用于输入

tpl string<div></div>

HTML输入模板。通常你不应该改变它。

viewformat stringnull

用于显示日期的格式。在init上从元素的文本转换日期时也应用。
如果未指定等于format

<a href="#" id="last_seen" data-type="datetime" data-pk="1" data-url="/post" title="Select date & time">15/03/2013 12:45</a>
<script>
$(function(){
    $('#last_seen').editable({
        format: 'yyyy-mm-dd hh:ii',    
        viewformat: 'dd/mm/yyyy hh:ii',    
        datetimepicker: {
                weekStart: 1
           }
        }
    });
});
</script>

dateui

jQuery UI Datepicker.
说明和示例:http://jqueryui.com/datepicker.
此输入也可作为 date类型访问。不要将它与bootstrap-datepicker一起用作apply$().datepicker() 方法。
对于i18n,你应该在这里包含js文件:https://github.com/jquery/jquery-ui/tree/master/ui/i18n.

可以通过javascript$().editable({...})data-*html属性定义选项。

名称类型默认描述
clear boolean|string'x clear'

文本显示为清除日期按钮。如果false 不显示清除按钮。

datepicker object{ firstDay: 0, changeYear: true, changeMonth: true }

配置datepicker。完整的选项列表:http://api.jqueryui.com/datepicker

escape
since 1.5.0
booleantrue

如果 true --html将通过$ .text()方法在元素的内容中进行转义。
如果 false - html不会被转义,则使用$ .html()。
当您使用自己的display功能时,此选项显然没有效果。

format stringyyyy-mm-dd

用于向服务器发送值的格式。从data-value 属性转换日期时也应用。
令牌的完整列表:http://docs.jquery.com/UI/Datepicker/formatDate

inputclass stringnull

CSS类自动应用于输入

tpl string<div></div>

HTML输入模板。通常你不应该改变它。

viewformat stringnull

用于显示日期的格式。在init上从元素的文本转换日期时也应用。
如果未指定等于format

<a href="#" id="dob" data-type="date" data-pk="1" data-url="/post" data-title="Select date">15/05/1984</a>
<script>
$(function(){
    $('#dob').editable({
        format: 'yyyy-mm-dd',    
        viewformat: 'dd/mm/yyyy',    
        datepicker: {
                firstDay: 1
           }
        }
    });
});
</script>

combodate

Combodate input - 下拉日期和时间选择器。
基于combodate 插件(包括在内)。要使用它,您应该手动包含momentjs.

<script src="js/moment.min.js"></script>

允许输入:

  • only date
  • only time
  • both date and time

请注意,该格式取自momentjs,与bootstrap-datepicker / jquery UI datepicker 不兼容。
内部值存储为momentjs 对象。

since 1.4.0

可以通过javascript$().editable({...})data-*html属性定义选项。

名称类型默认描述
combodate objectnull

配方的配置。完整的选项列表:http://vitalets.github.com/combodate/#docs

escape
since 1.5.0
booleantrue

如果 true --html将通过$ .text()方法在元素的内容中进行转义。
如果 false - html不会被转义,则使用$ .html()。
当您使用自己的display功能时,此选项显然没有效果。

format stringYYYY-MM-DD

用于向服务器发送值的格式。从data-value属性转换日期时也应用。
请参阅 momentjs 文档中的令牌列表

inputclass stringnull

CSS类自动应用于输入

template stringD / MMM / YYYY

用于显示下拉列表的模板。

tpl string<input type="text">

HTML输入模板。通常你不应该改变它。

viewformat stringnull

用于显示日期的格式。在init上从元素的文本转换日期时也应用。
如果未指定等于format.

<a href="#" id="dob" data-type="combodate" data-pk="1" data-url="/post" data-value="1984-05-15" data-title="Select date"></a>
<script>
$(function(){
    $('#dob').editable({
        format: 'YYYY-MM-DD',    
        viewformat: 'DD.MM.YYYY',    
        template: 'D / MMMM / YYYY',    
        combodate: {
                minYear: 2000,
                maxYear: 2015,
                minuteStep: 1
           }
        }
    });
});
</script>

html5types

HTML5输入类型。支持以下类型:

  • password
  • email
  • url
  • tel
  • number
  • range
  • time

了解有关html5输入的更多信息:
http://www.w3.org/wiki/HTML5_form_additions
要查看浏览器兼容性,请参阅:
https://developer.mozilla.org/en-US/docs/HTML/Element/Input

since 1.3.0

可以通过javascript$().editable({...})data-*html属性定义选项。

名称类型默认描述
clear booleantrue

是否显示clear 按钮v

escape
since 1.5.0
booleantrue

如果 true--html将通过$ .text()方法在元素的内容中进行转义。
如果 false- html不会被转义,则使用$ .html()。
当您使用自己的display功能时,此选项显然没有效果。

inputclass stringnull

CSS类自动应用于输入

placeholder stringnull

输入的占位符属性。输入为空时显示。

tpl stringdepends on type

HTML输入模板。通常你不应该改变它。

<a href="#" id="email" data-type="email" data-pk="1">admin@example.com</a>
<script>
$(function(){
    $('#email').editable({
        url: '/post',
        title: 'Enter email'
    });
});
</script>

checklist

复选框列表。内部值存储为javascript数组值。

可以通过javascript$().editable({...})data-*html属性定义选项。

名称类型默认描述
escape
since 1.5.0
booleantrue

如果 true --html将通过$ .text()方法在元素的内容中进行转义。
如果 false- html不会被转义,则使用$ .html()。
当您使用自己的display功能时,此选项显然没有效果。

inputclass stringnull

CSS类自动应用于输入

prepend string | array | object | functionfalse

数据自动添加到下拉列表的开头。

separator string','

data-value 属性读取时的值分隔符

source string | array | object | functionnull

列表的源数据。
如果是array - 它应该是格式:[{value: 1, text: "text1"}, {value: 2, text: "text2"}, ...]
为了兼容性,还支持对象格式:{"1": "text1", "2": "text2" ...} 但它不保证元素顺序。

如果 string - 认为ajax url加载项目。在这种情况下,将为具有相同源和名称的字段缓存结果。另见sourceCache 选项。

如果是function,它应该以上面的格式返回数据(从1.4.0开始)。

由于children支持1.4.1键来渲染OPTGROUP(仅用于select 输入)。
[{text: "group1", children: [{value: 1, text: "text1"}, {value: 2, text: "text2"}]}, ...]

sourceCache
since 1.2.0
booleantrue

如果 true 和 source 是 string url - 将为具有相同源的字段缓存结果。
可用于网格中的可编辑列以防止额外请求。

sourceError stringError when loading list

无法加载列表时出现错误消息(例如ajax错误)

sourceOptions
since 1.5.0
object|functionnull

从服务器加载列表时,$ .ajax()中使用的其他ajax选项。用于发送额外参数(data键)或更改请求方法(type键)。

tpl string<div></div>

HTML输入模板。通常你不应该改变它。

<a href="#" id="options" data-type="checklist" data-pk="1" data-url="/post" data-title="Select options"></a>
<script>
$(function(){
    $('#options').editable({
        value: [2, 3],    
        source: [
              {value: 1, text: 'option1'},
              {value: 2, text: 'option2'},
              {value: 3, text: 'option3'}
           ]
    });
});
</script>

wysihtml5

Bootstrap wysihtml5编辑器。基于bootstrap-wysihtml5.
您应该包括manually 分配wysihtml5bootstrap-wysihtml5:

如果你是Bootstrap 2
<link href="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet" type="text/css"></link>  
<script src="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/wysihtml5-0.3.0.min.js"></script>  
<script src="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.min.js"></script>

而且还包括wysihtml5-0.0.2.jsinputs-extx-editable的目录:

<script src="js/inputs-ext/wysihtml5/wysihtml5-0.0.2.js"></script>  
或者你是Bootstrap 3
<link href="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.3/bootstrap-wysihtml5-0.0.3.css" rel="stylesheet" type="text/css"></link>  
<script src="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.3/wysihtml5-0.3.0.min.js"></script>  
<script src="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.3/bootstrap-wysihtml5-0.0.3.min.js"></script>

而且还包括wysihtml5-0.0.3.jsinputs-extx-editable的目录:

<script src="js/inputs-ext/wysihtml5/wysihtml5-0.0.3.js"></script>  

注意: 最好从它的master branch使用新的bootstrap-wysihtml5,因为有正确插入图像的更新。

since 1.4.0

可以通过javascript$().editable({...})data-*html属性定义选项。

名称类型默认描述
escape
since 1.5.0
booleantrue

如果 true--html将通过$ .text()方法在元素的内容中进行转义。
如果 false- html不会被转义,则使用$ .html()。
当您使用自己的 display功能时,此选项显然没有效果。

inputclass stringeditable-wysihtml5

CSS类自动应用于输入

placeholder stringnull

输入的占位符属性。输入为空时显示。

tpl string<textarea></textarea>

HTML输入模板。通常你不应该改变它。

wysihtml5 object{stylesheets: false}

Wysihtml5默认选项。
请参阅 https://github.com/jhollingworth/bootstrap-wysihtml5#options

<div id="comments" data-type="wysihtml5" data-pk="1"><h2>awesome</h2> comment!</div>
<script>
$(function(){
    $('#comments').editable({
        url: '/post',
        title: 'Enter comments'
    });
});
</script>

typeaheadjs

Typeahead.js输入,基于Twitter Typeahead.
它主要是在Bootstrap 3中替换typeahead。

since 1.5.0

可以通过javascript$().editable({...})data-*html属性定义选项。

名称类型默认描述
clear booleantrue

是否显示clear 按钮

escape
since 1.5.0
booleantrue

如果 true --html将通过$ .text()方法在元素的内容中进行转义。
如果 false- html不会被转义,则使用$ .html()。
当您使用自己的display功能时,此选项显然没有效果。

inputclass stringnull

CSS类自动应用于输入

placeholder stringnull

输入的占位符属性。输入为空时显示。

tpl string<input type="text">

HTML输入模板。通常你不应该改变它。

typeahead objectnull

预先配置本身。完整的选项列表.

<a href="#" id="country" data-type="typeaheadjs" data-pk="1" data-url="/post" data-title="Input country"></a>
<script>
$(function(){
    $('#country').editable({
        value: 'ru',
        typeahead: {
            name: 'country',
            local: [
                {value: 'ru', tokens: ['Russia']}, 
                {value: 'gb', tokens: ['Great Britain']}, 
                {value: 'us', tokens: ['United States']}
            ],
            template: function(item) {
                return item.tokens[0] + ' (' + item.value + ')'; 
            } 
        }
    });
});
</script>

全局模板

某些模板是全局定义的,会影响所有可编辑的输入。您可以根据需要覆盖它。

$.fn.editableform.template

表单模板。必须包含FORM 标签和类.control-group, .editable-input, .editable-buttons, .editable-error-block.
默认值:

<form class="form-inline editableform">
    <div class="control-group">
         <div><div class="editable-input"></div><div class="editable-buttons"></div></div>
         <div class="editable-error-block"></div>
    </div> 
</form>

$.fn.editableform.buttons

按钮模板。自动插入.editable-buttons。必须包含类.editable-submit.editable-cancel.
默认值:

<button type="submit" class="editable-submit">ok</button>
<button type="button" class="editable-cancel">cancel</button>

$.fn.editableform.loading

加载DIV模板。默认值:

<div class="editableform-loading"></div>