Bootstrap Table 搜索框和查询功能

1..知识点bootstrapTable 刷新和查询配置

2.提升js代码性能

1.减少全局变量声明

2.缓存dom节点查找结果

3.局部变量缓存全局变量

/**
 * @param col bootstrapTable列表生成配置对象
 */
var searchValue ={};//查询匹配对象
var $button = $('<div class="columns pull-right search-button"><button class="btn btn-default" type="button" name="refresh" title="查询"><i class="glyphicon glyphicon-search icon-search"></i></button></div>');
var $input = $('<div class="columns pull-right search-input"><input class="form-control" type="text" placeholder="搜索"></div>');
var $select = $('<div class="columns pull-right search-select"><select></select></div>');
var addSearchGroup = function(col)
{
   // 插入选项
   var button ,input,select;
   button = $button;input = $input;select = $select;////局部变量缓存全局变量 提高代码性能
   var selectDom = $select.find('select');////缓存dom节点查找结果 避免在循环里用
   for(var i = 0; i < col.length; i++){
     if(col[i].visible != false){
       var $option = '<option value="'+col[i].field+'">'+col[i].title+'</option>';
       selectDom.append($option);
     }
   }
   //插入多选框、输入框、按钮
   $('.fixed-table-toolbar').append(button,input,select);
}
/*
button = $button
*/
searchAction($button);
function searchAction(button){
  //写入上一次查询的条件
   if(searchValue.select != undefined){
     $select.find('select').val(searchValue.select);
   };
   if(searchValue.input != undefined){
     $input.find('input').val(searchValue.input);
   };
   //写入查询条件
   // 获取查询选项
   button.click(function(){
      var option = $select.find('select').val();
      var inputval = $input.find('input').val();
      searchValue.select =option;
      searchValue.inputval =inputval;
   //定义刷新参数
     if(inputval != ''){
       var param = {
         url: sWebRootPath+"/json/getAjaxData.jsp?v="+new Date().getTime(),
         query: {
           filters:[
             {'colname':option,'filtertype':'LIKE','filtervalues':inputval}
           ]
         }
       }
     }else{
       var param = {
        url: sWebRootPath+"/json/getAjaxData.jsp?v="+new Date().getTime(),
       }
     }
      // 刷新表格
    $('#tablelist').bootstrapTable('refresh',param);
    });
} 

总结

以上所述是小编给大家介绍的Bootstrap Table 搜索框和查询功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 使用bootstraptable插件实现表格记录的查询、分页、排序操作

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用.Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询.分页.排序.复选框.设置显示列.Card view视图.主从表显示.合并列.国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行.移动列位置等一些特殊的功能,插件可

  • 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了SpringMVC国际化 效果 DataTable表格 关键字查询 自定义关键字查询,非DataTable Search 代码 HTML代码 查询条件代码 <!-- 查询.添加.批量删除.导出.刷新 --> <div class="row-fluid"> <di

  • Bootstrap Table使用整理(五)之分页组合查询

    推荐阅读: Bootstrap Table使用整理(一) http://www.jb51.net/article/115789.htm Bootstrap Table使用整理(二)  http://www.jb51.net/article/115791.htm Bootstrap Table使用整理(三)  http://www.jb51.net/article/115795.htm Bootstrap Table使用整理(四)之工具栏 http://www.jb51.net/article/1

  • Bootstrap table学习笔记(2) 前后端分页模糊查询

    在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下,顺便做个总结: 1.前端分页 2.后端分页 3.模糊查询 前端分页相当简单,在我添加了2w条测试数据的时候打开的很流畅,没有卡顿. $(function(){ a(); }); function a () { $('#yourtable').bootstrapTable({ url: "/user/getUserList/", method:"post", dataType: "json&

  • Bootstrap Table 搜索框和查询功能

    1..知识点bootstrapTable 刷新和查询配置 2.提升js代码性能 1.减少全局变量声明 2.缓存dom节点查找结果 3.局部变量缓存全局变量 /** * @param col bootstrapTable列表生成配置对象 */ var searchValue ={};//查询匹配对象 var $button = $('<div class="columns pull-right search-button"><button class="btn

  • Servlet+Ajax实现智能搜索框智能提示功能

    利用无刷新技术智能变换搜索框的提示,同百度搜索 效果图 其基本原理: 1.给搜索框编写js绑定事件onkeyup(键盘输入时).onfocus(当鼠标点击搜索框外的时候清空提示) 2.首先获得用户输入.之后将获得的数据传给服务器,服务器将数据传给后台,后台获取服务器传来的数据进行处理,得到关联数据,向前端返回json格式,前端通过回调函数,将返回来的json解析成文本,将文本传输到搜索框下方的展示窗 如下为支持json的jar包 search.jsp <%@ page language="

  • Angular实现下拉框模糊查询功能示例

    本文实例讲述了Angular实现下拉框模糊查询功能.分享给大家供大家参考,具体如下: 前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的.对应偏重于数据处理的项目还是非常有优势的. 写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了. 1. 普通方式实现 <!DOCTYPE html> <html> <head lang="zh_CN"> <meta charset="utf-8"

  • Select下拉框模糊查询功能实现代码

    select下拉列表框支持输入模糊查询功能,设计非常的人性化,下面小编给大家分享了关键代码,大家根据自己的需求适当的添加修改,有任何问题欢迎给我反馈. 关键代码如下所示: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>可输入的下拉框</TITLE> </HEAD> <BODY > <S

  • 微信小程序使用uni-app实现首页搜索框导航栏功能详解

    目录 前言 一.兼容APP与H5的方式 二.兼容小程序 三.实现同时兼容 前言 首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效果如下 App.H5效果 小程序效果 一.兼容APP与H5的方式 在常见titleNView配置代码示例中可以看到基本样式的代码如下 { "pages": [{ "path": "pages/index/index", //首页 "style"

  • JS仿百度搜索自动提示框匹配查询功能

    1. 添加动态加载css文件 不需要引入css css全部在JS动态生成.2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码 代码如下: <div class=&q

  • asp.net使用jquery实现搜索框默认提示功能

    文本框中创建默认文本提示 通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索. 当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. 当文本框没有任何值并失去焦点,文本框内容会重新生成默认提示. 为了实现上面的需求,代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.

  • ajax+php 谷歌搜索框自动填充功能 实例代码

    复制代码 代码如下: <html> <head> <script language="javascript"><!-- var http_request; function update(v){ if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { /

  • JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等.今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法. bootstrap table系列: JS表格组件神器bootstrap table详解(基础版) JS组件系列之Bootstrap table表格组件神器[终结篇] JS组件系列之Bootstrap t

  • JS组件系列之Bootstrap table表格组件神器【终结篇】

    bootstrap table系列: JS表格组件神器bootstrap table详解(基础版) JS组件系列之Bootstrap table表格组件神器[终结篇] JS组件系列之Bootstrap table表格组件神器[二.父子表和行列调序] Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等.那么本文给大家介绍JS组件系列之Bootstrap

随机推荐