JqGrid之Checkbox选中不生效-yellowcong-CSDN博客

本文链接：https://blog.csdn.net/yelllowcong/article/details/78038940

jqGrid的复选框操作的时候，需求是，Grid中的复选框，当单选框用，只能点击一个，这个功能通过监听grid里面的checkbox,然后设定选中事件，但是问题是，设定之后，数据没有效果，解决的思路是通过JqGrid的getRowData的方法获取所有数据，然后手动处理checkbox的数据

单选效果

如图，下面的grid中，需要实现单选的效果
这里写图片描述

监听#gridRakuData 里面checkbox的click事件，然后遍历所有的checkbox设定不选中，最后设定点击的单元格选中

//--------------------------------------------------------------------------------------
//GRID のcheckbox設定
//--------------------------------------------------------------------------------------
function initGridCheckBox(){
    $("#gridRakuData input[type='checkbox']").click(function(e){
        var $obj =$(this);
        if($obj.is(':checked')){
            $("#gridRakuData input[type='checkbox']").each(function(){
                $(this).attr("checked",false);
            });
            $obj.prop("checked","checked");
        }
    });
}

Checkbox选中后，Grid没有数据的问题

getLocalRow获取数据

//获取那一行的数据，这个方法获取不到checkbox的数据
$("#gridRakuData").getLocalRow(3)

这里写图片描述

getRowData获取数据

//获取所有的数据，可以获取到Checkbox数据，但是变成了Yes和No，需要自己手动处理数据
$("#gridRakuData").getRowData()

这里写图片描述

代码

//--------------------------------------------------------------------------------------
//GRIDデータ設定
//--------------------------------------------------------------------------------------
function setGridData2Form(){
    //获取可以监听CHeckbox的数据
    var rowNoFormatData = $("#gridRakuData").getRowData();

    var rowIds = $("#gridRakuData").jqGrid('getDataIDs');
    var gridData=new Array()
    for(var row =0;row<rowIds.length;row++){
        var rowData = $("#gridRakuData").getLocalRow(rowIds[row]);
        //手动判断，并设置数据
        rowData['chk'] = rowNoFormatData[row]['chk'] =="Yes" ? 1:0;
        gridData.push(rowData);
    }
    var gridResult = {"dataList":gridData}
    //将数据变成json类型
    $("#rakuGridJsonData").val(JSON.stringify(gridResult));
}

//html中，记得JSON字符传值的value 是单引号
<input type="hidden" id="rakuGridJsonData" name="rakuGridJsonData"  value='${rakuGridJsonData}'/>