Получение значения скрытого столбца в jsgrid - PullRequest
Новая
       4

Получение значения скрытого столбца в jsgrid

0 голосов
/ 27 апреля 2018

Я использую jsgrid с флажками для выбора строки, например ниже 

$(function() {
   $("#jsGrid").jsGrid({
        ...
        headerTemplate: function() {
            return $("<input>").attr("type", "checkbox").attr("id", "selectAllCheckbox");
        },
        itemTemplate :  function(_, item) {
               return $("<input>").attr("type", "checkbox").attr("class", "singleCheckbox")
                .prop("checked", $.inArray(item, selectedItems) > -1)
                .on("change", function () {
                   $(this).is(":checked") ? selectItem(item) : unselectItem(item);
                });
            },
        }
        fields :[{
           { name: "unique_id", type: "text", width: 100, visible:false },
           { name: "some_name", type: "text", width: 100},
           ... 
        ]
  });

  $("#selectAllCheckbox").click(selectAllCheckBox);
});

Функция selectAllCheckBox приведена ниже. 

var selectAllCheckBox = function(item) {
        selectedItems = [];
        if(this.checked) { // check select status
            $('.singleCheckbox').each(function() {
                this.checked = true;
                selectItem($(this).parent().next().text());//line 1
            });
        }else {

            $('.singleCheckbox').each(function() {
                this.checked = false;
                unselectItem(item);
            });
            selectedItems = [];
        }
    }

Я хотел бы собрать все выбранные unique_ids и обработать его на стороне сервера. Но, поскольку unique_id скрыт, код на line 1 всегда возвращает значения some_name. Как я могу получить значения unique_id?

1 Ответ

0 голосов
/ 17 мая 2018

В jsGrid документах я не нашел никакого метода относительно или получения скрытого столбца, но вы можете сделать, как показано ниже, вручную, чтобы получить выбранную запись / идентификатор.

Я взял пользовательскую конфигурацию selections внутри объекта jsGrid как массив, чтобы сохранить в нем выбранную строку.

* Я помещаю полный объект определенной записи в массив selections внутри jsGrid.

Я надеюсь, что это поможет / поможет вам выполнить ваши требования.

DEMO 

$("#jsGrid").jsGrid({
    width: "100%",
    paging: true,
    selections: [],
    data: [{
        ClientId: 1,
        Client: "Aaaa Joseph"
    }, {
        ClientId: 2,
        Client: "Zzzz Brad"
    }, {
        ClientId: 3,
        Client: "Mr Nice Guy"
    }],
    fields: [{
        headerTemplate: function() {
            var grid = this._grid;
            return `<input class="all" type="checkbox" ${grid.selections.length==grid.data.length?'checked':''} />`;
        },
        itemTemplate: function(_, item) {
            return `<input class="single" value=${item.ClientId} type="checkbox" _isall=${false} ${this._grid.selections.some(ClientId=>ClientId==item.ClientId)?'checked':''} />`
        }
    }, {
        type: "text",
        width: 80,
        name: 'Client'
    }]
});

$('#jsGrid input[type=checkbox]').on('change', function() {
    var checkbox = $(this),
        grid = checkbox.closest('#jsGrid').data().JSGrid;

    if (checkbox.attr('class') == 'all') {
        let checked = checkbox.is(":checked");
        grid.selections = checked ? grid.data : [];
        $.each($('#jsGrid input[class=single]'), (i, el) => $(el).prop('checked', checked))
    } else {
        if (checkbox.is(":checked")) {
            grid.selections.push(grid.data.find(({
                ClientId
            }) => ClientId == checkbox.val()));
        } else {
            grid.selections = grid.selections.filter(({
                ClientId
            }) => ClientId != checkbox.val());
        }
        checkbox.closest('#jsGrid').find('input.all').prop('checked', grid.selections.length == grid.data.length);
    }
});

$('button.getrecord').on('click', function() {
    console.clear();
    console.log($('#jsGrid').data().JSGrid.selections);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<button class="getrecord">Get Selected record</button>
<div id="jsGrid"></div>
...