我使用x-edable来编辑内容。在官方文档中,它说“打开页面,点击元素”。输入新值并提交表单。它将向/post
发送带有新值的ajax请求。
这是我想做的,但是我的url是动态的。我想知道如何生成动态url?
以下是显示内容和可编辑启用的用户界面:
现在当我输入http://localhost:5055/update/department?id=55
如何使用x-editable生成dynamica url?
目前,我添加
data-url="/更新/部门?id=${department.opt字符串("departmentId")}
在我的js文件中,我尝试:
$('.to-be-edited').editable({
toggle: 'manual',
//submit data without pk please set send option to "always".
//send: 'always',
url: '$(this).data("url") + newValue',
success: function(res, newValue) {
console.log(newValue)
}
})
我得到一个错误:
POSThttp://localhost:8000/update/department?id=55
渲染表的代码
<c:if test="${departments.length() > 0}">
<c:forEach var="i" begin="0" end="${departments.length()-1}">
<c:set var="department" value="${departments.getJSONObject(i)}"/>
<tr>
<td><a href="#"
class="to-be-edited department-name" data-type="text"
data-pk="${department.optString("departmentId")}"
id="${department.optString("departmentId")}"
data-url="/update/department?id=${department.optString("departmentId")}&name=">${department.optString("departmentName")}</a><i class="fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden="true"></i></td>
<td> <a href="#" class="edit-name">Edit Name</a> </td>
</tr>
</c:forEach>
</c:if>
这就是我最后做的。首先,我将objecttype=“something”
添加到
<a href="#"
class="to-be-edited department-name" data-type="text"
data-pk="${department.optString("departmentId")}"
id="${department.optString("departmentId")}"
object-type="department"
>
在供应商页面中:
<a href="#"
class="to-be-edited vendor-name" data-type="text"
data-pk="$${vendor.optString("vendorId")}"
id="$${vendor.optString("vendorId")}"
object-type="vendor"
>
然后,在我的js中,我创建了一个success函数,生成url,然后在success函数中编写ajax
$('.to-be-edited').editable({
toggle: 'manual',
success: function(something, data) {
//generate dynamic url for ajax
let url = "/update/" + $(this).attr('object-type') + "?id=" + $(this).attr('id') + "&name=" + data;
$.ajax({
url: url,
//http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings
//communication successful with server, check the status
success: function ajaxSuccess(data, textStatus, jqXHR) {
let json = JSON.parse(data);
if (json["status"] === "success") {
//content will update on server side
console.log(data);
} else {
alert('Unable to update, try again later. ' + json["reason"]);
return;
}
},
//unable to communicate with server
error: function communicationError(jqXHR, textStatus, errorThrown) {
alert('Unable to update, try later. ' + errorThrown);
}
});
}
});
Editable 是一个富文本编辑器框架,提供了稳定的富文本编辑能力。 演示:https://docs.editablejs.com/playground 部分功能如下: Selection 英文键盘输入 组合输入法输入 光标选区渲染 文本输入框渲染 拖拽鼠标选择选区与光标 通过键盘左右键切换光标和选区 通过键盘 Shift+左右键切换光标和选区 通过键盘 Shift+上下键切换光标和选区 通过键
x-editable 是 jQuery,jQuery UI,Bootstrap 就地编辑库。x-editable 允许在页面创建可编辑元素,包括 popup 和 inline 模式。 在线演示:http://vitalets.github.io/x-editable/demo.html Bootstrap: jQuery UI: jQuery: 主要特性: 支持的输入 text textarea
funsent-editable jQuery实现的的轻量级可编辑表格插件,适用于快速录单等应用场景,支持键盘操作 开发缘由和插件介绍 工作中经常碰到一种需求场景,当我们在添加数据记录的时候,其附带的一些数据需要以关联数据(在数据库中表现为关联的数据表)形式一同添加,比如在采购单录单、添加人员基本信息时需要一同填写人员的履历、经验和获奖证书等情况,而这些关联数据本身又是一条一条的记录,所以亟需一种
Ember-x-editable ember-x-editable is built and maintained by Ship Shape. Contact us for Ember.js consulting, development, and training for your project. Ember-x-editable is inspired by x-editable. It
What is it? jQuery Editable Combobox is a jQuery function that allows you to transform any <select> tag into editable combobox. This is done by adding a new <option> element to carry the value entered
AutoResizingEditableTableViewCell 是 iOS UITableViewCell 的扩展,可实现自动根据单元格中的文本来调整高度。