datagrid多选

最新推荐文章于 2024-05-23 09:08:14 发布

weixin_30266885

最新推荐文章于 2024-05-23 09:08:14 发布

阅读量1.5k

点赞数

原文链接：http://www.cnblogs.com/yifeiyang/p/10684338.html

版权

该博客介绍了如何在Datagrid组件中启用多选功能，通过特定的属性配置，实现用户能够选择多个行数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自带多选加属性

checkOnSelect: 'true',
列表显示为：

{
    field: 'itemid',
    title: 'Order ID',
    width: 200,
    checkbox: true
},

取选中的值：   var selectrow = $("#studentList").datagrid("getChecked");//获取的是数组，多行数据




自己写的多选，引入了css/magic-check.css。重写复选框
列表显示为

columns: [
    [
        {
             field: 'ck', print: false, toExcel: false, align: 'Center',
             halign: 'center',
             title: '<input type="checkbox" id="check_all" class="magic-checkbox" οnclick="checkall()"/>' + '<label for="check_all" οnclick="checkall()"/>',
             formatter: function (value, row, index) {
             var result = "";
             result += '<input type="checkbox" id="' + row.id + '" class="magic-checkbox"/>';
             result += '<label for="' + row.id + '"/>';
             return result;
             }
         }
]

全选事件：

dormidArray为全局变量，保存选中信息。

function checkall() {

    var isChecked = $("#check_all").is(":checked");
    if (isChecked) {
        $("#check_all").prop("checked", false);
        $("input.magic-checkbox").prop("checked", false);
        dormidArray = [];
    } else {
        $("#check_all").prop("checked", true);
        $("input.magic-checkbox").prop("checked", true);
        var dormInfos = $("#yxDormCheckIn").datagrid("getRows");
        for(var i = 0; i<dormInfos.length; i++){
            dormidArray.push(dormInfos[i].id);
        }
    }
}

单选事件：

$(function () {

$('#yxDormCheckIn').datagrid({
    onClickRow: function (rowIndex, rowData) {
        var rowCheck = "#" + rowData.id;
        var tf = $(rowCheck).is(":checked");
        if (tf) {
            $(rowCheck).prop("checked", false);
            var checkId= rowData.id;
            for(var i=0;i<=dormidArray.length;i++){
                if(dormidArray[i]==checkId

){
                    dormidArray.splice(i,1);
                    break;
                }
            }
        } else {
            $(rowCheck).prop("checked", true);
            dormidArray.push(rowData.id);
        }
    }
});
}

转载于:https://www.cnblogs.com/yifeiyang/p/10684338.html