博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
EasyUI——DataGrid中嵌入Radio
阅读量:6079 次
发布时间:2019-06-20

本文共 2576 字,大约阅读时间需要 8 分钟。

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

实现要求把所有的广告位后面的单选按钮设成一组,目的是一个广告位只能显示一张图片。只是简单的在特定列添加单选按钮其实并没有太大的难度,后期还要通过选中单选按钮把选中内容传回到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 = ' ';                            }                            else {                                var s = ' ';                            }                            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        }

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

转载地址:http://zxegx.baihongyu.com/

你可能感兴趣的文章
lvm,磁盘配额
查看>>
政府网站群建设关注点
查看>>
深入理解计算机操作系统--读书笔记-第八章异常
查看>>
我的友情链接
查看>>
Windows 2016 容錯移轉叢集安裝 (1) 叢集安裝
查看>>
Servlet 工作原理解析
查看>>
【Java】按行写入文件
查看>>
官方Guide-python版本
查看>>
目前可用的中国maven2镜像(2013-05-07)
查看>>
海明校验码--确定校验位
查看>>
tomcat目录学习
查看>>
Unit19 What brings you to BeiJing?
查看>>
MySQL数据库参数设置不当导致应用不能连接问题
查看>>
足以代替Apache的Nginx
查看>>
普通大学物理【杨雅玲】--流体力学--做题笔记1
查看>>
如何设置电脑自动关机
查看>>
解决EMC单片机多次烧录的办法
查看>>
部分浏览器版本支持渐变背景色
查看>>
redhat忘记root密码解决方法
查看>>
我的友情链接
查看>>