EasyUI 之 datagrid 显示单选radio

     首先就实现而言分为代码实现、标签和代码实现。

     （1）代码实现 具体参考 http://blog.csdn.net/u010926964/article/details/46965213 感谢这位大神

               代码参考如下：          

     

        $(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 = '<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

        }

           （2） 标签和代码  参考页面 http://blog.163.com/liu_hai_feng@126/blog/static/43580500201342910313833/ 不知道是哪位大神

              参考代码如下：我写的

             标签 ：

<table id="datagrid" class="easyui-datagrid" fit="true"
			url="${path}/menu/datagrid" 
			toolbar="#toolbar" 
			pagination="true"
			fitColumns="true" 
			singleSelect="true" 
			rownumbers="true"
			striped="true"
			border="false" 
			nowrap="false">
			<thead>
				<tr>
				    <th field="CK" width="50" formatter ="RadioFormatter"></th>
					<th field="id" width="50">序号</th>
					<th field="name" width="100">名称</th>
					<th field="url" width="100">资源路径</th>
				</tr>
			</thead>
		</table>

              代码如下：

            

RadioFormatter = function (value, rec, index) {
        return "<input id='radio_id' name='radio_name' type='radio' value='" + rec.id + "'/>";
    };
    
    $(document).ready(function(){ //呈现列表数据    	
    	$('#datagrid').datagrid({ onClickRow:
    	            function () {
    	                //单击行的时候，将单选按钮设置为选中
    	                var SelectedRow = $('#datagrid').datagrid("getSelected");
    	                $("input[name='radio_name'][value='"+SelectedRow.id+"']").attr("checked", true);  
                        //第二种循环查找方法  	              
    	                /*
    	                $("input[name='radio_name']").each(function () {      	                
    	                    if ($(this).val() == SelectedRow.id) {    
    	                    	//alert("this="+$(this).val()+",SelectedRow.id=" +SelectedRow.id);
    	                        $(this).attr("checked", true);
    	                    }
    	                });
    	                */
    	            }
    	        });
    	});

实现是实现了，但是要是点击频率高的话，会有选不中的问题，以后再说吧。