jQuery EasyUI 动态设置Radio的奇怪现象

山野村夫 2011-07-12 01:12:56
类似管网deom的AJAX From
http://www.jeasyui.com/tutorial/app/crud/index.html

“修改”窗口有个Radio组，通过判断DataGrid当前行“Status”的值动态设置Radio的选中项



<input name="Status" type="radio" value="1"/>正常

<input name="Status" type="radio" value="0"/>暂停







if (row.Status=="1"){

  $("input:radio[name=Status][value=1]").attr("checked", "true");

}else{

   $("input:radio[name=Status][value=0]").attr("checked", "true");

}


只有第一次打开正常，第二次就始终保持之前的选中结果
...全文
5285 26 打赏 收藏 转发到动态 举报
写回复
用AI写文章
26 条回复
切换为时间正序
请发表友善的回复…
发表回复
山野村夫 2011-07-23
  • 打赏
  • 举报
 回复
1.2.4
stworthy 2011-07-22
  • 打赏
  • 举报
 回复
你用的是那个版本，试试最新的1.2.4有没有修正。
山野村夫 2011-07-22
  • 打赏
  • 举报
 回复
高

仰望
Go 旅城通票 2011-07-19
  • 打赏
  • 举报
 回复
最终修正版，修正checkbox为多选的，注意checkbox为多选的时候json的键名称对应的值为数组[1,3,4]，而不是字符串"1,3,4"这种
$("input[name="+name+"]",form).not(':checkbox,:radio').val(val);

$("input[name='"+name+"'][value='"+val+"']:radio,input[name='"+name+"'][value='"+val+"']:checkbox",form).attr('checked', true);

if(typeof val=='object'){var cbSelector='';for(var i=0;i<val.length;i++)cbSelector+="input[name='"+name+"'][value='"+val[i]+"']:checkbox";if(cbSelector!='')$(cbSelector.substring(1)).attr('checked',true);}
山野村夫 2011-07-19
  • 打赏
  • 举报
 回复
期待官方解决了。
Go 旅城通票 2011-07-19
  • 打赏
  • 举报
 回复
真的。。。easyui将name相同的radio的值全部设置为row里面的对应的键的值了，，⊙﹏⊙b汗

看了下源代码，下面这句直接重设了radio和checkbox的value了，+_+
$("input[name="+_14+"]",_13).val(val);

我帮他出补丁行了，O(∩_∩)O~找到jquery.easyui.min.js文件中的这句
$("input[name="+name+"]",form).val(val);
替换为下面的就行了

$("input[name="+name+"]",form).not(':checkbox,:radio').val(val);

$("input[name='"+name+"'][value='"+val+"']:radio,input[name='"+name+"'][value='"+val+"']:checkbox",form).attr('checked', true);
山野村夫 2011-07-18
  • 打赏
  • 举报
 回复
打开很慢，代码很长不知道能放下不



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta name="keywords" content="jquery,ui,easy,easyui,web">

	<meta name="description" content="easyui help you build your web page easily!">

	<title>jQuery EasyUI CRUD Demo</title>

	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">

	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">

	<style type="text/css">

		#fm{

			margin:0;

			padding:10px 30px;

		}

		.ftitle{

			font-size:14px;

			font-weight:bold;

			color:#666;

			padding:5px 0;

			margin-bottom:10px;

			border-bottom:1px solid #ccc;

		}

		.fitem{

			margin-bottom:5px;

		}

		.fitem label{

			display:inline-block;

			width:80px;

		}

	</style>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>

	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

	<script type="text/javascript">

		var url;

		function newUser(){

			$('#dlg').dialog('open').dialog('setTitle','New User');

			$('#fm').form('clear');

			url = 'save_user.php';

		}

		function editUser(){

			var row = $('#dg').datagrid('getSelected');

			if (row){

				$('#dlg').dialog('open').dialog('setTitle','Edit User');

				$('#fm').form('load',row);

				url = 'update_user.php?id='+row.id;

			}

		}

		function saveUser(){

			$('#fm').form('submit',{

				url: url,

				onSubmit: function(){

					return $(this).form('validate');

				},

				success: function(result){

					var result = eval('('+result+')');

					if (result.success){

						$('#dlg').dialog('close');		// close the dialog

						$('#dg').datagrid('reload');	// reload the user data

					} else {

						$.messager.show({

							title: 'Error',

							msg: result.msg

						});

					}

				}

			});

		}

		function removeUser(){

			var row = $('#dg').datagrid('getSelected');

			if (row){

				$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){

					if (r){

						$.post('remove_user.php',{id:row.id},function(result){

							if (result.success){

								$('#dg').datagrid('reload');	// reload the user data

							} else {

								$.messager.show({	// show error message

									title: 'Error',

									msg: result.msg

								});

							}

						},'json');

					}

				});

			}

		}

	</script>

