Добавление областей динамично в JQuery-Jtable

Как я могу добавить области динамично в Jtable. Я хочу иметь многократные ценности для Городов Пожалуйста, Отошлите приложенное изображение

Thanksenter image description here

0
nl ja de

3 ответы

Да это не встроено с 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
    $("")
    .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();
    }
});

Usage: Single Element http://jsfiddle.net/vkscorpion1986/ktbn4qLg/2/

<input class="" id="" type="text" name="input1">
Add More

Usage: Grouped Elements http://jsfiddle.net/vkscorpion1986/ktbn4qLg/4/

<div id="">
    <input class="" id="input1" type="text" name="input1">
    <input class="" id="input2" type="text" name="input2">
</div>
Add More

признаки

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

Надеюсь, что это работает на вас.

1
добавлено

Да это не встроено с 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
    $("")
    .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();
    }
});

Usage: Single Element http://jsfiddle.net/vkscorpion1986/ktbn4qLg/2/

<input class="" id="" type="text" name="input1">
Add More

Usage: Grouped Elements http://jsfiddle.net/vkscorpion1986/ktbn4qLg/4/

<div id="">
    <input class="" id="input1" type="text" name="input1">
    <input class="" id="input2" type="text" name="input2">
</div>
Add More

признаки

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

Надеюсь, что это работает на вас.

1
добавлено

Нет, это не сделано с jTable. Можно использовать входной выбор (http://jtable.org/ApiReference#fopt-input) и это: http://jqueryui.com/autocomplete/#multiple Или можно создать собственный диалог.

1
добавлено