热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

BootstrapTable搜索框和查询功能

这篇文章主要介绍了BootstrapTable搜索框和查询功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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

2.提升js代码性能

1.减少全局变量声明

2.缓存dom节点查找结果

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

/** 
 * @param col bootstrapTable列表生成配置对象 
 */ 
var searchValue ={};//查询匹配对象 
var $button = $('
'); var $input = $('
'); var $select = $('
'); 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[i].title+''; 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 搜索框和查询功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了中央电视台电影频道的节目预告,并通过专业工具分析了其加载方式,确保用户能够获取最准确的电视节目信息。 ... [详细]
  • 探讨在循环中调用$.post()时,回调函数为何会在循环结束后才开始执行,并提供解决方案和优化建议。 ... [详细]
  • 本文详细解析了如何使用Python的urllib模块发起POST请求,并通过实例展示如何爬取百度翻译的翻译结果。 ... [详细]
  • 本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具,适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件,并解释bundle.js中包含的核心功能,如路由等。 ... [详细]
  • 探讨了如何解决Ajax请求响应时间过长的问题。本文分析了一个从服务器获取少量数据的Ajax请求,尽管服务器已经对JSON响应进行了缓存,但实际响应时间仍然不稳定。 ... [详细]
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 在Web开发过程中,Ajax技术常用于前后端数据交互。其中一个重要的属性async决定了请求是否以异步方式执行,本文将详细解析async属性的作用及使用方法。 ... [详细]
  • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
  • 本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响,并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求,特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]
  • 深入解析ES6至ES8的新特性与应用
    本文详细介绍了自2015年发布的ECMAScript 6.0(简称ES6)以来,JavaScript语言的多项重要更新,旨在帮助开发者更好地理解和利用这些新特性进行复杂应用的开发。 ... [详细]
  • 探讨如何正确使用 Fetch API 进行参数传递,分析不同写法的差异及解决方案。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
author-avatar
璨然2502869273
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有