EasyUI——DataGrid中嵌入Radio

一时失言乱红尘 2022-08-02 12:46 167阅读 0赞

**前一篇博客写到项目中的广告位管理，当时没有写到今天的问题，这个问题当时也是困扰我好久。经过自己的努力和同志们的帮助，最后终于解决。**

**实现要求把所有的广告位后面的单选按钮设成一组，目的是一个广告位只能显示一张图片。只是简单的在特定列添加单选按钮其实并没有太大的难度，后期还要通过选中单选按钮把选中内容传回到Controller（这里用的是MVC），从网上找了不少资料并且通过Leader Wang的帮助，可以说实现方式有些曲折，但最终效果还是令人满意。**

**核心代码如下：**

$(function () {
                $('#tt').datagrid({
                    url: '/AdvertisementManage/QueryAdvertisement',
                    title: '广告位管理（类型一）',
                    width: 700,
                    height: 'auto',
                    fitColumns: true,
                    pagination: true,//分页显示
                    rownumbers: true,
                    onClickCell: onClickCell,//点击单元格触发事件
                    columns: [[
                        { field: 'AdvertisementID', title: '序号', width: 90, align: 'center' },
                        { field: 'AdvertisementName', title: '赞助商', width: 111, align: 'center' },
                        { field: 'AdvertisementUrl', title: '广告位链接', width: 160, align: 'center' },
                        { field: 'TimeStamp', title: '添加时间', width: 80, align: 'center' },
                        { field: 'UserID', title: '操作员', width: 80, align: 'center' },
                        { field: 'AdvertisementLocation', title: '广告位置', width: 80, align: 'center' },
                        {
                            field: 'IsEnable', title: '是否显示', width: 60, align: 'center',
    
                            //调用formater函数对列进行格式化，使其显示单选按钮（所有单选按钮name属性设为统一，这样就只能有一个处于选中状态）
                            formatter: function (value, row, index) {
    
                                if (row.IsEnable == 1) {
                                    //如果属性值等于1，则处于选中状态（默认表格中所有单选按钮最多只能有一个值等于1）
                                    var s = '<input name="isShow" type="radio" checked="checked" οnclick="clk()"/> ';
    
                                }
                                else {
                                    var s = '<input name="isShow" type="radio" οnclick="clk()"/> ';
                                }
                                return s;
                            }
    
                        }
                    ]],
                    onHeaderContextMenu: function (e, field) {
                        e.preventDefault();
                        if (!$('#tmenu').length) {
                            createColumnMenu();
                        }
                        $('#tmenu').menu('show', {
                            left: e.pageX,
                            top: e.pageY
                        });
                    }
                });
            });
    
    
            var id = undefined;//公共变量
    
            //触发单元格事件
            function onClickCell(rowIndex, field, value) {
                var row = $("#tt").datagrid('selectRow', rowIndex);//返回触发单元格的行标
                var r1 = $("#tt").datagrid('getSelected');//返回被选中的行
                id = r1.AdvertisementID;//返回该行的id
    
            }

**当选中了单选按钮，触发单元格事件就被执行，获得该单元格的所在的行对象，然后就可以得到该行任意属性了。**