写的比较粗糙,望见谅。
要实现的效果:
代码如下:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>jQuery EasyUI Application 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/themes/color.css"><link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css"><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>
</head>
<body><div id="panelinfo" class="easyui-panel" title="My Panel" style="width:300px;height:250px;padding:10px;" ><div class="ftitle">User Information</div><form id="ff" action="" method="post" enctype="multipart/form-data"><table><tr><td>Account:</td><td><input id="account" name="account" class="f1 easyui-textbox easyui-searchbox" data-options="searcher:doSearch" /></td></tr><tr><td>Name:</td><td><input id="name" name="name" class="f1 easyui-textbox" /></td></tr><tr><td>Email:</td><td><input id="email" name="email" class="f1 easyui-textbox" /></td></tr><tr><td>Phone:</td><td><input id="phone" name="phone" class="f1 easyui-textbox" /></td></tr></table></form></div><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"><table id="dg" data-options="singleSelect:true"></table></div><div id="dlg-toolbar" style="padding:2px 0"><input class="easyui-searchbox" data-options="prompt:'Please input somthing',searcher:doSearchUser" style="width:100%" /></div><div id="dlg-buttons"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:doSelect()">Select</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">Close</a></div><script type="text/javascript">var data = [{'dlg_accoutn':'100000', 'dlg_name':'00000'},{'dlg_accoutn':'100001', 'dlg_name':'11111'},{'dlg_accoutn':'100002', 'dlg_name':'22222'},{'dlg_accoutn':'100003', 'dlg_name':'33333'},{'dlg_accoutn':'100004', 'dlg_name':'44444'},{'dlg_accoutn':'100005', 'dlg_name':'55555'},{'dlg_accoutn':'100006', 'dlg_name':'66666'},{'dlg_accoutn':'100007', 'dlg_name':'77777'},{'dlg_accoutn':'100008', 'dlg_name':'88888'},{'dlg_accoutn':'100009', 'dlg_name':'99999'},{'dlg_accoutn':'100010', 'dlg_name':'111000'},{'dlg_accoutn':'100011', 'dlg_name':'222111'},{'dlg_accoutn':'100012', 'dlg_name':'333222'},{'dlg_accoutn':'100013', 'dlg_name':'444333'},{'dlg_accoutn':'100014', 'dlg_name':'555444'},{'dlg_accoutn':'100015', 'dlg_name':'666555'},{'dlg_accoutn':'100016', 'dlg_name':'777666'},{'dlg_accoutn':'100017', 'dlg_name':'888777'},{'dlg_accoutn':'100018', 'dlg_name':'999888'},{'dlg_accoutn':'100019', 'dlg_name':'111222'},{'dlg_accoutn':'100020', 'dlg_name':'222333'},{'dlg_accoutn':'100021', 'dlg_name':'333444'},{'dlg_accoutn':'100022', 'dlg_name':'444555'}];$(function() {$('#dlg').dialog('close');})function doSelect () {var row = $('#dg').datagrid('getSelected');console.log(row);if (row) {$('#account').textbox('setValue',row['dlg_accoutn']);$('#account').textbox('setText',row['dlg_accoutn']);$('#name').textbox('setValue',row['dlg_name']);$('#name').textbox('setText',row['dlg_name']);};$('#dlg').dialog('close');}function doSearch () {$('#dlg').dialog('open');$('#dg').datagrid({data:data,columns:[[{field:'dlg_accoutn',title:'Account',width:100},{field:'dlg_name',title:'Name',width:100}]]});}function doSearchUser () {var tmp = [{'dlg_accoutn':'100017', 'dlg_name':'888777'},{'dlg_accoutn':'100018', 'dlg_name':'999888'},{'dlg_accoutn':'100019', 'dlg_name':'111222'},{'dlg_accoutn':'100020', 'dlg_name':'222333'},{'dlg_accoutn':'100021', 'dlg_name':'333444'},{'dlg_accoutn':'100022', 'dlg_name':'444555'}];$('#dg').datagrid('loadData',tmp);//$('#dg').datagrid('reload');}</script>
</body>
</html>