Question

我正在使用kendo网格，我必须选择多条记录，但我遇到了如何选择多行并获取数组中该行的ID的麻烦。

这是我的代码：

    <a id="del_mul_button" style="float:right;" class="btn btn-info del_selected"><i class="icon-edit icon-white"></i>Delete selected files</a>

$("#grid_data").kendoGrid({
                dataSource: dataSource,
                height: 650,
                mobile: true,
                filterable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: ['all',5, 10, 20,50,100,150],
                    buttonCount: 5
                },
                editable:"inline",
                columns:[
                    {field:"experince_id",hidden:true},
                    // { field:"experince_id", template: "<input type='checkbox' name='sel_chkbx' class='chkbx' />" },

                    {field:"experince_id", template: "<input name='sel_chkbx' class='checkbox' type='checkbox' #= experince_id ? checked='' : '' #/>" },

                    {field:"tour_name",title:"Tour name",filterable:false,width: "160px",attributes: {style: "font-size: 14px"},headerAttributes: {style: "font-size: 14px"}},
                    {field:"tour_description",title:"Tour description",filterable:false,width: "200px",attributes: {style: "font-size: 14px"},headerAttributes: {style: "font-size: 14px"}},
                    {field:"tags",title:"Tags",filterable:false,width: "150px",attributes: {style: "font-size: 14px"},headerAttributes: {style: "font-size: 14px"}},
                    {field:"public_private_group",title:"Public private group",filterable:false,width: "140px",attributes: {style: "font-size: 14px"},headerAttributes: {style: "font-size: 14px"}},
                    {field:"places_exp",title:"Description",filterable:false,width: "160px",attributes: {style: "font-size: 14px"},headerAttributes: {style: "font-size: 14px"}},
                    { command: [
                        {
                            text: "",
                            name: "Edit",
                            click: prompt_edit_gallery,
                            imageClass: "fa fa-pencil",
                        },
                        {
                            text: "",
                            name: "Delete",
                            click: prompt_delete_gallery,
                            imageClass: "fa fa-trash"
                        }], 
                            title: "Operation", width: "160px",headerAttributes: {style: "font-size: 14px"}
                    }

                ]
            });

jQuery('.del_selected').on('click', function(e) { 


                if(($('input[name="sel_chkbx"]:checked').length)==0)
                {
                    alert("Please select a file to delete");
                    return;
                }

                var checkboxlist='';
                $('input[name="sel_chkbx"]').each(function(i,e) 
                {

                        if ($(e).is(':checked')) {

                            var comma = checkboxlist.length===0?'':',';

                            checkboxlist += (comma+e.value);
                        }
                    //    alert(checkboxlist);

                });

Answer 1

第二列中出现语法错误，会出现一个复选框。您忘了在复选框中添加value属性。

像这样更改第二列配置

{
    field: "experince_id",
    template: "<input name='sel_chkbx' class='checkbox' type='checkbox' value=#=experince_id#>"
}

然后按钮上的onclick事件应该如下所示

$('.del_selected').on('click', function (e){
    if (($('input[name="sel_chkbx"]:checked').length) == 0) {
        alert("Please select a file to delete");
        return;
    }

    var checkboxlist = [];
    $('input[name="sel_chkbx"]').each(function (i, e) {
        if ($(e).is(':checked')) {
            checkboxlist.push(e.value);
        }
    });
    console.log(checkboxlist.join(","));
});

如何获取kendo grid多选复选框值？

1 个答案: