jqGrid之单选

原创于 2023-05-03 09:09:34 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #bootstrap

文章介绍了在jqGrid中遇到多选功能与前端框架可能存在的冲突问题，提出了一种解决方案：通过自定义列添加radio按钮来实现单选，并给出了相关代码示例。在删除操作时，通过检查radio选中状态获取选中行数据。

jqGrid不支持单选，本来也想借鉴网上的做法，通过对checkbox的处理来间接实现。但在实践中却发现设置了multiSelect后，checkbox并没有显示出来，怀疑是跟页面的其它前端框架如bootstrap有冲突，索性换个思路来实现：

在一列自行添加radio按钮，这列就起名为“操作”吧，代码如下：

colModel: [
{
name: 'ID', label: 'ID', index: 'ID', width: 80, align: 'left', hidden: true, sortable: false
}
, {
name: 'operate', label: '操作', width: 200, formatter: function (cellvalue, options, rowObject) {
return "<input type='radio' name='rdSelect' style='width:100px' > <a href='#' onclick=addGroup()>新增</a> <a href='#' onclick=delGroup()>删除</a>"
}
}

....

那么如果判断哪行是选中呢？比如要删除一行时，可以用下面的方法：

function delGroup() {

var rowDatas = jQuery("#Jqgrid_Group").jqGrid("getRowData");
var arrRadios = document.getElementsByName("rdSelect");
for (var i = 0; i < rowDatas.length; i++) {

if (arrRadios[i].checked) {
_rowData = rowDatas[i];
}

}

if (typeof (_rowData) == "undefined") {
alert("请选择要删除的整行");
return;
}

然后就可以从_rowData中获取你需要的任何列的值了，这样看上去是不是比checkbox效果更好呢？