jquery easy ui 简单字段选择搜索实现
code
<!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 简单字段选择搜索实现的更多相关文章
- 【JQuery Easy UI】后台管理系统的简单布局分享
重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
- JQuery Easy Ui （Tree树）详解（转）
第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
- JQuery Easy UI 简介
[什么是JQuery Easy UI?] jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合,而 jQuery EasyUI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并 ...
- Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
随机推荐
- 安装Python 3.6
原文地址:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143160904 ...
- Linux内核同步 - RCU synchronize原理分析
RCU(Read-Copy Update)是Linux内核比较成熟的新型读写锁,具有较高的读写并发性能,常常用在需要互斥的性能关键路径.在kernel中,rcu有tiny rcu和tree rcu两种 ...
- Linux内核(10) - 内核中的链表
早上上班坐地铁要排队,到了公司楼下等电梯要排队,中午吃饭要排队,下班了追求一个女孩子也要排队,甚至在网上下载个什么门的短片也要排队,每次看见人群排成一条长龙时,才真正意识到自己是龙的传人.那么下面咱们 ...
- Linux时间子系统(十七) ARM generic timer驱动代码分析
一.前言 关注ARM平台上timer driver(clocksource chip driver和clockevent chip driver)的驱动工程师应该会注意到timer硬件的演化过程.在单 ...
- Hive学习之函数DDL和Show、Describe语句
创建/删除函数 创建暂时函数 以下的语句创建由class_name实现的暂时函数,该函数被创建后仅仅能够在当前会话中使用.会话结束后函数失效. 实现函数的类能够是Hive类路径中的随意类.能够使用Ad ...
- Python3 列表 clear() 方法
描述 Python3 列表 clear() 方法用于清空列表,类似于 del a[:]. 语法 clear() 方法语法: L.clear() 参数 无. 返回值 该方法没有返回值. 实例 以下实例展 ...
- mysql-5.7 saving and restore buffer pool state 详解
一.mysql 重启要面临的问题: 由于重启后之前innodb buffer pool中缓存的数据就都没有了,如果这个时候业务SQL来临,mysql就只能是从磁盘中 读取数据到内存:可能要经过数个小时 ...
- Spring中xml文件配置也可以配置容器list、set、map
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- 并发编程之socketserver模块
一.socketserver模块介绍 基于tcp套接字,关键的就是两个循环,一个是链接循环,一个是通信循环 socketserver模块中分两大类:srever类(解决链接问题)和request类(解 ...
- [svc]logstash和filebeat之间ssl加密
cfssl生成证书 wget https://pkg.cfssl.org/R1.2/cfssl_linux-amd64 -O /usr/local/bin/cfssl wget https://pkg ...