首页 新闻 搜索 专区 学院

如何用easyui来实现这个面板?(只要页面代码)

0
悬赏园豆:50 [已解决问题] 解决于 2016-01-05 11:11

如何用easyui来开发这个面板?

问题1:产品信息里面的品名,下拉时会显示刚刚输入过的名字

问题2:用户信息里面的用户账号和用户名,可以点击搜索按键,然后弹出一个框,这个框就是右边”用户账号/用户名“框。

问题3:在右边”用户账号/用户名“的”账号/用户名”里面还可以实现模糊查询,然后双击一个账号,填充到用户信息。

Night_charam_poison的主页 Night_charam_poison | 菜鸟二级 | 园豆:214
提问于:2015-12-27 12:22
< >
分享
最佳答案
0

没时间写代码,思路你看下:

问题1:如果是一次性的,可以将输入过的名字放在本地缓存中,或者是全局变量中,然后加载;

问题2:搜索按钮添加点击事件,创建一个窗口并显示就好了。

问题3:获取到搜索窗口选择的数据,然后通过id获取到用户信息里面的用户账号和用户名,设置其值就ok了。

收获园豆:50
seayxu | 大侠五级 |园豆:5468 | 2015-12-27 22:08

大哥,思路很好,可是代码写起来比这难多了,能不能有时间的时候写一下?

Night_charam_poison | 园豆:214 (菜鸟二级) | 2015-12-27 22:20

@Я│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>
View Code
seayxu | 园豆:5468 (大侠五级) | 2015-12-28 11:23

@SeayXu: 你好,我测试了一下,好像只实现了弹窗功能?

Night_charam_poison | 园豆:214 (菜鸟二级) | 2015-12-28 20:08

@Я│R、英俊: 问题2、3是可以实现的,至于用户名选择的那个是要你自己完成的,方法在那

seayxu | 园豆:5468 (大侠五级) | 2015-12-28 22:48
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册