</head>

<body>

	<h2>Basic CRUD Application</h2>

	<div class="demo-info" style="margin-bottom:10px">

		<div class="demo-tip icon-tip"> </div>

		<div>Click the buttons on datagrid toolbar to do crud actions.</div>

	</div>

	

	<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"

			url="get_users.php"

			toolbar="#toolbar"

			rownumbers="true" fitColumns="true" singleSelect="true">

		<thead>

			<tr>

				<th field="firstname" width="50">First Name</th>

				<th field="lastname" width="50">Last Name</th>

				<th field="phone" width="50">Phone</th>

				<th field="email" width="50">Email</th>

			</tr>

		</thead>

	</table>

	<div id="toolbar">

		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>

		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>

		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>

	</div>

	

	<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"

			closed="true" buttons="#dlg-buttons">

		<div class="ftitle">User Information</div>

		<form id="fm" method="post">

			<div class="fitem">

				<label>First Name:</label>

				<input name="firstname" class="easyui-validatebox" required="true">

			</div>

			<div class="fitem">

				<label>Last Name:</label>

				<input name="lastname" class="easyui-validatebox" required="true">

			</div>

			<div class="fitem">

				<label>Phone:</label>

				<input name="phone">

			</div>

			<div class="fitem">

				<label>Email:</label>

				<input name="email" class="easyui-validatebox" validType="email">

			</div>

		</form>

	</div>

	<div id="dlg-buttons">

		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>

		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>

	</div>

</body>

</html>
Go 旅城通票 2011-07-18
  • 打赏
  • 举报
 回复
打不开这个url，难道被HX了。。hoho~~
山野村夫 2011-07-18
  • 打赏
  • 举报
 回复
完全按照官网实例
http://www.jeasyui.com/tutorial/app/crud/index.html

只是增加一个性别数据，通过radio方式实现

json数据已调试正常，显示也正常，在读取当前行数据填写到修改用户窗口时，radio的值全部被初始化为1



function editUser(){

    var row = $('#dg').datagrid('getSelected');

    if (row){

      $('#dlg').dialog('open').dialog('setTitle','Edit User');

      $('#fm').form('load',row);

      url = 'update_user.php?id='+row.id;

    }

}
山野村夫 2011-07-18
  • 打赏
  • 举报
 回复
晕，上面的代码copy错了


fm.Sex[0].value=1;

fm.Sex[1].value=0;
山野村夫 2011-07-18
  • 打赏
  • 举报
 回复
目前只有每次动态重新设置下radio组的值，看来官方不出补丁没法解决了



if (row.Status=="1"){

					fm.Status[0].checked=true;

				}else{

					fm.Status[1].checked=true;

				}
山野村夫 2011-07-18
  • 打赏
  • 举报
 回复
每行的json数据肯定不一样的（性别），load的当前行数值为0或1。

$('#fm').form('load', row); 时将表单sex的radio组的value都自动填写为1了
Go 旅城通票 2011-07-18
  • 打赏
  • 举报
 回复
var row = $('#dg').datagrid('getSelected');获取到的应该就是你那行的数据，Sex是什么就应该是什么，jquery easyui应该不会重设你的值。

json的键是区分大小写的，你是不是Sex没区分大小写什么的？

function editUser() {

            var row = $('#dg').datagrid('getSelected');

            if (row) {

                $('#dlg').dialog('open').dialog('setTitle', 'Edit User');

                $('#fm').form('load', row);



alert(row.Sex)////////输出值看看是不是数据库里面对应的值



                nowRowIndex = $('#dg').datagrid('getRowIndex', row);

                //url = 'update_user.php?id='+row.id;

            }

        }


