首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用

JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验。...但我们选择其中的内容的时候,系统自动显示出没有选择的列表数据,非常直观友好,如下所示。 ? 3)树形列表的下拉列表 有时候,我们的一些数据可能有层次关系的,如所属机构、上层列表等等。 ? ?...select> 2)异步数据绑定操作 一般情况下,我们的select控件的数据,是从数据库里面动态加载的,因此一般是通过Ajax方式获取数据并进行绑定即可。...cityName="+ cityName); }); } 而其中MVC控制器返回的数据,我们是返回一个JSON数据列表给前端页面的,他们的数据格式如下所示。...对于属性列表,如所属公司、所属部门机构等有层次性的数据,它的绑定操作也是类似的,如下代码所示。

4.2K90
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    select2 使用教程(简)「建议收藏」

    三.加载本地数据 select2默认的数据属性是id、text,新版本可以自定义,但还是用默认的比较好。所以提供的json中最好转换为id、text形式,当然可以添加其他属性。...,q发生到服务器的参数名;所以这里你可以添加自定义参数,如:stype:’person’) 2.processResults中results: data返回数据(返回最终数据给results,...3)树形列表的下拉列表 有时候,我们的一些数据可能有层次关系的,如所属机构、上层列表等等。...select> 2)异步数据绑定操作 一般情况下,我们的select控件的数据,是从数据库里面动态加载的,因此一般是通过Ajax方式获取数据并进行绑定即可。...cityName="+ cityName); }); } 而其中MVC控制器返回的数据,我们是返回一个JSON数据列表给前端页面的,他们的数据格式如下所示。

    24.7K20

    动态博客的后台定制

    Flask-Admin 原生支持这两种类型的属性输入框,但有以下不足: 基于 Select2 3.x,不支持自由输入的选择框(tags)。 无法动态添加不存在的项到数据库中。...首先将要加载自由输入的选择框打上 HTML 标记,在ModelView中: Python form_widget_args = { 'tags': {'data-role': 'select2-...free'}, 'category': {'data-role': 'select2-free'}, } 重载edit.html和create.html,引入 select2 4.0.x 的文件...SQLAlchemy 中有cascade属性,用来指定parent改变时child的行为,但不符合我们的要求,因为我们要的是一对多和多对多关系中「多」的一方变化时另一方的行为。...于是我们需要监听before_flush信号,检查当前session中的对象并做对应处理。

    54410

    thymeleaf-extras-db 0.0.1发布,select标签加载数据的新姿势

    在写thymeleaf页面的时候,我为了偷懒,不想为每个select下拉列表框都写一个接口,于是这个懒人jar诞生了。...该jar的核心功能是直接通过thymeleaf页面的自定义标签的属性,直接运行sql并初始化select数据。...项目地址: github gitee 简介 thymeleaf-extras-db是针对thymeleaf的扩展,主要是简化前端select标签数据的获取,让select标签直接从数据库加载数据,而不需要单独写接口...需要注意的是,t:dict标签的数据,是从表t_dict_type和t_dict_type_group查询的,需要建表mysql.sql。...配置缓存 请在application.yml中添加如下配置: spring: cache: cache-names: listOptionCache 如果你使用的是ehcache,那么还需要在

    92630

    注意避坑,Vue Router 4: 路由参数在 createdsetup 时不可用

    如果你想知道为什么 URL中的查询参数在你的 setup 方法或 created 钩子中无处可寻,但当插入它们时,它们仍然出现在模板中,不要离开, 我们来一探究竟。...现在所有的导航都是异步的 为了探索这一点,我们将使用一个已经安装了Vue router 4.0 的Vue 3 骨架应用的 barebones 。你可以在这个 repo 中跟着代码走。...你会注意到,无论添加多少个参数,或者重新加载多少次页面,控制台打印的this.$route.query都是空的。 接着,让我们来解开这个问题。...正如文档所建议的那样,在处理 transition 时,这一点变得更加明显,因为当Router从空到被数据填充时,它将触发动画。...这个过程很快,以至于对我们来说,它似乎一直都在那里,当在 setup 函数或生命周期钩子(如created())中处理查询参数时,这可能真的会令人困惑。

    71320

    Vue Router 4: 路由参数在 createdsetup 时不可用

    如果你想知道为什么 URL 中的查询参数在你的 setup 方法或 created 钩子中无处可寻,但当插入它们时,它们仍然出现在模板中,不要离开, 我们来一探究竟。...现在所有的导航都是异步的 为了探索这一点,我们将使用一个已经安装了 Vue router 4.0 的 Vue 3 骨架应用的 barebones 。你可以在这个 repo 中跟着代码走。...你会注意到,无论添加多少个参数,或者重新加载多少次页面,控制台打印的 this.$route.query 都是空的。 接着,让我们来解开这个问题。...正如文档所建议的那样,在处理 transition 时,这一点变得更加明显,因为当 Router 从空到被数据填充时,它将触发动画。...这个过程很快,以至于对我们来说,它似乎一直都在那里,当在 setup 函数或生命周期钩子(如 created())中处理查询参数时,这可能真的会令人困惑。

    89250

    常见问题: MongoDB 存储

    当WiredTiger创建新的日志文件时,WiredTiger会同步以前的日志文件。 如何在WiredTiger中回收磁盘空间? WiredTiger存储引擎在删除文档时维护数据文件中的空记录列表。...MongoDB使用内存映射文件来管理和交互所有数据。 内存映射将文件分配给具有直接逐字节相关性的虚拟内存块。MongoDB内存在访问文档时将数据文件映射到内存。未访问的数据未映射到内存。...使用MMAPv1存储引擎时,可能会发生缺页错误,因为MongoDB会将数据读取或写入当前未位于物理内存中的数据文件。与此对比,当物理内存耗尽且物理内存页面交换到磁盘时,会发生操作系统缺页错误。...如果有空闲内存,则操作系统可以在磁盘上找到该页(page)并直接将其加载到内存中。但是,如果没有空闲内存,操作系统必须: 在内存中找到过时或不再需要的页面,并将该页面写入磁盘。...从磁盘读取请求的页面并将其加载到内存中。 在活跃的系统上,此过程可能需要很长时间,特别是与读取已在内存中的页相比。 有关详细信息,请参阅 缺页错误。 软缺页和硬缺页错误有什么区别?

    2.5K30

    小程序 | 11-组件化

    自定义组件的步骤: 现在 json 文件中进行自定义组件声明——"component": true, 在 wxml 中编写自定义组件的模板内容 在 wxss 中编写自定义组件的样式 在 js 文件中定义数据和组件内部的相关逻辑...在使用方的 json 文件中引用自定义组件——"引用自定义组件时的标签名":"自定义组件的绝对路径或相对路径" 在使用方的 wxml 文件中,通过上一步定义的标签名引用自定义组件。...如果在 app.json 的 usingComponents 中声明了某个组件,那么所有页面和组件都可以直接使用该组件。 3. 组件和页面样式的细节 外部样式指引用组件的页面的样式。 3.1....-- data-index 表示额外携带的数据,取数据时关键字为 index --> <view class="tab-item {{currentIndex == index ?'...8.1. observers 监听 properties/data 中属性值的改变,监听时仅能获取到新值。

    2.4K20

    那些前端常用的网站插件

    Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js...创建漂亮的图表 Instantclick — 能够明显加速网站加载时间,鼠标 hover 时预加载资源 Chartist — 另一个图表库 Motio — 一个基于动画和平移的雪碧图库 Animsition... — 滚动时展现动画 Scrolline.js — 页面滚动时显示滚动进度 Velocity.js — 快速流畅的 JavaScript 动画 Animate on scroll — 漂亮的页面滚动元素动画... — 使用固定定位来创建相关元素 Shepherd.js — 为应用创建新手引导 Tooltip — tooltip 提示框 Select2 — Jquery 选择框插件 IziToast — 通知弹窗实现.../链接 cheatsheet — 可以写在中的所有标签 Ghost — 基于 Node.js 的博客平台 What runs — 一个用于网站技术分析的 Chrome 插件 Learn anything

    4.5K50

    解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面。逻辑是修改一个广告的图片和标题。...使用Select2,主要是因为它支持下拉式搜索。所以在数据稍微多一点,作为搜索选择功能的首选。但是运行出来之后,发现搜索框无法点击。开始想到的index不够大,被其他的元素覆盖了。...在普通的页面,搜索框是ok的。 2.解决办法 通过Google搜索,发现select2作者在github上说明了这个问题: ?...hot fix代码如下: hot fix:Select2控件在jQuery UI弹出对话中不能搜索 $.widget("ui.dialog", $.ui.dialog, { open:...这样在遇到不可知的bug时,能快速找到问题的根源是关键。这也是工作之后,leader或者manager更加强调你发现问题和解决问题的能力。

    1.6K100

    Astro 4.0:全新升级,为现代网站构建赋能

    Astro是一个专门为内容驱动网站(如博客、营销和电子商务网站)打造的Web框架。如果你需要一个加载迅速且具备出色SEO性能的网站,那么Astro正是你需要的。...在Astro 4.0中,所有Storyblok用户都会在工具栏中看到一个新应用,它提供了快速访问文档、教程和Storyblok + Astro社区资源的途径。期待将来有更多CMS功能的加入。...借助Astro的视图转换,您可以实现如下功能: 在不同页面之间进行动画导航,而无需加载庞大的SPA。 在页面之间保持有状态的UI,例如视频播放器和地图。...Astro核心团队特别感谢@martrapp为在Astro 4.0中引入这些新API所做的贡献和工作。阅读更新的视图转换指南或新教程,了解更多关于如何在您自己的项目中使用这些新API。...重新设计的文档: Starlight是Astro的官方文档模板。它包含了我们在过去两年构建和管理Astro文档网站规模时收集到的所有最佳实践和模式。

    54510

    AJAX和JSON

    可以在页面加载以后进行页面的局部更新 创建 XMLHttpRequest 对象 var xmlHttp; if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest...在收到响应后相应数据会填充到XHR对象的属性,有四个相关属性会被填充: responseText——从服务器进程返回数据的字符串形式 responseXML———从服务器进程返回的DOM兼容的文档数据对象...也可以是复杂数据类型的值 JSON中对象的键名必须放在双引号里面,因为JSON不是javascript语句,所以没有末尾的分号 说明︰同一个对象中不应该出现两个同名属性 数组 数组也是一种复杂数据类型,...直接用 XMLHttpRequest 请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp 正是利用这个特性来实现的。...回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。 // 封装JSONP function getJSONP(url, callback) { if (!

    2.6K20

    Vue(renren-fast_vue_master)项目目录结构

    ├── .babelrc # Babel 转码配置 ├── .eslintignore # (配置)ESLint 检查中需忽略的文件(夹) ├── .eslintrc...,记载着一些命令和依赖还有简要的项目描述信息 ├── package-lock.json # 记录当前状态下实际安装的各个npm package的具体来源和版本号 上述目录结构中,需要注意的是...# 留言板模块共用 mixins └── autoLoadByParams.js # 根据 $route.params.msgId 自动加载...根据注释,二者的差别如下: src/components/ 主要是全局性的,或通用性很强的组件,具备良好的封装性,一般不涉及到具体的业务逻辑 src/views/ 主要是业务性的页面组件,基本不具备通用性...本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    64330

    HTML5新特性

    的inline-block SVG技术在HTML5中绘制图形命令(所有的SVG标签的nodeName都是小写,只有填充色,没有描边色) (1)....但是绘图往往需要按照一定顺序,如先绘背景,再绘上面的内容,所以必须等待所有图片全部加载完成,才能开始绘图. // 所有图片的总加载进度 var progress = 0; var...如何在服务器端下载的网页中显示客户端的图片?...在同一个会话中的所有页面间共享数据,如登录用户名 // 保存一个数据 sessionStorage[key] = value // 保存一个数据 sessionStorage.setItem...:类数组对象,本地存储(跨会话级存储) 在浏览器所能管理的外存(硬盘)中存储着用户的浏览数据,可供此次会话以及后续的会话中的页面共同使用;即使浏览器关闭也不会消失 作用:在当前客户端所对应的所有会话中共享数据

    7.7K30

    Python开发物联网数据分析平台---web框架

    利用tornado的模板作为主要的动态页面生成方式,以及巧妙使用模板将json数据渲染到页面hidden元素的值,然后在js中直接用eval函数计算隐藏域的值来生成图表JavaScript插件所需的json...数据来生成页面中相应的可视化图表。...基模板中包含完整的 HTML 结构和导航栏、页首、页脚都通用部分。 在子模板里,我们可以使用 extends 标签来声明继承自某个基模板。...基模板中需要在实际的子模板中追加或重写的部分则可以定义成块(block)。块使 用 block 标签创建, {% block 块名称 %} 作为开始标记, {% end %} 作为结束标记。...代码,主要实现搜索框点击搜索按钮时,页面根据搜索条件跳转url,以及根据当前页面url地址更新菜单栏当前菜单选中的样式。

    3.2K30

    excel常用操作大全

    此时,您的所有操作都针对所有工作表,无论是设置页眉和页脚还是打印工作表。6.在Excel2000制作的工资表中,只有第一个人有工资表的表头(如编号、姓名、岗位工资.),并希望以工资单的形式输出它。...20、如何快速输入数据序列?如果您需要在表格中输入一些特殊的数据系列,如物料序列号和日期系列,请不要逐个输入。为什么不让Excel自动填写它们呢?...在第一个单元格中输入起始数据,在下一个单元格中输入第二个数据,选择这两个单元格,将光标指向单元格右下角的填充手柄,沿着要填充的方向拖动填充手柄,拖动的单元格将按照Excel中指定的顺序自动填充。...如果您可以定义一些常规数据(如办公室人员列表),您经常需要使用这些数据作为将来自动填充的序列,这难道不是一劳永逸的吗?...当我们在工作表中输入数据时,我们有时会在向下滚动时记住每个列标题的相对位置,尤其是当标题行消失时。此时,您可以将窗口分成几个部分,然后将标题部分保留在屏幕上,只滚动数据部分。

    19.3K10
    领券