如何用easyui来实现这个面板？(只要页面代码)
0
最佳答案
0
没时间写代码，思路你看下：
问题1：如果是一次性的，可以将输入过的名字放在本地缓存中，或者是全局变量中，然后加载；
问题2：搜索按钮添加点击事件，创建一个窗口并显示就好了。
问题3：获取到搜索窗口选择的数据，然后通过id获取到用户信息里面的用户账号和用户名，设置其值就ok了。
收获园豆：50
大哥，思路很好，可是代码写起来比这难多了，能不能有时间的时候写一下？
@Я│R、英俊:
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery EasyUI Application Demo</title> 6 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> 7 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> 8 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css"> 9 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css"> 10 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> 11 <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> 12 </head> 13 <body> 14 <div id="panelinfo" class="easyui-panel" title="My Panel" style="width:300px;height:250px;padding:10px;" > 15 <div class="ftitle">User Information</div> 16 <form id="ff" action="" method="post" enctype="multipart/form-data"> 17 <table> 18 <tr> 19 <td>Account:</td> 20 <td><input id="account" name="account" class="f1 easyui-textbox easyui-searchbox" data-options="searcher:doSearch" /></td> 21 </tr> 22 <tr> 23 <td>Name:</td> 24 <td><input id="name" name="name" class="f1 easyui-textbox" /></td> 25 </tr> 26 <tr> 27 <td>Email:</td> 28 <td><input id="email" name="email" class="f1 easyui-textbox" /></td> 29 </tr> 30 <tr> 31 <td>Phone:</td> 32 <td><input id="phone" name="phone" class="f1 easyui-textbox" /></td> 33 </tr> 34 </table> 35 </form> 36 </div> 37 <div id="dlg" class="easyui-dialog" style="width:220px;height:450px;" data-options="title:'Select User Info',toolbar:'#dlg-toolbar',buttons: '#dlg-buttons',modal:true"> 38 <table id="dg" data-options="singleSelect:true"></table> 39 </div> 40 <div id="dlg-toolbar" style="padding:2px 0"> 41 <input class="easyui-searchbox" data-options="prompt:'Please input somthing',searcher:doSearchUser" style="width:100%" /> 42 </div> 43 <div id="dlg-buttons"> 44 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:doSelect()">Select</a> 45 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">Close</a> 46 </div> 47 48 <script type="text/javascript"> 49 var data = [ 50 {'dlg_accoutn':'100000', 'dlg_name':'00000'}, 51 {'dlg_accoutn':'100001', 'dlg_name':'11111'}, 52 {'dlg_accoutn':'100002', 'dlg_name':'22222'}, 53 {'dlg_accoutn':'100003', 'dlg_name':'33333'}, 54 {'dlg_accoutn':'100004', 'dlg_name':'44444'}, 55 {'dlg_accoutn':'100005', 'dlg_name':'55555'}, 56 {'dlg_accoutn':'100006', 'dlg_name':'66666'}, 57 {'dlg_accoutn':'100007', 'dlg_name':'77777'}, 58 {'dlg_accoutn':'100008', 'dlg_name':'88888'}, 59 {'dlg_accoutn':'100009', 'dlg_name':'99999'}, 60 {'dlg_accoutn':'100010', 'dlg_name':'111000'}, 61 {'dlg_accoutn':'100011', 'dlg_name':'222111'}, 62 {'dlg_accoutn':'100012', 'dlg_name':'333222'}, 63 {'dlg_accoutn':'100013', 'dlg_name':'444333'}, 64 {'dlg_accoutn':'100014', 'dlg_name':'555444'}, 65 {'dlg_accoutn':'100015', 'dlg_name':'666555'}, 66 {'dlg_accoutn':'100016', 'dlg_name':'777666'}, 67 {'dlg_accoutn':'100017', 'dlg_name':'888777'}, 68 {'dlg_accoutn':'100018', 'dlg_name':'999888'}, 69 {'dlg_accoutn':'100019', 'dlg_name':'111222'}, 70 {'dlg_accoutn':'100020', 'dlg_name':'222333'}, 71 {'dlg_accoutn':'100021', 'dlg_name':'333444'}, 72 {'dlg_accoutn':'100022', 'dlg_name':'444555'} 73 ]; 74 75 $(function() { 76 $('#dlg').dialog('close'); 77 }) 78 79 function doSelect () { 80 var row = $('#dg').datagrid('getSelected'); 81 console.log(row); 82 if (row) { 83 $('#account').textbox('setValue',row['dlg_accoutn']); 84 $('#account').textbox('setText',row['dlg_accoutn']); 85 $('#name').textbox('setValue',row['dlg_name']); 86 $('#name').textbox('setText',row['dlg_name']); 87 }; 88 $('#dlg').dialog('close'); 89 } 90 91 function doSearch () { 92 $('#dlg').dialog('open'); 93 $('#dg').datagrid({ 94 data:data, 95 columns:[[ 96 {field:'dlg_accoutn',title:'Account',width:100}, 97 {field:'dlg_name',title:'Name',width:100} 98 ]] 99 }); 100 } 101 102 function doSearchUser () { 103 var tmp = [ 104 {'dlg_accoutn':'100017', 'dlg_name':'888777'}, 105 {'dlg_accoutn':'100018', 'dlg_name':'999888'}, 106 {'dlg_accoutn':'100019', 'dlg_name':'111222'}, 107 {'dlg_accoutn':'100020', 'dlg_name':'222333'}, 108 {'dlg_accoutn':'100021', 'dlg_name':'333444'}, 109 {'dlg_accoutn':'100022', 'dlg_name':'444555'}]; 110 $('#dg').datagrid('loadData',tmp); 111 //$('#dg').datagrid('reload'); 112 } 113 </script> 114 </body> 115 </html>
@SeayXu: 你好，我测试了一下，好像只实现了弹窗功能？
@Я│R、英俊: 问题2、3是可以实现的，至于用户名选择的那个是要你自己完成的，方法在那