在datagrid中toolbar添加searchbox查询框,根据列范围查询数据,先看效果图:

1. searchbox采用easyui的Demo例子,再加以js扩展,根据datagrid中的列数据自动生成选择查询范围。

  1. 1 <div id="testa" style="display:inline;padding-top:17px;">
  2. 2 <!-- 这里的padding-top是让搜索栏向下点,也就是与"添加"等按钮对齐,但在HTML里面不好用,在jsp页面中已测试可用 -->
  3. 3 <input id="sss" class="easyui-searchbox" searcher="qq" prompt="请输入查询内容" style="width:200px"></input>
  4. 4 <div id="mm" style="width:100px">
  5. 5 </div>
  6. 6 </div>
  1. 1 //循环列名,生成搜索的下拉列表
  2. 2 var fields = $('#dg').datagrid('getColumnFields');
  3. 3 var muit="";
  4. 4 for(var i=0; i<fields.length; i++){
  5. 5 var opts = $('#dg').datagrid('getColumnOption', fields[i]);
  6. 6 muit += "<div name='"+ fields[i] +"'>"+ opts.title +"</div>";
  7. 7 };
  8. 8 $('#mm').html($('#mm').html()+muit);
  9. 9 $('#sss').searchbox({
  10. 10 menu:'#mm'
  11. 11 });
  12. 12 //获取生成的搜索框
  13. 13 var a=$("#testa");
  14. 14 //将生成好的搜索框放入工具栏
  15. 15 $(".datagrid-toolbar").append(a);
  16. 16 });
  17. 17 function qq(value,name){
  18. 18 $('#dg').datagrid('load', { "searchKey": name, "searchValue": value });
  19. 19 }

2. 前台需将要查询的字段和值传给datagrid。其中searchKey为字段名,searchValue为所要查询的值。

  1. 1 function qq(value,name){
  2. 2 $('#dg').datagrid('load', { "searchKey": name, "searchValue": value });
  3. 3 }

3. 后台处理:接收前台传递的参数$_POST['searchkey'],$_POST['searchValue']

  1. 1 public function read(){
  2. 2 $pagenum=isset($_POST['page']) ? intval($_POST['page']) : 1;
  3. 3 $rowsnum=isset($_POST['rows']) ? intval($_POST['rows']) : 10;
  4. 4 $User=M("User");
  5. 5 if(isset($_POST['searchValue']) and $_POST['searchValue']!=""){
  6. 6 $userlist=array();
  7. 7 $map[$_POST['searchKey']]=array('like',array('%'.$_POST['searchValue'].'%'));
  8. 8 //$userlist=$User->where($_POST['searchKey'].'="'.$_POST['searchValue'].'"')->limit(($pagenum-1)*$rowsnum.','.$rowsnum)->order('id asc')->select();
  9. 9 //$total=$User->where($_POST['searchKey'].'="'.$_POST['searchValue'].'"')->count();
  10. 10 $userlist=$User->where($map)->limit(($pagenum-1)*$rowsnum.','.$rowsnum)->order('id asc')->select();
  11. 11 $total=$User->where($map)->count();
  12. 12 if ($total==0){
  13. 13 $userlist=array("firstname"=>'',"lastname"=>'',"phone"=>'',"email"=>'',"id"=>'');
  14. 14 $json='{"total":'.$total.',"rows":['.json_encode($userlist).']}';
  15. 15 echo $json;
  16. 16 }else{
  17. 17 $json='{"total":'.$total.',"rows":'.json_encode($userlist).'}';//重要,easyui的标准数据格式,数据总数和数据内容在同一个json中
  18. 18 echo $json;
  19. 19 }
  20. 20 }else{
  21. 21 $total = $User->count(); //计算总数
  22. 22 $userlist=array();
  23. 23 $userlist=$User->limit(($pagenum-1)*$rowsnum.','.$rowsnum)->order('id asc')->select();
  24. 24 if ($total==0){
  25. 25 $userlist=array("firstname"=>'',"lastname"=>'',"phone"=>'',"email"=>'',"id"=>'');
  26. 26 $json='{"total":'.$total.',"rows":['.json_encode($userlist).']}';
  27. 27 echo $json;
  28. 28 }else{
  29. 29 $json='{"total":'.$total.',"rows":'.json_encode($userlist).'}';//重要,easyui的标准数据格式,数据总数和数据内容在同一个json中
  30. 30 echo $json;
  31. 31 }
  32. 32 }
  33. 33 }

4.分析后台代码

  1. 首先判断是否要生成查询数据,条件是传递参数$_POST['searchKey']存在且不为空 。

    if(isset($_POST['searchValue']) and $_POST['searchValue']!="")

  2. 采用like查询语言扩大查询范围,$map[$_POST['searchKey']]=array('like',array('%'.$_POST['searchValue'].'%'));生成的查询代码是:$_POST['searchKey']

    like % $_POST['searchValue'] %

  3. 生成的查询记录要符合datagrid的json数据格式。其中json数据的总记录用count()生成,需位于where条件之后。

