easyui datagrid 单选框效果

最新推荐文章于 2021-11-01 09:06:03 发布

YBB_XJ

最新推荐文章于 2021-11-01 09:06:03 发布

阅读量997

点赞数

分类专栏：随笔

随笔专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何使用easyuiDataGrid组件实现单选框效果，并提供了加载成功后的处理逻辑，包括禁用某些行的操作以及点击单选框时的交互行为。

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

easyui datagrid 单选框效果

2013-04-26 19:51 711人阅读评论(1) 收藏举报

easyui DataGrid

columns: [[{
            field: 'oid',
            title: '选择',
            width: 20,
            formatter: function(value, rowData, rowIndex){
                return '<input type="radio" name="selectRadio" id="selectRadio"' + rowIndex + '   value="' + rowData.oid + '" />';
            }
        }

onLoadSuccess: function(data){
            //加载完毕后获取所有的checkbox遍历
            if (data.rows.length > 0) {
                //循环判断操作为新增的不能选择
                for (var i = 0; i < data.rows.length; i++) {
                    //根据operate让某些行不可选
                    if (data.rows[i].operate == "false") {
                        $("input[type='radio']")[i].disabled = true;
                    }
                }
            }
        },
        onClickRow: function(rowIndex, rowData){
            //加载完毕后获取所有的checkbox遍历
            var radio = $("input[type='radio']")[rowIndex].disabled;
            //如果当前的单选框不可选，则不让其选中
            if (radio!= true) {
                //让点击的行单选按钮选中
                $("input[type='radio']")[rowIndex].checked = true;
            }
            else {
                $("input[type='radio']")[rowIndex].checked = false;
            }
        }