bootsraptableeditable中⽂⽂档
前⾔
因为要⽤到 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⽉）。翻译到中途的时候，发现个⼈能⼒有限，完整⽂档的翻译所费时间远远超出预期，向各位致以歉意。如有错误，烦请指教。
附上链接。
⼊门指导
1. 决定使⽤哪⼀个前端框架：
1. Bootstrap
2. jQuery UI
3. only jQuery (+ Poshytip)
引⼊⾄页⾯中。以下是 bootstrap 的例⼦:
<link href="//netdna.bootstrapcdn/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="code.jquery/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn/bootstrap/3.0.0/js/bootstrap.min.js"></script>
1. 1
2. 2
3. 3
2. 下载相应的 X-editable 库并且引⼊⾄页⾯中。
<link href="bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
<script src="bootstrap-editable/js/bootstrap-editable.js"></script>
1. 1
2. 2
注意引⼊位置在前端框架之后
3. 标记元素应该是可编辑的。 通常它是带有data-*属性的<A>元素。
<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>
1. 1
您应该定义的主要属性是：
1. type - ⽂本输⼊类型(text, textarea, select 等等)
2. url - 与连接的URL，来交互⼀些需要处理的值 (/post, post.php 等等)
3. pk - 要更新的记录的主键
4. id or name - 要更新的字段的名称。 取⾃id或data-name属性
5. value - 初始值。 对于select有⽤，其中value是要显⽰的⽂本的整数值。 如果为空 - 将取⾃元素html内容4. 设置可编辑模式：⾏内或弹出（默认）
//turn to inline mode
$.fn.de = 'inline';
1. 1
2. 2
5. 将 editable() ⽅法应⽤于这些元素
$(document).ready(function() {
$('#username').editable();
});
1. 1
2. 2
3. 3
或者，您可以通过 javascript 来设置
<a href="#" id="username">superuser</a>
1. 1
$('#username').editable({
type: 'text',
pk: 1,
url: '/post',
title: 'Enter username'
});
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
6. 前端准备好了！
打开页⾯并单击元素。 输⼊新值并提交表单。 它将向/post发送带有新值的ajax请求。
请求包含要更新的记录的name, value and pk：
POST /post
{
name:  'username',  //name of field (column in db)
pk:    1            //primary key (record id)
value: 'superuser!' //new value
}
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 写在尾巴：
X-editable对服务器端语⾔没有限制：您可以使⽤您喜欢的任何语⾔编写它。
例如，您要在服务器上验证提交的值：
1. 如果值有效，则应返回 HTTP 状态 200 OK 。 页⾯上的元素将⾃动更新。 ⽆需回复 response body。
2. 如果值⽆效，则应返回 HTTP 状态 != 200 （例如 400 请求⽆效），并在响应正⽂中显⽰错误消息。 页⾯上的元素不会更
新，可编辑的表单将显⽰错误消息。
默认请求⽅法是POST，您可以通过默认配置更改它：
$.fn.editable.defaults.ajaxOptions = {type: "PUT"};
1. 1
JSON response:
如果您的服务器返回JSON，您始终可以在响应正⽂中发送带有错误标志的HTTP状态200。
在success 进⾏逻辑控制：
//assume server response: 200 Ok {status: 'error', msg: 'field cannot be empty!'}
$('#username').editable({
...
success: function(response, newValue) {
if(response.status == 'error') return response.msg; //msg will be shown in editable form
}
});
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
本地化交互:
如果您不想在服务器上发送值，只需保留空url选项。 您可以在success 进⾏逻辑控制：
$('#username').editable({
type: 'text',
title: 'Enter username',
success: function(response, newValue) {
userModel.set('username', newValue); //update backbone model
}
});
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
$().editable(options)
使页⾯上的任何HTML元素都可编辑。 通过jQuery⽅法。
选项（Options）
可以通过javascript $().editable({...})或通过data-* html属性定义选项。
请同时参阅部分。
此外，您可以从其⽂档中选择⼀些弹出窗⼝的核⼼选项：，。
注意，因为译者语法不是很熟悉，所以表格内的代码块存在排版错误，建议将表格内代码复制下来重新进⾏排版。名称类型预设值说明
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后调⽤）
jquery官方文档下载要使⽤当前选定的项⽬$.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’元素为空时显⽰的⽂本。
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只是渲染到元素中。
名称类型预设值说明

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