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

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

一.文件需要引入select2.full.js、select2.min.css(4.0.1版本)和jquery.1.8.3及以上 最新版本的select2如果引用的jquery版本较低的话,某些功能无法正常使用...三.加载本地数据 select2默认的数据属性是id、text,新版本可以自定义,但还是用默认的比较好。所以提供的json中最好转换为id、text形式,当然可以添加其他属性。...templateSelection: formatRepoSelection }); 说明: 1.q: params.term 查询参数(params.term表示输入框中内容,q发生到服务器的参数名;所以这里你可以添加自定义参数...结果回调和选中回调名称:formatResult、formatSelection(老版);templateResult、templateSelection(新版) 2.初始化: //老版,注意如果初始化时文本框中本身没有值...4)select2控件的赋值处理 上面介绍的方法,都是介绍select2控件的初始化,绑定相关的数据,那么如果初始化界面后,我们绑定编辑界面的值的时候,就需要赋值给控件,让它显示真正需要显示的项目了。

24.8K20

动态博客的后台定制

编辑器 先来解决文本编辑器的问题,CKEditor 功能强大,但只是一个富文本编辑器。对于已经习惯 Markdown 写作的我来说,只管写,排版渲染就交给浏览器去做。...Flask-Admin 原生支持这两种类型的属性输入框,但有以下不足: 基于 Select2 3.x,不支持自由输入的选择框(tags)。 无法动态添加不存在的项到数据库中。...所以我们要重载QuerySelectField的行为,则需要继承AdminModelConverter,重载下面的_model_select_field方法,再将其加载到我们自定义的ModelView就可以了...并绑定到form.data里。...SQLAlchemy 中有cascade属性,用来指定parent改变时child的行为,但不符合我们的要求,因为我们要的是一对多和多对多关系中「多」的一方变化时另一方的行为。

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

    vue2升级vue3:Vue3时jsx组件绑定自定义的事件、v-model、sync修

    $emit('input', title)`    }  }}Vue3 jsx组件绑定自定义的事件、v-model使用绑定的事件名称前面加上on,事件名改为驼峰命名法并且首字母大写,拼接上前面的on即可绑定自定义事件...跟onClick绑定事件方式一致。...vue3默认绑定的v-model是modelValue,但是允许开发人员自定义v-model绑定的prop,例如v-model:title="pageTitle"改为绑定title值,使用起来也是很方便.../jsx/issues/141参考文章:Vue2的.sync修饰符转Vue3中v-model https://segmentfault.com/a/1190000039299633Vue3 jsx组件绑定自定义的事件...组件绑定自定义的事件、v-model、sync修》,请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8697.html

    2.6K20

    select2 api参数的文档

    id 函数 函数用于获取id从选择对象或字符串id存储代表的关键 matcher 函数 用于确定是否搜索词匹配一个选项时使用一个内置的查询功能 sortResults 函数 用于排序列表搜索之前显示的结果...有用的用户可以创建动态的选择时,如“标签”usecase。...如果 字符串 而不是使用 对象 他们将有一个被转换成一个对象 id 和 文本 属性相等 的值 字符串 。 containerCss 函数/对象 内联css将被添加到select2的容器。...selectOnBlur 布尔 设置为 真正的 如果你想要Select2选择当前高亮选项时模糊。 loadMorePadding 整数 定义了多少像素需要加载下一页前折以下。...() { log("open"); }) // select2 打开事件 .on("select2-close", function() { log("close"); }) // select2

    6K50

    .NET Core开发的iNeuOS工业互联平台,四大特性:数据接口、图元绑定数据、预警和菜单

    此次升级主要针对iNeuView的Web组态,进一步完善产品体系,包括:每个组态页面可以配置数据接口、图元可以绑定数据点、图元和文本框根据绑定的数据点配置预警方案、图元和文本框可以自定义菜单项等。...最新数据接口主要用于实时读取数据进行监测和预警;历史数据接口主要用于右键单击图元或文本框选择【查看趋势】;数据点接口主要用于选择【数据源】时显示数据点树。      ...iNeuView(Web组态)图元绑定数据      不仅文本框可以绑定数据源,任意图元也可以绑定数据源。...iNeuView(Web组态)图元和文本框配置预警      图元和文本框可以配置预警方案,根据绑定的数据点的实时数据值自定义判断预警逻辑,进一步对报警运作、级别、报警颜色进行响应。...选择任意图元和文本框,选择右边事件中的【右键菜单】,如下图:     新建一个菜单项目,可以配置菜单名称、事件类型(现在只支持打开链接)、打开方式、高度和宽度等。

    73100

    最佳实战|如何使用腾讯云微搭从0到1开发企业门户应用

    此处需要注意,在放置图片与文本组件时,大纲树中图片组件需要在文本组件的上方,否则位置会颠倒。 创建模型变量 单击右上角的变量,进入变量编辑页面。...[f7cda83cb360c87ce6b542461568fe6b.png] 绑定页面跳转方法 再次选中导航 Tab 对应的普通容器并选择右侧配置区的点击时触发条件,调起事件配置弹窗。...在事件弹窗中进行页面跳转配置并单击新建参数变量。 [0a5245cd0f78c2e00b047eba576f4843.png] 参数变量创建完成后,单击变量绑定按钮。...[1c028c5e9db987e4dd5eebddde3ad76d.png] 步骤2:为列表配置事件 绑定自定义方法 在大纲树中选中列表对应的普通容器,选择右侧配置区的点击时触发条件,调起事件配置弹窗。...[55347dd84bbc0963224c1201a798f3e4.png] 绑定页面跳转方法 再次选中列表对应的普通容器并选择右侧配置区的点击时触发条件,调起事件配置弹窗。

    1.4K30

    最佳实战|如何使用腾讯云微搭从0到1开发企业门户应用

    此处需要注意,在放置图片与文本组件时,大纲树中图片组件需要在文本组件的上方,否则位置会颠倒。 创建模型变量 单击右上角的变量,进入变量编辑页面。...[f7cda83cb360c87ce6b542461568fe6b.png] 绑定页面跳转方法 再次选中导航 Tab 对应的普通容器并选择右侧配置区的点击时触发条件,调起事件配置弹窗。...在事件弹窗中进行页面跳转配置并单击新建参数变量。 [0a5245cd0f78c2e00b047eba576f4843.png] 参数变量创建完成后,单击变量绑定按钮。...[1c028c5e9db987e4dd5eebddde3ad76d.png] 步骤2:为列表配置事件 绑定自定义方法 在大纲树中选中列表对应的普通容器,选择右侧配置区的点击时触发条件,调起事件配置弹窗。...[55347dd84bbc0963224c1201a798f3e4.png] 绑定页面跳转方法 再次选中列表对应的普通容器并选择右侧配置区的点击时触发条件,调起事件配置弹窗。

    1.4K30

    最佳实战|如何使用腾讯云微搭从0到1开发企业门户应用

    此处需要注意,在放置图片与文本组件时,大纲树中图片组件需要在文本组件的上方,否则位置会颠倒。 创建模型变量 单击右上角的变量,进入变量编辑页面。...[f7cda83cb360c87ce6b542461568fe6b.png] 绑定页面跳转方法 再次选中导航 Tab 对应的普通容器并选择右侧配置区的点击时触发条件,调起事件配置弹窗。...在事件弹窗中进行页面跳转配置并单击新建参数变量。 [0a5245cd0f78c2e00b047eba576f4843.png] 参数变量创建完成后,单击变量绑定按钮。...[1c028c5e9db987e4dd5eebddde3ad76d.png] 步骤2:为列表配置事件 绑定自定义方法 在大纲树中选中列表对应的普通容器,选择右侧配置区的点击时触发条件,调起事件配置弹窗。...[55347dd84bbc0963224c1201a798f3e4.png] 绑定页面跳转方法 再次选中列表对应的普通容器并选择右侧配置区的点击时触发条件,调起事件配置弹窗。

    2.6K82

    cookie时效无限延长方案

    及机制 理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定...2.1 什么是cookie cookie称之为会话跟踪技术,是一个很小的文本文件,是浏览器储存在用户的机器上的。Cookie是纯文本,没有可执行代码。...时效无限延长方案 理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定...落地案例及实践效果 理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定...总结 理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定

    66520

    HarmonyOS 开发实践 —— 基于手势绑定的常见问题处理

    场景一:父子组件同时绑定手势的冲突处理效果图方案在默认情况下,手势事件为非冒泡事件,当父子组件绑定相同的手势时,父子组件绑定的手势事件会发生竞争,最多只有一个组件的手势事件能够获得响应,默认子组件优先识别通过...当父组件绑定了并行手势parallelGesture时,父子组件相同的手势事件都可以触发,实现类似冒泡效果(当前规格:当父组件和子组件同时绑定单击手势事件和双击手势事件时,父组件和子组件均只响应单击手势事件...点击文本会忽略Text组件的TapGesture手势事件,优先识别父组件Column的TapGesture手势事件    .priorityGesture(      TapGesture()       ...点击文本会同时触发子组件Text与父组件Column的TapGesture手势事件    .parallelGesture(      TapGesture()        .onAction((event...核心代码手指上滑时:优先识别list组件自身滚动效果,当list滚动到临界值时,触发list组件的onReachEnd回调,在回调中修改自定义变量值;在并行手势parallelGesture的panGesture

    17320

    高级可视化 | Banber图表联动交互

    在利用数据简报/大屏进行图表演示时,操作者有可能要与图表进行交互联动,如下图所示,通过单击左边条形图区域,就可以交互联动右侧图表,查看事业部下属的部门具体销售情况,无须代码,只需要在Banber数据可视化云平台拖拽操作...将“事业部”拖拽到条件筛选,点击下拉箭头-->自定义条件-->添加条件。 ? 在弹出框中,点击下拉箭头,选择之前设置的筛选条件绑定。 ?...4 设置图表联动 选中事业部图表,点击右侧-->动作-->添加事件。 ? 依次选择单击-->链接跳转(本简报)-->当前标签页。 ? 点击添加参数,绑定设置的参数。 ?...说明: 设置关键表【动作】中的事件时,添加参数后选择分类轴或系列名,当选择[分类轴],在点击想要查看商品类型对应的分类轴时,可变动的表数据会随之体现出选择商品类型的具体数值;当选择[系列名],在点击想要查看商品类型对应的系列名称时...温馨提示: 在编辑页面是无法查看效果的!

    1.9K20

    前端开发JS——jQuery常用方法

    1、jQuery鼠标事件之click与dbclick事件 click方法用于监听用户单击操作,dbclick方法用于监听用户双击操作,这两个方法用法及其类似,所以这只介绍click事件,只有单击释放后才生效...当这两元素的文本被选中时会触发select事件 方法一:$ele.select () focusin 无参,只是绑定一个事件,在函数里可以实现其他的绑定事件 方法二:$ele.select (handler...13、jQuery键盘事件之keypress()事件 keydown事件触发在文字还没敲进文本框,这时如果在keydown事件中输出文本框中的文本得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成...keypress与keydown、keyup的主要区别: 只能获取单个字符,不能捕获组合键 无法响应系统功能键如(delete,backspace) 不区分小键盘和主键盘的数字字符 14、on()的多事件绑定...可以自定义事件名 多个事件绑定同一个函数:$ele.on("mouseover mouseout", function(){}) //多个事件用空格隔开 多个事件绑定不同函数:$ele.on({

    5K20

    前端架构师之11_JavaScript事件

    用户单击button按钮,这个行为就会被JavaScript中的click事件侦测到;然后让其自动执行,为click事件编写的程序代码,如在控制台输出“按钮被单击”。...事件驱动式 是指在Web页面中JavaScript的事件,侦测到的用户行为,并执行相应的事件处理程序的过程。 鼠标移入文本区域,文本区域变色这一过程。...1.2 事件的绑定方式 事件绑定指的是为某个元素对象的事件绑定事件处理程序。 行内绑定式 动态绑定式 事件监听式 行内绑定式 事件的行内绑定式是通过HTML标签的属性设置实现的。...为小球绑定单击事件,在处理函数中调用自定义的 animate() 实现小球的缓动。 编写 animate() 动画函数,在函数中利用定时器,根据缓动公式完成缓动动画。...例如,文本框获取焦点改变文本框的样式,文本框失去焦点时验证文本框内输入的数据等。

    7410

    高级可视化 | Banber图表弹窗联动交互

    2 设置参数条件 进入编辑页面,点击图表-->自定义参数条件-->新建参数。 ? ?...点击城市下拉箭头-->筛选条件-->参数条件:T[城市]重庆,绑定参数条件。 ? 4 设置图表联动 回到之前的页面,选中城市图表,点击右侧-->动作-->添加事件。 ?...依次选择单击-->链接跳转(本简报)-->2 产品类别-->弹窗。 ? 点击添加参数,绑定设置的参数。 ? 点击“请选择”下拉按钮,选择“分类轴”。 ?...说明: 设置关键表【动作】中的事件时,添加参数后选择分类轴或系列名,当选择[分类轴],在点击想要查看商品类型对应的分类轴时,可变动的表数据会随之体现出选择商品类型的具体数值;当选择[系列名],在点击想要查看商品类型对应的系列名称时...温馨提示: 在编辑页面是无法查看效果的!

    1.6K20

    WEB入门之十四 jQuery事件

    5.3 jQuery合成事件 jQuery中有两个合成事件:hover和toggle,这两个是DOM中不存在的事件,都属于jQuery自定义的事件。...图5.1.10 hover事件 5.3.2 toggle事件 该事件用于模拟鼠标的连续单击事件,第1次单击时触发第1个函数的执行;第2次单击时触发第2个函数的执行;第n次单击时触发第n个函数的执行。...){$(this).get(0).style.backgroundColor="white";}) 上述代码通过以前的普通方式给文本框分别绑定了失去焦点和获得焦点的事件,并在事件中改变了文本框的背景色...假设给所有的文本框通过bind绑定了鼠标单击事件,然后再动态创建一个文本框,此时绑定的鼠标单击事件对这个新创建的文本框无效;但是如果使用live进行绑定,那么新创建的文本框也会绑定鼠标单击事件。...,在该事件中主要实现动态生成行和单元格并添加到表中,同时给所有的行绑定了鼠标单击事件,用来实现背景色的改变。

    8210

    WEB入门之十四 jQuery事件

    图5.1.10 hover事件 5.3.2 ​toggle事件​ 该事件用于模拟鼠标的连续单击事件,第1次单击时触发第1个函数的执行;第2次单击时触发第2个函数的执行;第n次单击时触发第n个函数的执行... 该示例与5.12差不多,只是由hover事件换成了toggle事件,当鼠标单击绿色的标题时,下面的内容就会显示出来;当鼠标再次单击绿色的标题时...(){ $(this).get(0).style.backgroundColor="white"; } ) 上述代码通过以前的普通方式给文本框分别绑定了失去焦点和获得焦点的事件,并在事件中改变了文本框的背景色...假设给所有的文本框通过bind绑定了鼠标单击事件,然后再动态创建一个文本框,此时绑定的鼠标单击事件对这个新创建的文本框无效;但是如果使用live进行绑定,那么新创建的文本框也会绑定鼠标单击事件。...,在该事件中主要实现动态生成行和单元格并添加到表中,同时给所有的行绑定了鼠标单击事件,用来实现背景色的改变。

    12910

    高质量编码-GIS搜索框前端实现

    image.png image.png image.png image.png image.png 当我们每次输入内容或者点击分页时,会立即去构造请求,返回结果绑定在下拉列表中,同时添加到地图图层中...: image.png 其实这种查询就够用了,但是通常我们会有伪需求,查询时选择类型,于是再次改造,添加了下拉列表来选择查询类型: image.png 需要我们在构造函数构建DOM的地方添加我们的...select,并在调用初始化函数前,填充option数据,这里使用了select2 jquery插件 image.png 同时添加事件,使得下拉列表改变选项时,更新自己的geojsonServiceAddress...来满足POST类型请求 image.png 下拉列表不同请求URL发生改变,也可以采用URL不变,请求参数改变来实现这个功能: image.png image.png 最后注意原来代码中为了避免输入事件频繁...,使用了自定义的延迟事件。

    2.6K20
    领券