山野村夫 2011-07-18
  • 打赏
  • 举报
 回复
晕，代码部分不能加[b]标签
山野村夫 2011-07-18
  • 打赏
  • 举报
 回复
感谢楼上，不够我的问题不是reload的问题

实例中，用load读取当前行数据并填写在表单中。我自己增加了表单项，用radio展示，由于load函数，导致
radio的值全部变成了1

EditUser函数，注意加黑的部分


function editUser() {

            var row = $('#dg').datagrid('getSelected');

            if (row) {

                $('#dlg').dialog('open').dialog('setTitle', 'Edit User');

                $('#fm').form('load', row);

                nowRowIndex = $('#dg').datagrid('getRowIndex', row);

                //url = 'update_user.php?id='+row.id;

            }

        }


表单增加性别radio


<div class="fitem">

    <label>性别：</label>

    <input name="Sex" type="radio" value="1"/>男 

     <input name="Sex" type="radio" value="0"/>女

</div>
Go 旅城通票 2011-07-18
  • 打赏
  • 举报
 回复
研究了下datadir，其实不用reload数据源，直接更新下数据源就行了，然后refreshRow。

下面是我测试用的，没得问题，改成数据源是本地的了，因为我这里没有php运行环境
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="keywords" content="jquery,ui,easy,easyui,web">

    <meta name="description" content="easyui help you build your web page easily!">

    <title>jQuery EasyUI CRUD Demo</title>

    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../themes/icon.css">

    <style type="text/css">

        #fm{

            margin:0;

            padding:10px 30px;

        }

        .ftitle{

            font-size:14px;

            font-weight:bold;

            color:#666;

            padding:5px 0;

            margin-bottom:10px;

            border-bottom:1px solid #ccc;

        }

        .fitem{

            margin-bottom:5px;

        }

        .fitem label{

            display:inline-block;

            width:80px;

        }

    </style>

    <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="../../jquery-easyui-1.2.1/jquery.easyui.min.js"></script>

    <script type="text/javascript">

        var url, dataGrid, nowRowIndex;

        function newUser(){

            $('#dlg').dialog('open').dialog('setTitle', 'New User');

            $('#fm').form('clear');

            nowRowIndex = -1;

           // url = 'save_user.php';

        }

        function editUser() {

            var row = $('#dg').datagrid('getSelected');

            if (row) {

                $('#dlg').dialog('open').dialog('setTitle', 'Edit User');

                $('#fm').form('load', row);

                nowRowIndex = $('#dg').datagrid('getRowIndex', row);

                //url = 'update_user.php?id='+row.id;

            }

        }

        function saveUser() {

           /* $('#fm').form('submit', {

                url: url,

                onSubmit: function () {

                    return $(this).form('validate');

                },

                success: function (result) {

                    var result = eval('(' + result + ')');

                    if (result.success) {

                        $('#dlg').dialog('close');        // close the dialog

                        $('#dg').datagrid('reload');    // reload the user data

                    } else {

                        $.messager.show({

                            title: 'Error',

                            msg: result.msg

                        });

                    }

                }

            });*/

            if ($('#fm').form('validate')) {

                var f = $('#fm').get(0);

                if (nowRowIndex != -1) {

                    $('#dg').datagrid('getData').rows[nowRowIndex] = { firstname: f.firstname.value, lastname: f.lastname.value, sex: f.sex[0].checked ? 'Male' : 'Female', phone: f.phone.value, email: f.email.value }; ;

                    $('#dg').datagrid('refreshRow', nowRowIndex);

                }

                else $('#dg').datagrid('appendRow', { firstname: f.firstname.value, lastname: f.lastname.value, sex: f.sex[0].checked ? 'Male' : 'Female', phone: f.phone.value, email: f.email.value });

                $('#dlg').dialog('close');

            }

        }

        function removeUser() {

            var row = $('#dg').datagrid('getSelected');

            if (row) {

                $.messager.confirm('Confirm', 'Are you sure you want to remove this user?', function (r) {

                    if (r) {

                        /* $.post('remove_user.php', { id: row.id }, function (result) {

                        if (result.success) {

                        $('#dg').datagrid('reload');    // reload the user data

                        } else {

                        $.messager.show({    // show error message

                        title: 'Error',

                        msg: result.msg

                        });

                        }

                        }, 'json');*/

                        $('#dg').datagrid('deleteRow',$('#dg').datagrid('getRowIndex', row));

                    }

                });

            }

        }

    </script>

