Question

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

的值

Answer 1

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

我已将selections对象内的自定义jsGrid配置作为数组存储所选行。

*我在selections内的jsGrid数组中推送特定记录的完整对象。

我希望这有助于/指导您实现您的要求。

<强>样本

＆＃13;

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

＆＃13;

<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>

＆＃13;

获取jsgrid中隐藏列的值

1 个答案: