前段時間使用了select2控制項處理下拉列表,搞了一整天才搞明白,記錄下心得。參考官網
該控制項我使用了兩種方式:1、基本用法;2、ajax用法。
先說第乙個基本用法,該方式適用於比較小資料量時,一次把所有資料載入到template裡邊的元件,然後由select2對進行解析,例如:
<我使用了django框架,資料以列表形式返回給前台,控制項效果:select
id="system"
name
="system"
style
="width:100%"
>
<
option
value
="">請選擇系統-------
option
>
<
option
value
=}>}
option
>
select
>
<
script
>
$(document).ready(
function
() );
script
>
def前台設定部分**:ajax(request):
"""ajax資料來源檢視-系統模組
"""start = int(request.get.get('
idisplaystart
', '0'
)) length = int(request.get.get('
idisplaylength
', '30'
)) search = request.get.get('
ssearch
', ''
) #取得前台控制項輸入的關鍵字
ifsearch: #擷取查詢結果物件,以start開始擷取start+length位
orgs =info.objects.filter(
q(name__icontains=search) & q(deleted=false)
)[start:start +length]
else
: orgs = info.objects.all()[start:start +length]
val_list =
for org in
orgs:'id
': org.id, '
name
': org.name})
"""根據關鍵字查詢得到結果後開始拼裝返回到前台的資料。先生成字典型陣列,一般select2元件使用的話生成id、name兩個字段即可
')
<生成的效果圖div
class
="form-group has-error"
>
<
label
class
="col-sm-4 control-label"
>所屬機構
label
>
<
div
class
="col-sm-6"
>
<
input
id="company"
name
="company"
type
='hidden'
style
="width:100%"
class
="populate placeholder"
value
="}"
required
="true"
/>
<
input
id="companyname"
hidden
="hidden"
value
="}"
/>
div>
div>
大概的說明看**注釋,initselection這個引數要重點說下,當時糾結了好久。
我使用了乙個隱藏的存放companyname,然後initselection可以取其值來callback,然後可見的供select2解析。
JQuery select控制項的相關操作
本文 於 jquery獲取和設定select選項方法彙總如下 獲取select 先看看下面 select id change function 為select新增事件,當選擇其中一項時觸發 var checktext select id find option selected text 獲取sel...
2 基礎控制項2
transform 的預設值為 1,0,0,1,0,0 nslog nsstringfrom 可以列印其他型別的 比如類 affine transform a ffine transform 的初始化為 make make 只能改變一次 不可重複改變 如果想要重複改變 則使用去掉 make 的方法t...
WPF控制項開發之控制項概述 2
更改控制項外觀 更改控制項的外觀以適應應用程式的外觀,這是很常見的操作。可以根據您要達到的效果,通過執行以下操作之一來更改控制項的外觀 更改控制項的屬性值。為控制項建立 style。為控制項建立新 controltemplate。更改控制項的屬性值 許多控制項具有允許您更改控制項外觀的屬性,例如 b...