首页 > 代码库 > 网格演示 - 弹出对话框的方式新增网格数据
网格演示 - 弹出对话框的方式新增网格数据
- 创建对话框
1 <%--新增时候弹出的对话框--%> 2 <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" 3 closed="true" buttons="#dlg-buttons"> 4 <div class="ftitle">User Information</div> 5 <form id="fm" method="post"> 6 <div class="fitem"> 7 <label>First Name:</label> 8 <input name="firstname" class="easyui-validatebox" required="true"> 9 </div> 10 <div class="fitem"> 11 <label>Last Name:</label> 12 <input name="lastname" class="easyui-validatebox" required="true"> 13 </div> 14 <div class="fitem"> 15 <label>Phone:</label> 16 <input name="phone"> 17 </div> 18 <div class="fitem"> 19 <label>Email:</label> 20 <input name="email" class="easyui-validatebox" validType="email"> 21 </div> 22 </form> 23 </div> 24 <div id="dlg-buttons"> 25 <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a> 26 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" 27 onclick="javascript:$(‘#dlg‘).dialog(‘close‘)">Cancel</a> 28 </div>
- 网格对象上点击新增的时候弹出新增对话框
1 toolbar: [ 2 { 3 iconCls: ‘icon-add‘, 4 handler: function () { 5 $(‘#dlg‘).dialog(‘open‘).dialog(‘setTitle‘, ‘New User‘); 6 $(‘#fm‘).form(‘clear‘); 7 } 8 9 }, ‘-‘, { 10 iconCls: ‘icon-edit‘, 11 handler: function () { 12 alert("修改"); 13 } 14 }, ‘-‘, { 15 iconCls: ‘icon-remove‘, 16 handler: function () { 17 alert("移除"); 18 } 19 } 20 ],
- 实现save方法
function saveUser(){ $(‘#fm‘).form(‘submit‘,{ url: "<%=homePage%>/test/testController.ajax?datagrid=1", onSubmit: function(){ return $(this).form(‘validate‘); }, success: function(result){ var result = eval(‘(‘+result+‘)‘); if (result.errorMsg){ $.messager.show({ title: ‘Error‘, msg: result.errorMsg }); } else { $(‘#dlg‘).dialog(‘close‘); // close the dialog $(‘#dg‘).datagrid(‘reload‘); // reload the user data } } }); }
网格演示 - 弹出对话框的方式新增网格数据
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。