EasyUI——DataGrid中嵌入Radio

前一篇博客写到项目中的广告位管理，当时没有写到今天的问题，这个问题当时也是困扰我好久。

经过自己的努力和同志们的帮助，最后最终解决。

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

核心代码例如以下：

        <table id="tt"></table>

        $(function () {
            $('#tt').datagrid({
                url: '/AdvertisementManage/QueryAdvertisement',
                title: '广告位管理（类型一）',
                 700,
                height: 'auto',
                fitColumns: true,
                pagination: true,//分页显示
                rownumbers: true,
                onClickCell: onClickCell,//点击单元格触发事件
                columns: [[
                    { field: 'AdvertisementID', title: '序号',  90, align: 'center' },
                    { field: 'AdvertisementName', title: '赞助商',  111, align: 'center' },
                    { field: 'AdvertisementUrl', title: '广告位链接',  160, align: 'center' },
                    { field: 'TimeStamp', title: '加入时间',  80, align: 'center' },
                    { field: 'UserID', title: '操作员',  80, align: 'center' },
                    { field: 'AdvertisementLocation', title: '广告位置',  80, align: 'center' },
                    {
                        field: 'IsEnable', title: '是否显示',  60, align: 'center',

                        //调用formater函数对列进行格式化。使其显示单选button（全部单选buttonname属性设为统一。这样就仅仅能有一个处于选中状态）
                        formatter: function (value, row, index) {

                            if (row.IsEnable == 1) {
                                //假设属性值等于1，则处于选中状态（默认表格中全部单选button最多仅仅能有一个值等于1）
                                var s = '<input name="isShow" type="radio" checked="checked" onclick="clk()"/> ';

                            }
                            else {
                                var s = '<input name="isShow" type="radio" onclick="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

        }

当选中了单选button。触发单元格事件就被运行，获得该单元格的所在的行对象，然后就能够得到该行随意属性了。