给easyui datagrid添加搜索栏

最新推荐文章于 2021-04-02 03:17:17 发布
最新推荐文章于 2021-04-02 03:17:17 发布
阅读量4.1k 收藏 2
点赞数
分类专栏： Jeasyui 文章标签： 给easyui datagrid添加搜索
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bingjie1217/article/details/21229047
版权

效果：

源码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<div class="easyui-panel" title="DataGrid with searching box" icon="icon-save" style="width:680px;height:420px;" collapsible="true" minimizable="true" maximizable=true closable="true">
    <div class="easyui-layout" fit="true">
        <div region="north" border="false" style="border-bottom:1px solid #ddd;height:32px;padding:2px 5px;background:#fafafa;">
            <div style="float:left;">
                <a href="#" class="easyui-linkbutton" plain="true" icon="icon-add">新增</a>
            </div>
			<div class="datagrid-btn-separator"></div>
			 <div style="float:left;">
                <a href="#" class="easyui-linkbutton" plain="true" icon="icon-save">编辑</a>
            </div>
			<div class="datagrid-btn-separator"></div>
			 <div style="float:left;">
				<a href="#" class="easyui-linkbutton" plain="true" icon="icon-remove">删除</a>
            </div>
            <div style="float:right;">
               <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:''" style="width:130px;vertical-align:middle;"></input>
			   <a href="#" class="easyui-linkbutton" plain="true">高级检索</a>
            </div>
        </div>
        <div region="center" border="false">
            <table id="tt"></table>
        </div>
    </div>
</div>
<script>
$('#tt').datagrid({
    fit:true,
    border:false,
    url:'../datagrid/datagrid_data1.json',
    idField:'code',
    columns:[[
       {field:'itemid',width:80,title:'Item ID'}, 
	   {field:'productid',width:100,title:'Product'},
	   {field:'listprice',width:80,align:'right',title:'List Price'},
	   {field:'unitcost',width:80,align:'right',title:'Unit Cost'},
	   {field:'attr1',width:240,title:'Attribute'},
	   {field:'status',width:60,align:'center',title:'Status'}
    ]],
    pagination:true,
    rownumbers:true
});
</script>

</body>
</html>

代码二： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <table class="easyui-datagrid" style="width:600px;height:250px"  
        url="../datagrid/datagrid_data1.json"   
        title="DataGrid - Complex Toolbar" toolbar="#tb"  
        singleSelect="true" fitColumns="true">  
    <thead>  
        <tr>  
            <th field="itemid" width="60">ID</th>  
            <th field="productid" width="80">Product ID</th>  
            <th field="listprice" align="right" width="70">List Price</th>  
            <th field="unitcost" align="right" width="70">Unit Cost</th>  
            <th field="attr1" width="200">地址</th>  
            <th field="status" width="50">状态</th>  
        </tr>  
    </thead>  
</table>

	<div id="tb">
        <div region="north" border="false" style="border-bottom:1px solid #ddd;height:28px;padding:2px 2px 2px 2px;background:#fafafa;">
            <div style="float:left;">
                <a href="#" class="easyui-linkbutton" plain="true" icon="icon-add">新增</a>
                <a href="#" class="easyui-linkbutton" plain="true" icon="icon-save">编辑</a>
				<a href="#" class="easyui-linkbutton" plain="true" icon="icon-remove">删除</a>
            </div>
			<div class="datagrid-btn-separator"></div>
            <div style="float:right;">
               <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:''" style="width:130px;vertical-align:middle;"></input>
			   <a href="#" class="easyui-linkbutton" plain="true" >高级检索</a>
            </div>
        </div>
	</div>
</body>
</html>

数据： 