http://www.cnblogs.com/m199/archive/2012/12/20/2825720.html

ThinkPHP与EasyUI整合之三(searchbox):在datagrid中查询指定记录的更多相关文章

  1. ThinkPHP与EasyUI整合之二(datagrid):删除多条记录

    学习EasyUI已有一段时间了,现在开始逐步把平时学习的细节和难点记录下来. 1. datagrid选中多条记录的语句是: var rows = $('#dg').datagrid('getSelec ...

  2. Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能

    日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...

  3. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

  4. 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)

    前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...

  5. easyui datagrid中datetime字段的显示和增删改查问题

    datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...

  6. EasyUI 1.3之前DataGrid中动态选中、获取Checkbox

    这几天做项目,由于项目中用到的EasyUI版本过低,不能使用自带操作DataGrid中CheckBox的方法. 所以自己写了一个临时方案: 根据ID集合选中所属行的CheckBox: data={1, ...

  7. EasyUi DataGrid中数据编辑方式及编辑后数据获取,校验处理

    EasyUi中的DataGrid提供前台编辑的相关函数. 实现客户选中DataGrid中一列后,对选中列中的一个字段进行编辑,并对数据进行实时校验后,传递至后台保存的需求, 主要涉及到DataGrid ...

  8. Spring+SpringMVC+MyBatis+easyUI整合基础篇(六)maven整合SSM

    写在前面的话   承接前文<Spring+SpringMVC+MyBatis+easyUI整合基础篇(五)讲一下maven>,本篇所讲述的是如何使用maven与原ssm项目整合,使得一个普 ...

  9. Spring+SpringMVC+MyBatis+easyUI整合基础篇(八)mysql中文查询bug修复

    写在前面的话 在测试搜索时出现的问题,mysql通过中文查询条件搜索不出数据,但是英文和数字可以搜索到记录,中文无返回记录.本文就是写一下发现问题的过程及解决方法.此bug在第一个项目中点这里还存在, ...

随机推荐

  1. RequireJs 入门

    官网:http://www.requirejs.cn/ 使用方法: 1.引入require.js 可以在底部引入: <script type="text/javascript" ...

  2. CSS3:3D转换

    几个突破口:(为了更简洁理解,先忽略兼容) 1.认识3D的坐标系 rotateX()-----------元素绕X轴旋转 rotateY() -----------元素绕Y轴旋转 rotateZ() ...

  3. Oracle Process Cloud流程云实践

    本篇适合对Oracle Unified BPM有一定基础的人参考,本篇也是参考Oracle A-team  John Featherly的文章进行的实践. 1.      流程创建 打开cloud.o ...

  4. WebLogic Server 多租户资源迁移

    重新建立一个动态集群,并启动,注意监听地址不能和其他集群重合 选择相应的资源组进行迁移, 迁移后,访问新的地址成功. 通过OTD负载均衡器访问原有的地址成功. 直接访问原来后台地址失败,表示资源确实已 ...

  5. Unity GPU Query OpenGLES 3.0

    https://github.com/google/render-timing-for-unity/blob/master/RenderTimingPlugin/RenderTimingPlugin. ...

  6. Spark(十一) -- Mllib API编程 线性回归、KMeans、协同过滤演示

    本文测试的Spark版本是1.3.1 在使用Spark的机器学习算法库之前,需要先了解Mllib中几个基础的概念和专门用于机器学习的数据类型 特征向量Vector: Vector的概念是和数学中的向量 ...

  7. How to backup a remote PostgreSQL db and restore it locally?

    pg_dump and pg_restore 来备份和恢复数据库中的数据. 原文:  https://ksearch.wordpress.com/2012/09/28/how-to-backup-a- ...

  8. Node.js meitulu图片批量下载爬虫1.01版

    在 http://www.cnblogs.com/xiandedanteng/p/7614051.html 一文我曾经书写过一个图片下载爬虫,但原有程序不是为下载图片而设计故有些绕,于是稍微改写了一下 ...

  9. html5学习整理-0311

    整理一下今天所学的一些标签内容. 首先说一下DNS:全称Domain Name System,域名系统.是因特网上作为域名和IP地址相互映射的一个分布式数据库. URL协议:规定URL地址的格式,UR ...

  10. World Wind Java开发之三 显示状态栏信息

    先来看下本篇博客索要达到的效果: 找到源代码下的gov.nasa.worldwind.util下的StatusBar.java文件,能够看到状态栏显示的信息主要包含视点高度以及相应空间点三维坐标以及是 ...