</head>

<body>

    <h2>Basic CRUD Application</h2>

    <div class="demo-info" style="margin-bottom:10px">

        <div class="demo-tip icon-tip"> </div>

        <div>Click the buttons on datagrid toolbar to do crud actions.</div>

    </div>

    

    <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"

            url="get_users.php"

            toolbar="#toolbar"

            rownumbers="true" fitColumns="true" singleSelect="true">

        <thead>

            <tr>

                <th field="firstname" width="50">First Name</th>

                <th field="lastname" width="50">Last Name</th>

                <th field="sex" width="50">Sex</th>

                <th field="phone" width="50">Phone</th>

                <th field="email" width="50">Email</th>

            </tr>

        </thead>

    </table>

    <div id="toolbar">

        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>

        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>

        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>

    </div>

    

    <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"

            closed="true" buttons="#dlg-buttons">

        <div class="ftitle">User Information</div>

        <form id="fm" method="post">

            <div class="fitem">

                <label>First Name:</label>

                <input name="firstname" class="easyui-validatebox" required="true">

            </div>

            <div class="fitem">

                <label>Last Name:</label>

                <input name="lastname" class="easyui-validatebox" required="true">

            </div>

            <div class="fitem">

                <label>Sex:</label>

                <input name="sex" type="radio" class="easyui-validatebox" required="true" value="male">Male　<input name="sex" type="radio" class="easyui-validatebox" required="true" value="femail">Female

            </div>

            <div class="fitem">

                <label>Phone:</label>

                <input name="phone">

            </div>

            <div class="fitem">

                <label>Email:</label>

                <input name="email" class="easyui-validatebox" validType="email">

            </div>

        </form>

    <div id="dlg-buttons">

        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>

        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>

    </div>

    </div>

</body>

</html>

Go 旅城通票 2011-07-14
  • 打赏
  • 举报
 回复
你是如何获取row对象的？
最好能贴出你的代码，这样好帮你分析
山野村夫 2011-07-13
  • 打赏
  • 举报
 回复
人工UP一下下
山野村夫 2011-07-12
  • 打赏
  • 举报
 回复 


fm.Status[0].value=1;

fm.Status[1].value=0;


目前只有这样重新初始化下，请问有没有其他办法？
山野村夫 2011-07-12
  • 打赏
  • 举报
 回复
知道问题在哪里了，不知道如何解决


$('#fm').form('load',row);


加载数据时，将radio的值全部改成了1
加载更多回复（6）
jquery.radio.js
jquery的easyUI框架，单选按钮插件封装
基于easyui 1.4.5的单选和多选框组件
基于jQuery EasyUI 1.4.5写的单选框和多选框组件，里面有readme文档说明和示例，属性、事件和方法的具体说明可参考Combo和ComboBox的文档说明
jquery获取radio值(单选组radio)
jquery获取radio值使用到特殊的选择器type=radio，为方便大家理解，另附一个jquery实例，想学习的朋友可以看看
jquery checkbox,radio是否选中的判断代码
1：判断radio 代码如下: var selected = $(‘input[name=selectid:checked]’).val();//若未被选中 则val() = null if(selected == null){ alert(“未选中！”); }else{ alert(“选中！”); } 2：判断checkbox 代码如下: var n = $(“input:checked”).length; if(n==0){ alert(“未选中！”); }else{ alert(“选中！”); } $(“div”).text(n + (n <= 1 ? ” is” : ” are”
jQuery前端框架easyui使用Dialog时bug处理
最近一直都在用easyui前端框架来开发设计UI，但在使用Dialog时，发现如果页面内容比较多，就会出现问题，首先看一下我的原代码： 代码如下:  <input type=”button” value=”确认预约” id=”btnconfirm” onclick=”[removed]openconfirmDlg();” />    
Ajax

52,797

社区成员

25,305

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章