[easyUI] datagrid选择一行进行操作时的一个问题

今天使用easyUI的datagrid遇到的一个问题是:

选择一行以后,点击另外一行的编辑按钮,

发现将之前选中的那行内容加载到了编辑菜单中,而不是新点击的这行。(已经设置了单选)

我把这种问题称为“延迟选择”。


我这里是通过getSelections方法获得要编辑的内容加载到编辑菜单中的,

所以从这个问题可以看到,在编辑菜单中调用getSelections方法时,当前被选中的行还是之前选中的那行,

还没来得及切换到点击编辑的这行上。


所以解决的办法是将要编辑这行的id传入编辑菜单,然后根据id选中这行,

这时候再使用getSelections方法获得这行的各项字段加载到编辑菜单中。

代码如下:

<span style="white-space:pre">		</span>if (id != undefined) {
			dataGrid.datagrid('selectRecord',id);
		} 
		var rows = dataGrid.datagrid('getSelections');
		var id = rows[0].id;
		var	name = rows[0].name;
		var	code = rows[0].intentCode;
		var managerName = rows[0].salesManagerName;
		dataGrid.datagrid('unselectAll').datagrid('uncheckAll');

也许还存在更好的解决办法,欢迎讨论。



以下是一个EasyUI datagrid editor选择年的例子: HTML代码: ``` <table id="dg" title="用户列表" class="easyui-datagrid" style="width:700px;height:250px" url="get_users.php" toolbar="#toolbar" rownumbers="true" pagination="true" singleSelect="true" fitColumns="true" data-options="onDblClickRow:onDblClickRow"> <thead> <tr> <th field="id" width="50">ID</th> <th field="name" width="100">姓名</th> <th field="age" width="50">年龄</th> <th field="gender" width="50">性别</th> <th field="birthday" width="100" editor="{type:'datebox',options:{required:true}}">生日</th> </tr> </thead> </table> <div id="toolbar"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加用户</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑用户</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除用户</a> </div> <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons"> <div class="ftitle">用户信息</div> <form id="fm" method="post" novalidate> <div class="fitem"> <label>姓名:</label> <input name="name" class="easyui-validatebox" required="true"> </div> <div class="fitem"> <label>年龄:</label> <input name="age" class="easyui-numberbox" required="true"> </div> <div class="fitem"> <label>性别:</label> <select name="gender" class="easyui-combobox" required="true"> <option value="男">男</option> <option value="女">女</option> </select> </div> <div class="fitem"> <label>生日:</label> <input name="birthday" class="easyui-datebox" required="true"> </div> </form> </div> <div id="dlg-buttons"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close')">取消</a> </div> ``` JavaScript代码: ``` $(function(){ $('#dg').datagrid({ onClickRow: function(index, row){ // 单击行事件 $('#dg').datagrid('beginEdit', index); // 开始编辑 } }); }); function newUser(){ $('#dlg').dialog('open').dialog('setTitle','添加用户'); $('#fm').form('clear'); } function editUser(){ var row = $('#dg').datagrid('getSelected'); if (row){ $('#dlg').dialog('open').dialog('setTitle','编辑用户'); $('#fm').form('load',row); } } function destroyUser(){ var row = $('#dg').datagrid('getSelected'); if (row){ $.messager.confirm('确认','您确定要删除此用户吗?',function(r){ if (r){ $.post('destroy_user.php',{id:row.id},function(result){ if (result.success){ $('#dg').datagrid('reload'); // 重新加载数据 } else { $.messager.show({ // 弹出消息框 title: 'Error', msg: result.errorMsg }); } },'json'); } }); } } function saveUser(){ $('#fm').form('submit',{ url: 'save_user.php', onSubmit: function(){ return $(this).form('validate'); }, success: function(result){ var result = eval('('+result+')'); if (result.success){ $('#dlg').dialog('close'); // 关闭对话框 $('#dg').datagrid('reload'); // 重新加载数据 } else { $.messager.show({ // 弹出消息框 title: 'Error', msg: result.errorMsg }); } } }); } ``` 在上面的代码中,我们使用了EasyUI的datebox组件作为datagrid中生日列的编辑器,这个组件可以选择年月日。 如果你只想选择年份,可以使用EasyUI的combobox组件,设置数据源为年份列表即可。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值