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

news/2024/6/29 13:54:41

写的比较粗糙,望见谅。

要实现的效果:
827402-20151227121230109-464279636.jpg

代码如下:

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

http://lihuaxi.xjx100.cn/news/257832.html

相关文章

如何在Windows Server 2008 Core里面添加Role~~~

SERVER CORE 中添加服务器添加AD&#xff1a;在SERVER CORE 下安装AD必须使用UNATTEND文件来进行安装以下是一个UNATTED文件的实例; DCPROMO unattend file (automatically generated by dcpromo); Usage:; dcpromo.exe /unattend:F:\LONGHORN.txt;[DCInstall]; New forest p…

golang源码分析:调度器chan调度

golang调度机制chan调度 golang的调度策略中&#xff0c;碰见阻塞chan就会将该chan放入到阻塞的g中&#xff0c;然后再等待该chan被唤醒&#xff0c;这是golang调度器策略的主动调度策略之一&#xff0c;其中还有其他的主动调度策略包括进入调用系统调用或者主动调用Gosched时…

面了一个大佬,一看就背了很多面试题

2021都说工作不好找&#xff0c;其实也是对开发人员的要求变高了。正好前段时间自己有整理了一些Java后端开发面试常问的高频考点问题做成一份PDF文档&#xff08;1000道高频题&#xff09;&#xff0c;同时也整理一些图文解析及笔记。今天在这免费分享给大家&#xff0c;希望大…

王晓亮:关于技术人的十年!

↑↑↑关注后"星标"Datawhale每日干货 & 每月组队学习&#xff0c;不错过Datawhale干货 作者&#xff1a;王晓亮&#xff0c;南京大学&#xff0c;Datawhale成员在Datawhale有许多同学想了解技术路径、选型&#xff0c;乃至职业规划及个人成长方向问题。恰逢我毕…

公司用的 MySQL 团队开发规范

欢迎关注方志朋的博客&#xff0c;回复”666“获面试宝典数据库对象命名规范数据库对象数据库对象是数据库的组成部分&#xff0c;常见的有以下几种&#xff1a;表&#xff08;Table &#xff09;、索引&#xff08;Index&#xff09;、视图&#xff08;View&#xff09;、图表…

如何利用SOM网络进行柴油机故障诊断

如何利用SOM网络进行柴油机故障诊断

两个博士读完,学术能力翻一倍?Nature专访三位「双料博士」

视学算法报道 编辑&#xff1a;Aeneas 如願 【导读】众所周知&#xff0c;读一个博士就很难了&#xff0c;但有那么一些人&#xff0c;一个博士还不够&#xff0c;还要读两个&#xff01;是什么原因呢&#xff1f;他们读完之后觉得值得吗&#xff1f;对于很多人来说&#xff0…

跟面向对象卯上了,看看ES6的“类”

上回我们说到ES5的面向对象&#xff0c;以及被大家公认的最佳的寄生组合式继承。时代在进步&#xff0c;在ES6中对于面向对象这个大boss理所应当地进行了一次大改&#xff0c;从原先那种比较长的写法转变为“小清新”写法。我们一起来看一下。 在ES6中是有类这个概念&#xff0…