如何在 Jtable 中动态添加字段。我想为 Cities 设置多个值请参考所附图片
谢谢
不,它不是用 jTable 制作的。您可以使用输入选项(http://jtable.org/ApiReference#fopt-input)和这个: http: //jqueryui.com/autocomplete/#multiple或者您可以创建自己的对话框。
是的,这不是 jQuery jTable 内置的。为了解决这个问题,我创建了一个用于相同目的的脚本。这处理(a)添加更多控件或控件组和(b)删除控件。
这是脚本:
//add '.add_more' class to
$(".add_more").on('click', function () {
// creates unique id for each element
var _uniqueid_ = +Math.floor(Math.random() * 1000000);
var new_ele_id = $(this).attr("data-clone-target") + _uniqueid_;
var cloneObj = $("#" + $(this).attr("data-clone-target"))
.clone()
.val('')
.attr("id", new_ele_id);
// if the control is grouped control
if ($(this).hasClass('group_control') == true) {
$($(cloneObj).children()).each(function () {
$(this).attr("id", $(this).attr("id") + _uniqueid_).val("");
});
}
$(cloneObj).insertBefore($(this));
//creates a 'remove' link for each created element or grouped element
$("<a href='javascript:void(0);' class='remove_this' data-target-id='" + new_ele_id + "'></a>")
.on('click', function () {
if ($(this).is(":visible") == true) {
if (confirm("Are you sure?")) {
$("#" + $(this).attr("data-target-id")).remove();
$(this).remove();
}
}
else {
$("#" + $(this).attr("data-target-id")).remove();
$(this).remove();
}
}).insertBefore($(this));
$("#" + new_ele_id).focus();
});
//remove element script
$(".remove_this").on('click', function () {
if ($(this).is(":visible") == true) {
if (confirm("Are you sure?")) {
$("#" + $(this).attr("data-target-id")).remove();
$(this).remove();
}
}
else {
$("#" + $(this).attr("data-target-id")).remove();
$(this).remove();
}
});
用法:单元素 http://jsfiddle.net/vkscorpion1986/ktbn4qLg/2/
<input class="" id="<ELEMENT-ID>" type="text" name="input1">
<a href="javascript:void(0);" data-clone-target="<ELEMENT-ID>" title="Add More" class="add_more">Add More</a>
用法:分组元素 http://jsfiddle.net/vkscorpion1986/ktbn4qLg/4/
<div id="<ELEMENT-ID>">
<input class="" id="input1" type="text" name="input1">
<input class="" id="input2" type="text" name="input2">
</div>
<a href="javascript:void(0);" data-clone-target="<ELEMENT-ID>" title="Add More" class="add_more group_control">Add More</a>
属性
href = javascript:void(0); // just to disable the anchor tag default behaviour
data-clone-target = id of the target element
CSS类
.add_more = to implement the add more/remove controls functionality
.group_control = for indicating that this is group of elements which have to be repeted
希望这对你有用。