前一篇博客写到项目中的广告位管理,当时没有写到今天的问题,这个问题当时也是困扰我好久。
经过自己的努力和同志们的帮助,最后最终解决。
实现要求把全部的广告位后面的单选button设成一组,目的是一个广告位仅仅能显示一张图片。仅仅是简单的在特定列加入单选button事实上并没有太大的难度,后期还要通过选中单选button把选中内容传回到Controller(这里用的是MVC),从网上找了不少资料而且通过Leader Wang的帮助,能够说实现方式有些曲折,但终于效果还是令人惬意。
核心代码例如以下:
<table id="tt"></table>
$(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" ο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
}
当选中了单选button。触发单元格事件就被运行,获得该单元格的所在的行对象,然后就能够得到该行随意属性了。