摘要:原創(chuàng)用法總結(jié)前言最近用到的,官方文檔中的例子也很多在此寫一些實(shí)際項(xiàng)目中用法總結(jié),有需要的朋友可以借鑒一下。
(原創(chuàng)) bootstrap select2 用法總結(jié)
前言
最近用到bootstrap 的 select2,官方文檔中的例子也很多在此寫一些實(shí)際項(xiàng)目中用法總結(jié),有需要的朋友可以借鑒一下。
效果圖
無論是固定方式獲取數(shù)據(jù)還是ajax獲取都需要引入bootstrap.js/css 和 select2.js/css
及:
{{ stylesheet_link("css/bootstrap.css") }} {{ stylesheet_link("css/select2.min.css") }} {{ stylesheet_link("css/font-awesome.min.css") }} {{ stylesheet_link("css/prettify.css") }} {{ javascript_include("js/lib/jquery.js") }} {{ javascript_include("js/lib/select2.full.js") }} {{ javascript_include("js/lib/bootstrap.js") }}
固定方式獲取
$(".js-example-tags").select2({ tags: true, //是否可以自定義tag createSearchChoice:function(term, data) { alert(1); if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} }, multiple: true, data: [{id: 0, text: "story"},{id: 1, text: "bug"},{id: 2, text: "task"}] });
ajax方式獲取
$(".js-example-tags").select2({ // enable tagging tags: true, // loading remote data // see https://select2.github.io/options.html#ajax ajax: { url: "Ask2/tags", processResults: function (data, page) { console.log(data); var parsed = data; var arr = []; for(var x in parsed){ arr.push(parsed[x]); //這個(gè)應(yīng)該是個(gè)json對(duì)象 } console.log(arr); return { results: arr }; } } });
說明
在ajax中的數(shù)據(jù)返回格式應(yīng)該是這個(gè)樣子滴(results):
[{id: 0, text: "story"},{id: 1, text: "bug"},{id: 2, text: "task"}]
對(duì)應(yīng)的php代碼例子
... $p1 = array(id => "1",text=>"java"); $p2 = array(id => "2",text=>"jvm"); $test = array(1=>$p1,2=>$p2); $params["responseData"] = $test; $this->view->disable(); return parent::ajaxResponse($params);
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/92345.html
摘要:原創(chuàng)用法總結(jié)前言最近用到的,官方文檔中的例子也很多在此寫一些實(shí)際項(xiàng)目中用法總結(jié),有需要的朋友可以借鑒一下。 (原創(chuàng)) bootstrap select2 用法總結(jié) 前言 最近用到bootstrap 的 select2,官方文檔中的例子也很多在此寫一些實(shí)際項(xiàng)目中用法總結(jié),有需要的朋友可以借鑒一下。 效果圖 showImg(https://segmentfault.com/img/bV...
摘要:至于一對(duì)一和一對(duì)多這兩種關(guān)系,可以觸類旁通。注意文件的下載或來源,請(qǐng)自行獲取。接下來,我們使用取得文章的標(biāo)簽,這個(gè)就是我們聲明多對(duì)多關(guān)系的方法。 原文來自 https://laravist.com/article/18 免費(fèi)視頻教程地址 https://laravist.com/series/laravel-5-basic Laravist是我剛剛上線的Laravel社區(qū),有任何與L...
摘要:本來處理輸入控件是很多的,比如,又比如,都各有各的好處,但也各有各的不足。今天選擇一款簡(jiǎn)單的插件。特點(diǎn)就是容易用,來看看怎么用。引入項(xiàng)目文件不是必須的,而且還沒有原生的那么漂亮,但勝在和風(fēng)格統(tǒng)一。 本來處理tags輸入控件是很多的,比如select2,又比如chosen,都各有各的好處,但也各有各的不足。今天選擇一款簡(jiǎn)單的插件:selectize.js Github: https://...
摘要:修復(fù)后得到合法的后在由布局引擎建立相應(yīng)的對(duì)象。在標(biāo)簽放置于標(biāo)簽之后時(shí),源碼被所有瀏覽器泛指上常見的修復(fù)為正常形式,即。上一篇之模板的學(xué)習(xí)之路源碼分析之部分下一篇之模板的學(xué)習(xí)之路主題布局配置 上篇我們將 body 標(biāo)簽主體部分進(jìn)行了簡(jiǎn)單總覽,下面看看最后的腳本部門。 頁面結(jié)尾部分(Javascripts 腳本文件) 我們來看看代碼最后的代碼,摘取如下: ...
摘要:新手,不擅長(zhǎng)寫,純粹只是分享一下自己遇到的問題供大家參考一下這個(gè)插件,就是帶搜索功能的下拉選擇框效果如圖使用前先確定自己的項(xiàng)目安裝了,如果沒有的話就用安裝一下使用的時(shí)候先在頭部引用插件如果表單是,可以使用下面代碼是鍵值對(duì)數(shù)組,下面所聲明的 新手,不擅長(zhǎng)寫js,純粹只是分享一下自己遇到的問題供大家參考一下 select2這個(gè)插件,就是帶搜索功能的下拉選擇框效果如圖:showImg(ht...
閱讀 1411·2021-10-08 10:04
閱讀 733·2021-09-07 09:58
閱讀 2912·2019-08-30 15:55
閱讀 2424·2019-08-29 17:21
閱讀 2126·2019-08-28 18:04
閱讀 3075·2019-08-28 17:57
閱讀 715·2019-08-26 11:46
閱讀 2228·2019-08-23 17:20