jquery easy ui 简单字段选择搜索实现

写的比较粗糙，望见谅。

要实现的效果：

代码如下：

<!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>

jquery easy ui 简单字段选择搜索实现相关推荐

7个jquery easy ui 基本组件图解
下面给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head><meta charset=&q ...
jQuery Easy UI ProgressBar（进度条）组件
ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...
jQuery Easy UI Panel(面板)组件
panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...
初学jQuery Easy UI的总结
1.使用jQuery Easy UI的目的: jQuery Easy UI是一组基于jQuery的UI插件集合,而jQuery Easy UI 的目标就是帮助Web开发者更轻松的打造出功能丰 ...
Jquery Easy UI Datagrid 上下移动批量保存数据
DataGrid with 上下移动批量保存数据通过前端变量保存修改数据集合,一次性提交后台执行本想结合easyui 自带的$('#dg').datagrid('getChanges'); 方法来 ...
第四十四课：jQuery UI和jQuery easy UI
jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...
easyUI布局篇使用jquery easy UI的panel和layout实现界面的自适用窗口
1.问题: 最近在做AIUESUite v1.0的开发,基本上按照前期的规划,把现有的功能都一步步的实现,但是因为我们基于easy ui 的二次开发牵扯到屏幕的自适用问题一直都困扰着我们,这里我们针对 ...
jquery easy ui 1.3.4 数据表格(DataGrid)（8）
8.1.创建DataGrid html代码 <table id="dg"></table> $("#dg").datagrid({ // ...
JQuery Easy Ui dataGrid 数据表格 --转
转至: http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html#events 数据表格 - DataGrid 内容概况使用方法 ...

jquery easy ui 简单字段选择搜索实现

代码如下：

jquery easy ui 简单字段选择搜索实现相关推荐

最新文章

热门文章