X-editable⽂档中⽂版
前⾔
因为要⽤到 Bootstrap-table ，不可避免的会⽤到表格编辑功能，⽽ X-editable 可在页⾯上创建可编辑元素。 它可以与前端框架（Bootstrap，jQuery UI，jQuery ）配合使⽤，编辑模式包括弹出和⾏内模式。只是兜兜转转了下只有英⽂⽂档，还是不⽅便查阅，所以进⾏了部分翻译。翻译范围为：Getting started与$().editable(options) 两部分，但这两部分⾜够完成80%的需要了，⼀部分是demo，另⼀部分是options。各输⼊组件（例如text、date、textarea等）⼀些不同的细微设置请查阅源⽂档。此翻译的⽂档版本为 X-editable
1.5.1（2018年8⽉）。翻译到中途的时候，发现个⼈能⼒有限，完整⽂档的翻译所费时间远远超出预期，向各位致以歉意。如有错误，烦请指教。
附上链接。
$().editable(options)
使页⾯上的任何HTML元素都可编辑。 通过jQuery⽅法。
选项（Options）
可以通过javascript $().editable({...})或通过data-* html属性定义选项。
请同时参阅部分。
此外，您可以从其⽂档中选择⼀些弹出窗⼝的核⼼选项：，。
注意，因为译者markdown语法不是很熟悉，所以表格内的代码块存在排版错误，建议将表格内代码复制下来重新进⾏排版。
名称类型预设值说明
ajaxOptions since1.1.1null null
提交ajax请求的其他选项。 可参阅:
ajaxOptions: { type: 'put', dataType: 'json'}
anim string false动画速度（仅限⾏内模式）
autotext string‘auto’允许根据元素的值⾃动设置元素的⽂本。 可以是auto \| always \| never。 适⽤于选择和⽇期。 例如，如果下拉列表为{1：'a'，2：'b'}且元素值设置为1，则其html将⾃动设置
为“a”。
auto - 仅当元素为空时，才会⾃动设置⾃动⽂本。
always\|never - 尝试 | 绝不设置元素的⽂本。
defaultValue
since 1.4.6
string|object null若原始字段值为空（null \| undefined \|''），将在输⼊中显⽰的值。disabled boolean false设置可编辑的禁⽤状态
display since 1.2.0function|boolean null
在元素的text中进⾏value的⾃定义显⽰。
如果为null，则使⽤默认输⼊的显⽰。
如果为false，则不会调⽤显⽰⽅法，元素的⽂本将不会更改。
参数：
1. value: 要显⽰的当前值
2. response：从版本1.4.0起，服务器响应（显⽰如果在进⾏ajax后调⽤）
对于带有源（select，checklist）参数的输⼊是不同的：
参数：
1. value: 要显⽰的当前值。
2. sourceData ：当前输⼊的项⽬数组（例如下拉项）
3. response：从版本1.
4.0起，服务器响应（显⽰如果在进⾏ajax后调⽤）
要使⽤当前选定的项⽬$.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.)); });
$(this).html(html.join(', ')); } else { $(this).empty(); }}
emptyclass since1.4.1string
editable-
empty
当可编辑⽂本为空时应⽤的CSS类。
emptytext string‘Empty’元素为空时显⽰的⽂本。
emptytext string‘Empty’元素为空时显⽰的⽂本。
errorsince since1.4.4function null
错误回调。 请求失败时调⽤（ response status！= 200）。当您想要解析错误响应并显⽰
⾃定义消息时有⽤。 返回类型必须为string (要在错误块中显⽰的消息)。
error: function(response, newValue) { if(response.status === 500) { return 'Service
unavailable. Please try later.'; } else { sponseText; }}
highlight
since1.4.5
string|boolean#FFFF80⽤于在更新后显⽰⾼亮元素的颜⾊。 通过CSS3过渡实现，适⽤于现代浏览器。
mode
since1.4.0
string‘popup’编辑模式，可以是 popup 弹出式或inline⾏内式
name string null字段名称。 将在服务器上提交。 可以从id属性中获取
onblur since1.1.1string‘cancel’
⽤户在容器外部单击时的操作。 可以 cancel\|submit\|ignore(取消|提交|忽略)。设置忽略允许
同时打开⼏个容器。
params object|function null 提交的其他参数。 如果定义为object- 它将附加到原始ajax数据（pk，name和value）。如果定义为 function - 返回的对象将覆盖原始的ajax数据。
params: function(params) { //originally params contain pk, name and value params.a = 1; return params;}
pk string|object|function null 可编辑对象的主键（例如，数据库中的记录ID）。 对于复合键，使⽤对象，例如 {id：1，lang：‘en’}。 可以通过函数动态计算。
placement string‘top’容器相对于元素的放置。
可以是top\|right\|bottom\|left （顶部|右侧|底部|左侧）。 ⽆法应⽤在⾏内式编辑模式。
savenochange
since1.2.0
boolean false是否在未提交但保存表单时保存或取消。
selector since1.4.1string null
如果提供了选择器，则可编辑将委派给指定的⽬标。
对动态⽣成的DOM元素有效。
请注意，⽆法使⽤emptytext和autotext选项初始化委派的⽬标，因为它们实际上只有在⾸次单
击后才可编辑。
您应该⼿动将editable-click class设置在该元素上。
此外，如果元素最初为空，则应添加class editable-empty，set 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.1boolean|string true
显⽰按钮的位置：left（true）\| bottom \| false（左侧|底部|隐藏）。
没有按钮将⾃动提交。
success function null 成功回调。 在服务器上成功发送值并且响应状态= 200时调⽤。⽤于处理json响应。 例如，如果您的后端响应可以是{success：true}或{success：false，msg：“server error”}，则可以在此回调中检查它。
如果它返回string - 意味着发⽣错误，字符串显⽰为错误消息。
如果它返回像{newValue：<something>}这样的对象 - 它会覆盖⽤户提交的值。除此以
外，newValue只是渲染到元素中。
success: function(response, newValue) { if(!response.success) return response.msg;}
toggle string‘click’如何切换⾄编辑模式。 click\| dblclick \| mouseenter \| manual(点击|双击|指针穿过|⼿动)。设置为⼿动时，您应⼿动调⽤可编辑的显⽰/隐藏⽅法。
注意：如果在某些DOM元素的单击处理程序中调⽤show或toggle，则需要应
⽤e.stopPropagation()，因为在⽂档上的任何单击时都会关闭容器。$('#edit-
button').click(function(e) { e.stopPropagation(); $('#username').editable('toggle');});
type string‘text’输⼊类型。可以是 text\|textarea\|select\|date\|checklist 等
unsavedclass since 1.4.1string
editable-
jquery弹出div窗口
unsaved
存储值但未发送到服务器时应⽤的CSS（pk为空或send=‘never’）。
如果您在本地使⽤可编辑项并将它们⼀起提交，则可以将其设置为null。
名称类型预设值说明
since 1.4.1string
unsaved如果您在本地使⽤可编辑项并将它们⼀起提交，则可以将其设置为null。
url string|function null 要提交的⽹址，例如’/post’。
如果是函数 - 它将被调⽤，⽽不使⽤ajax。 函数应返回对象以运⾏失败/完成回调。
url: function(params) { var d = new $.Deferred(); if(params.value === 'abc') { return
validate function null 客户端验证的功能。 如果返回字符串 - 表⽰验证未通过，且会将返回值显⽰。 从1.5.1开始，您可以通过从validate返回对象来修改提交的值：
{newValue: '...'} or {newValue: '...', msg: '...'}
validate: function(value) { if($.trim(value) == '') { return 'This field is required'; }}
value mixed element’s
text
输⼊的初始值。 如果未设置，则取⾃元素的⽂本。
请注意，如果元素的⽂本为空 - ⽂本将从值⾃动⽣成，可以⾃定义（请参阅autotext选项）。
例如，要显⽰货币符号：
<a id="price" data-type="text" data-value="100"></a><script>$('#price').editable({ ... display:
function(value) { $(this).text(value + '$'); } }) </script>
名称类型预设值说明
⽅法（Methods）
所有的⽅法都可以通过以下形式调⽤： $().editable('method', params);⽅法参数描述
$().editable(options)options 对象通过jQuery⽅法初始化可编辑元素。
$('#username').editable({ type: 'text', url: '/post', pk: 1});
activate()none激活可见容器的输⼊（例如设置焦点）destroy()none从元素中删除可编辑的功能
disable()none禁⽤可编辑
enable()none启⽤可编辑
getValue()isSingle Bool 是否只返回单个元素的
值
返回可编辑元素的当前值。
请注意，它返回⼀个具有名称 - 值对的对象，⽽不是⼀个值本⾝。 它允许从多个元素中
获取数据。
如果某些可编辑的值为null或 undefined ，则将其从结果对象中排除。 当参数isSingle设
置为true时 - 假设您有单个元素，将返回editable⽽不是object的值。
$('#username, #fullname').editable('getValue');//result:{username:
"superuser",fullname: "John"}//isSingle = true$('#username').editable('getValue',
true);//result "superuser"
hide()none隐藏容器
option(key, value)key String|object 选项名称或具有多
个选项的对象
value 多种类型 要加⼊的新值
设置新选项：
$('.editable').editable('option', 'pk', 2);
setValue(value, convertStr)value 多种类型 要加⼊的新值
convertStr Boolean是否将值从字符
串转换为内部格式
设置编辑组件的新值
show()closeAll Boolean 是否在显⽰此⽂件
时关闭所有其他可编辑容器。 默认为
true。
显⽰容器
submit(options)options Object：
1. url Object 提交数据的url
2. data Object 提交的数据
3. ajaxOptions Object 额外的ajax选
项
4. error(obj)Function 错误处理
5. success(obj,config)Function 成
功处理
此⽅法从多个可编辑元素中收集值，并将它们全部提交给服务器。
原则上，它只为成功运⾏所有字段和提交的客户端验证。
请参阅 以获取详细信息。
从1.5.1起， submit可以应⽤于单个元素以编程⽅式发送数据。 在这种情况
下，url， success和 error 默认初始化，你可以以此⽅式调⽤调
⽤： $('#username').editable('submit')。
功处理
toggle()closeAll Boolean 是否在显⽰此容器
时关闭所有其他可编辑容器。 默认为
true。
切换容器可见性（ show / hide）
toggleDisabled()none切换可编辑元素的启⽤/禁⽤状态
validate()none 对匹配的可编辑元素进⾏客户端验证
$('#username, #fullname').editable('validate'); // possible result: { username: "username is required", fullname: "fullname should be minimum 3 letters length" }
⽅法参数描述
事件（Events）
事件回调参数描述
hidden event Object 事件对象
reason String 隐藏原因。 可以
是save\|cancel\|onblur\|nochange\|manu
al
当容器被隐藏时被触发。 它既可以保存也可以取消。
注意：Bootstrap popover有⾃⼰的 hidden 事件，现在⽆法与x-editable的事件区别。 解决⽅法
是检查arguments.length，对于x-editable，其值始终为2。
$('#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.0event Object 事件对象
editable Object 可编辑的实例（因为它
不能通过数据访问（’ editable’））
元素由$().editable()⽅法初始化时触发。 请注意，您应该在应⽤editable之前设置init处理程序。
$('#username').on('init', function(e, editable) { alert('initialized ' +
editable.options.name);});$('#username').editable();
save event Object 事件对象
params Object 额外的参数：
1. newValue Mixed 提交的值
2. response Object ajax 响应
提交新值时触发。 您可以使⽤$(this).data('editable')来访问可编辑的实例。
$('#username').on('save', function(e, params) { alert('Saved value: ' + wValue);});
shown event Object 事件对象在显⽰容器并呈现表单时触发（对于select将等待加载下拉选项）。
注意：Bootstrap popover有⾃⼰的 shown 事件，现在⽆法与x-editable的事件分开。 解决⽅法是检查arguments.length，对于x-editable，值始终为2。
$('#username').on('shown', function(e, editable) { editable.input.$input.val('overwriting value of input..');});
注意
注意：您可以修改$ .fn.editable.defaults为页⾯上的所有可编辑元素设置默认选项。
例如，强制所有元素通过PUT⽅法提交：$ .fn.editable.defaults.ajaxOptions = {type：“put”}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。