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

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

实现要求把全部的广告位后面的单选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" 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。触发单元格事件就被运行,获得该单元格的所在的行对象,然后就能够得到该行随意属性了。

EasyUI——DataGrid中嵌入Radio的更多相关文章

  1. 在EasyUI的DataGrid中嵌入Combobox

    在做项目时,须要在EasyUI的DataGrid中嵌入Combobox,花了好几天功夫,在大家的帮助下,最终看到了它的庐山真面: 核心代码例如以下: <html> <head> ...

  2. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

  3. JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列

    转自   http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中 使用datagrid生 ...

  4. easyui datagrid 中序列化后的日期格式化

    1.在easyui datagrid 中序列化后的日期显示为:/Date(1433377800000)/ 2.格式化后的显示为: 2015-06-04 08:30:00 3.使用代码如下: 3.1. ...

  5. easyui datagrid中datetime字段的显示和增删改查问题

    datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...

  6. EasyUi DataGrid中数据编辑方式及编辑后数据获取,校验处理

    EasyUi中的DataGrid提供前台编辑的相关函数. 实现客户选中DataGrid中一列后,对选中列中的一个字段进行编辑,并对数据进行实时校验后,传递至后台保存的需求, 主要涉及到DataGrid ...

  7. easyui dialog 中嵌入html页面

    最近使用easyui比较多,这个插件确实很好用.在使用时也遇到了大大小小的问题,好在都一一解决了. 记录一下今天遇到的问题. 目的:用easyui的dialog嵌入一个html页面(html中仍有要执 ...

  8. JQuery easyUi datagrid 中 editor 动态设置最大值最小值

    前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考.   问题 JQuery easyUi datagri ...

  9. easyui datagrid中关联combox

    datagrid中列上关联combobox{ field: 'SysCode', title: '系统代码', width: 150, align: 'left', editor: { type: ' ...

随机推荐

  1. 百度地图API的使用示例

    刚刚工作的时候写过百度地图API文档,那时候没有记录到技术博客里面,今天在群里看见有个姑娘在问这个问题,重温了一遍,这个API还算好用.百度地图API,集成简单好用,全面,兼容问题,文档全面: 官方文 ...

  2. Java基础学习总结(26)——JNDI入门简介

    JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一,不少专家认为,没有透彻理解JNDI的意义和作用,就没有 ...

  3. 【转】 Java 进行 RSA 加解密时不得不考虑到的那些事儿

    [转] Java 进行 RSA 加解密时不得不考虑到的那些事儿 1. 加密的系统不要具备解密的功能,否则 RSA 可能不太合适 公钥加密,私钥解密.加密的系统和解密的系统分开部署,加密的系统不应该同时 ...

  4. CO-PRIME(初探 莫比乌斯)NYOJ1066(经典)gcd(a,b)=1

    CO-PRIME 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描写叙述 This problem is so easy! Can you solve it? You are ...

  5. 大型网站架构之JAVA中间件

    中间件就是在大型网站中,帮助各子模块间实现互相访问,消息共享或统一访问等功能的软件产品.常见的有: 远程服务框架中间件:主要解决各子模块之间互相访问的问题. 消息队列中间件:主要解决各子模之间消息共享 ...

  6. Spring MVC 待学习---新特性

    Spring3.1新特性 一.Spring2.5之前,我们都是通过实现Controller接口或其实现来定义我们的处理器类.   二.Spring2.5引入注解式处理器支持,通过@Controller ...

  7. cf 822B Crossword solving

    B. Crossword solving time limit per test 1 second memory limit per test 256 megabytes input standard ...

  8. vue.js路由vue-router(一)——简单路由基础

    前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...

  9. 手把手教你在VMware虚拟机中安装Ubuntu14.04系统

    在VMware中创建完虚拟机之后,一般需要给虚拟机安装系统,比较受青睐的系统有Ubuntu和Centos,关于Centos系统的安装之前已经写过了,感兴趣的小伙伴可以戳这篇文章:靠谱的centos7. ...

  10. MD markdown入门

    1.Headings: 2.Phrase emphasis *italic text* **Bold text** 3.Listing items (在文字之前添加 + , - 或者 * ) -ite ...