EasyUI——DataGrid中嵌入Radio

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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

实现要求把全部的广告位后面的单选button设成一组，目的是一个广告位仅仅能显示一张图片。仅仅是简单的在特定列加入单选button事实上并没有太大的难度，后期还要通过选中单选button把选中内容传回到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函数对列进行格式化。使其显示单选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 }