{"total":28,"rows":[
	{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}

用心工作-快乐生活
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
JQUERY-EASYUI添加搜索框
01-17
jquery-easyui+插件jquery-searchbox在datagrid中添加搜索框
easyui datagrid toolbar 添加搜索框
热门推荐
u013682146的专栏
04-16 1万+
1.jsp 页面 tb：datagrid工具栏  search：搜索框div层 sss：esayui-searchbox 包含 searcher=“”属性，指定搜索方法 mm：搜索选项，选择不同搜索类型 添加用户 导入用户 查看/更新用户 删除用户 查看/分配角
在jquery easyui中的datagrid中添加searchbox!
08-12
研究了好久，终于成功在jquery easyui中的datagrid中添加searchbox!
jQuery EasyUI使用教程之在数据网格中添加搜索功能
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
12-11 736
jQuery EasyUI最新版下载> 在本教程中，我们将向你展示如何从数据库中获取数据，并将其显示到数据网格中，然后演示如何根据用户输入的搜索关键字搜索显示结果。 查看演示 创建数据网格 创建具有分页功能的数据网格，然后将工具栏添加到其中。 1 2 3 4 5 6 7 8 9 10
easyUI的dataGrid的使用DEMO
09-07
- `dataGrid` 提供了丰富的用户交互元素，如分页工具栏、搜索框、状态栏等，提升了用户体验。 这个DEMO是学习和实践 EasyUI dataGrid 的好材料，涵盖了前端展示、后端数据处理和数据库操作的全链条。通过这个DEMO...
easyUI的dataGrid重画
08-05
在本文中，我们将深入探讨如何在EasyUI框架中实现`dataGrid`的重画功能，特别是在自定义搜索框和调整默认按钮大小方面。EasyUI是一个基于jQuery的UI库，提供了丰富的组件，包括`dataGrid`，它是一个强大的数据展示...
给easyui datagrid 添加搜索条件
wxwinnie0903的专栏
07-03 743
请原谅我最近才认真的使用easyui，在使用到数据列表展示的
为easyUI的dataGrid添加自己的查询框
懒人的博客
08-05 4097
为easyUI的dataGrid添加自己的查询框
jquery easyUI 实现动态生成多条件查询功能
04-08
谁在jquery easyUI 下做过动态生成多条件查询功能，动态添加一行（一个条件）：参数名（多个字段名）、关系符（>、=、<=、=）、比较值（input）。大体就这样，点击“添加条件”，生成上面描述的一行，这个在jquery easyUI 框架下如何实现，再者，假如post表单提交，服务器脚本如何获取和组装前台提交过来的多个条件。
Jquery-easyui添加搜索框
08-18
Jquery-easyui添加搜索框,
如何给easyui datagrid toolbar上方添加搜索框
weixin_34319817的博客
05-25 399
2019独角兽企业重金招聘Python工程师标准>>> ...
easyUI searchBox搜索框的实现
shuangyidehudie的专栏
02-22 5038
easyui searchBox 搜索框 [html] view plaincopy body class="easyui-layout" data-options="fit:true">       div data-options="region:'center',border:false"           style="overfl
easyui datagrid 如何嵌入以toolbar形式的搜索功能
feitian19873000的专栏
08-02 5974
怎样在easyui内嵌入搜索框，本人查看了好多资料，以及easyui文档，有如下体会，希望能给大家带来帮助！ 首先：看下功能截图   二.在看页面加载datagrid代码： //组grid创建 function groupgrid(url){ $('#leftGroupGrid').datagrid({ title:'字典表分组', icon
easyui php 查询条件,jQuery easyui datagrid动态查询数据实例讲解
weixin_34710938的博客
04-02 139
该插件组小巧使用方便，以下是一个从前台提交查询条件，从MSSQL返回json数据的一个事例HTML前端代码include_once("auth.php");?>function FindData(){$('#mytable').datagrid('load',{PersonCode:$('#PersonCode').val(),KQYM:$('#KQYM').val()});}url="lo...
03.手把手教你 .Net EasyUI DataGrid(带搜索功能的数据表格)
lemoncorporation的博客
05-22 8715
我们将数据展示出来，自然少不了对某条数据的搜索，所以搜索功能是必不可少的！ 效果图3-1： （1）提交参数到后台的方法 我们在datagrig的toolbar（工具栏）区定义了一个input用来输入要检索的数据，一个easyui-combobox用来设置排序，然后一个按钮用来提交参数到服务器， 那么DataGrid提交参数的方法有不少，常用的两种方法如下： 1
easyui datagrid 搜索功能
weixin_33852020的博客
01-13 113
1 Array.prototype.contains = function(obj) { 2 var i = this.length; 3 while (i--) { 4 if (this[i] === obj) { 5 return true; 6 ...
EasyUI之combogrid添加toolbar实现数据下拉框动态搜索功能
绣花针
01-14 2765
一、效果演示 二、Jsp部分代码  &lt;!--搜索框toolbar--&gt; &lt;div class="datagrid-toolbar" id="searchtools" style="width:100%;height:38px;"&gt; &lt;div style="margin-left:9px;float:left;"&amp
easyui datagrid添加超链接在表格中
最新发布
06-01
要在 EasyUI Datagrid 中添加超链接，可以使用 formatter 属性来格式化表格中的数据。 以下是一个示例代码，展示如何在表格中添加超链接： ``` $('#datagrid').datagrid({ url:'data.json', columns:[[ {field:'name',title:'Name',width:100}, {field:'link',title:'Link',width:100,formatter:function(value,row,index){ return '<a href="'+value+'">'+value+'</a>'; }} ]] }); ``` 在这个示例中，我们使用了 formatter 函数来格式化 "link" 字段。该函数会将该字段的值转换成一个超链接。 在 formatter 函数中，我们通过拼接字符串的方式来创建超链接。我们将链接地址作为 href 属性，同时也将其作为链接文本来显示。 注意，如果要在 EasyUI Datagrid 中使用超链接，需要保证数据中包含完整的链接地址。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值