时间戳

首页 > 解决方案 > 获取jsgrid中隐藏列的值

javascript - 获取jsgrid中隐藏列的值

问题描述

我正在使用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？

标签： javascriptjqueryjsgrid

解决方案

在jsGrid文档中，我没有找到任何有关或获取隐藏列的方法，但您可以像下面手动实现一样执行以获取选定的记录/ID。

我已经将对象selections内部的自定义配置jsGrid作为数组存储到其中。

*我正在将特定记录的完整对象推selections入jsGrid.

演示

$("#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>

推荐阅读