在用到select2時,臨時抱佛腳學習了一下
$('#e3').select2({
placeholder: "請輸入",
minimumInputLength: 1,
separator: ",", // 分隔符
maximumSelectionSize: 5, // 限制數量
initSelection: function(element, callback) { // 初始化時設定預設值
},
createSearchChoice: function(term, data) { // 建立搜尋結果(使使用者可以輸入匹配值以外的其它值)
return {
id: term.mid,
text: term.name
};
},
formatSelection: function(item) {
return item.name;//注意此處的name,要和ajax返回陣列的鍵值一樣
}, // 選擇結果中的顯示
formatResult: function(item) {
return item.name;//注意此處的name
}, // 搜尋列表中的顯示
ajax: {
url: "{:U('Admin/Member/getzj')}", // 非同步請求地址
dataType: "json", // 資料型別
data: function(term, page) { // 請求引數(GET)
return {
q: term
};
},
results: function(data, page) {
return data;
}, // 構造返回結果
escapeMarkup: function(m) {
return m;
} // 字元轉義處理
}
});
我們在整個框架裡面,用到了很多Select2控制元件來處理內容的顯示,包括單選的下拉列表(包括級聯選擇框)、複選的下拉列表、樹形下拉列表等方式,介面效果如下所示。
1)編輯介面下的省份、城市、所在行政區的級聯介面效果,選擇省份,會載入對應省份下的城市,選擇城市,會繼續載入城市下的行政區,從而實現多級關聯的下拉列表效果。
2)編輯介面下的多項選擇下拉列表
但我們選擇其中的內容的時候,系統自動顯示出沒有選擇的列表資料,非常直觀友好,如下所示。
3)樹形列表的下拉列表
有時候,我們的一些資料可能有層次關係的,如所屬機構、上層列表等等。
2、Select2控制元件的實際使用程式碼分析
1)基礎介面程式碼及操作
使用select2控制元件,一般是在常規的select控制元件上,設定一下即可(設定它的class為select2)。
<div class="col-md-6"> <div class="form-group"> <label class="control-label col-md-4">重要級別</label> <div class="col-md-8"> <select id="Importance" name="Importance" class="form-control select2" placeholder="重要級別..."></select> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label col-md-4">認可程度</label> <div class="col-md-8"> <select id="Recognition" name="Recognition" class="form-control select2" placeholder="認可程度..."></select> </div> </div> </div>
如果是固定列表,那麼也就是設定它的Option內容即可,如下所示。
<div class="col-md-6"> <div class="form-group"> <label class="control-label col-md-4">吸菸</label> <div class="col-md-8"> <select id="Smoking" name="Smoking" type="text" class="form-control select2" placeholder="吸菸..."> <option>吸菸</option> <option>不吸菸</option> </select> </div> </div> </div>
簡單的select2控制元件初始化程式碼如下所示。
$(document).ready(function() { $(".js-example-basic-single").select2(); });
一般情況下,如果允許複選多個專案,那麼設定 multiple="multiple"即可,如下程式碼所示。
<select id="ResponseDemand" name="ResponseDemand" multiple="multiple" class="form-control select2"></select>
2)非同步資料繫結操作
一般情況下,我們的select控制元件的資料,是從資料庫裡面動態載入的,因此一般是通過Ajax方式獲取資料並進行繫結即可。
基於程式碼可重用性的考慮,我們編寫一個公用的JS函式,用來減少繫結操作的程式碼,提高程式碼重用性。
//繫結字典內容到指定的Select控制元件 function BindSelect(ctrlName, url) { var control = $('#' + ctrlName); //設定Select2的處理 control.select2({ allowClear: true, formatResult: formatResult, formatSelection: formatSelection, escapeMarkup: function (m) { return m; } }); //繫結Ajax的內容 $.getJSON(url, function (data) { control.empty();//清空下拉框 $.each(data, function (i, item) { control.append("<option value='" + item.Value + "'> " + item.Text + "</option>"); }); }); }
這樣,繫結公用字典模組的資料,也就可以通過下面進一步封裝處理即可。
//繫結字典內容到指定的控制元件 function BindDictItem(ctrlName, dictTypeName) { var url = '/DictData/GetDictJson?dictTypeName=' + encodeURI(dictTypeName); BindSelect(ctrlName, url); }
這樣我們初始化Select2 控制元件,並動態繫結對應的字典值或者其他資料,則可以通過下面初始化程式碼即可實現。其中BindDictItem就是直接繫結字典內容的操作,BindSelect則是根據URL進行資料的獲取並繫結,而$("#Province").on("change", function (e) {});這樣的函式處理,就是處理選擇內容變化的聯動操作了。
//初始化字典資訊(下拉列表) function InitDictItem() { //部分賦值參考 BindDictItem("Area","市場分割槽"); BindDictItem("Industry", "客戶行業"); BindDictItem("Grade","客戶級別"); BindDictItem("CustomerType", "客戶型別"); BindDictItem("Source", "客戶來源"); BindDictItem("CreditStatus", "信用等級"); BindDictItem("Stage","客戶階段"); BindDictItem("Status", "客戶狀態"); BindDictItem("Importance", "重要級別"); // 繫結省份、城市、行政區(聯動處理) BindSelect("Province", "/Province/GetAllProvinceNameDictJson"); $("#Province").on("change", function (e) { var provinceName = $("#Province").val(); BindSelect("City", "/City/GetCitysByProvinceNameDictJson?provinceName="+ provinceName); }); $("#City").on("change", function (e) { var cityName = $("#City").val(); BindSelect("District", "/District/GetDistrictByCityNameDictJson?cityName="+ cityName); }); }
而其中MVC控制器返回的資料,我們是返回一個JSON資料列表給前端頁面的,他們的資料格式如下所示。
[ { "Text": "", "Value": "" }, { "Text": "學術會議", "Value": "學術會議" }, { "Text": "朋友介紹", "Value": "朋友介紹" }, { "Text": "廣告媒體", "Value": "廣告媒體" } ]
這樣前端頁面繫結Select2控制元件的時候,就使用了JSON物件的屬性即可。
//繫結Ajax的內容 $.getJSON(url, function (data) { control.empty();//清空下拉框 $.each(data, function (i, item) { control.append("<option value='" + item.Value + "'> " + item.Text + "</option>"); }); });
控制器的實現程式碼如下:
/// <summary> /// 根據字典型別獲取對應的字典資料,方便UI控制元件的繫結 /// </summary> /// <param name="dictTypeName">字典型別名稱</param> /// <returns></returns> public ActionResult GetDictJson(string dictTypeName) { List<CListItem> treeList = new List<CListItem>(); CListItem pNode = new CListItem("", ""); treeList.Insert(0, pNode); Dictionary<string, string> dict = BLLFactory<DictData>.Instance.GetDictByDictType(dictTypeName); foreach (string key in dict.Keys) { treeList.Add(new CListItem(key, dict[key])); } return ToJsonContent(treeList); }
3)樹形列表的繫結操作
對於屬性列表,如所屬公司、所屬部門機構等有層次性的資料,它的繫結操作也是類似的,如下程式碼所示。
//繫結新增介面的公司、部門、直屬經理 BindSelect("Company_ID", "/User/GetMyCompanyDictJson?userId="[email protected]["UserId"]); $("#Company_ID").on("change", function (e) { var companyid = $("#Company_ID").val(); BindSelect("Dept_ID", "/User/GetDeptDictJson?parentId="+ companyid); }); $("#Dept_ID").on("change", function (e) { var deptid = $("#Dept_ID").val(); BindSelect("PID", "/User/GetUserDictJson?deptId="+ deptid); });
只是它們返回的資料,我們把它作為有縮排的顯示內容而已。
[ { "Text": "愛奇迪集團", "Value": "1" }, { "Text": " 廣州分公司", "Value": "3" }, { "Text": " 上海分公司", "Value": "4" }, { "Text": " 北京分公司", "Value": "5" } ]
或者如下所示
[ { "Text": "廣州分公司", "Value": "3" }, { "Text": "總經辦", "Value": "6" }, { "Text": "財務部", "Value": "7" }, { "Text": "工程部", "Value": "8" }, { "Text": "產品研發部", "Value": "9" }, { "Text": " 開發一組", "Value": "14" }, { "Text": " 開發二組", "Value": "15" }, { "Text": " 測試組", "Value": "16" }, { "Text": "市場部", "Value": "10" }, { "Text": " 市場一部", "Value": "23" }, { "Text": " 市場二部", "Value": "24" }, { "Text": "綜合部", "Value": "11" }, { "Text": "生產部", "Value": "12" }, { "Text": "人力資源部", "Value": "13" } ]
綜上兩個部分,我們可以看到它們的Text的內容,是根據層次關係進行空格增加,從而實現了層次關係的顯示。
不過從這個介面效果上講,這樣的處理確實沒有EasyUI裡面,對下拉列表樹的展示好看,也許可以利用更好的Bootstrap外掛進行這個樹形內容的展示。
4)select2控制元件的賦值處理
上面介紹的方法,都是介紹select2控制元件的初始化,繫結相關的資料,那麼如果初始化介面後,我們繫結編輯介面的值的時候,就需要賦值給控制元件,讓它顯示真正需要顯示的專案了。
如清空控制元件的方法如下所示。
//清空Select2控制元件的值 $("#PID").select2("val", ""); $("#Company_ID").select2("val", ""); $("#Dept_ID").select2("val", "");
如果對於多個控制元件,需要清除,則可以使用集合進行處理
var select2Ctrl = ["Area","Industry","Grade","CustomerType","Source","CreditStatus","Stage","Status","Importance"]; $.each(select2Ctrl, function (i, item) { var ctrl = $("#" + item); ctrl.select2("val", ""); });
給Select2 控制元件賦值,讓它顯示對應值內容的專案,那麼操作也就和上面的類似了。
$("#CustomerType").select2("val", info.CustomerType); $("#Grade").select2("val", info.Grade); $("#CreditStatus").select2("val", info.CreditStatus); $("#Importance").select2("val", info.Importance); $("#IsPublic").select2("val", info.IsPublic);
如果需要級聯顯示的,那麼做法增加一個onchange的函式處理就可以了,如下級聯程式碼的賦值處理如下。
$("#Province").select2("val", info.Province).trigger('change');//聯動 $("#City").select2("val", info.City).trigger('change');//聯動 $("#District").select2("val", info.District);
$("#Company_ID1").select2("val", info.Company_ID).trigger('change'); $("#Dept_ID1").select2("val", info.Dept_ID).trigger('change'); $("#PID1").select2("val", info.PID);
多個列表專案資料的繫結。
我們從案例裡面可以看到,Select2支援多項值的選擇,它們儲存後會以逗號分開,如果我們需要在編輯的時候顯示儲存的多個記錄,那麼需要把字串轉換為陣列列表才能進行正確繫結,如下所示。
$("#Permission").select2("val", info.Permission.split(','));
最後來兩個整體性的介面效果,供參考。
相關推薦
在用到select2時,臨時抱佛腳學習了一下
$('#e3').select2({ placeholder: "請輸入", minimumInputLength: 1, separator: ",", // 分隔符 maximumSelectionSize: 5, // 限制數量 in
最近專案用到Dubbo框架,臨時抱佛腳分享一下共探討。
1. Dubbo是什麼? Dubbo是一個分散式服務框架,致力於提供高效能和透明化的RPC遠端服務呼叫方案,以及SOA服務治理方案。簡單的說,dubbo就是個服務框架,如果沒有分散式的需求,其實是不需要用的,只有在分散式的時候,才有dubbo這樣的分散式服務框架的需求,並且本質上是個服務呼叫的東東,說
用copy修飾一個可變字串時,編譯器到底做了什麼
#import "ViewController.h" @interfaceViewController () @property (nonatomic,copy) NSMutableString
運行用例時,報錯Unknow Error:Element xxx is not clickable……的解決方法
cut 處理 ebe 將他 最好 executor tro path img 通常這種情況是由於在點擊該元素時,js更換了元素屬性造成的。 所以可以采用js的方式進行處理 方法如下: WebDriver driver = new FirefoxDriver(); Web
現在越來越喜歡用ajax傳值了,這樣能讓網站的體驗性很好,今天就總結了一下常用的
click put nbsp index.php 常用 體驗 code size .get 這是不用循環的方法 就是傳過來的是一位數組 //編輯黨建分類 function gk_bj(id){ $.post("{:U(‘Luser/lei_edlt
調用WCF時,調用已超過傳入消息(65536)的最大消息大小配額。若要增加配額,請使用相應綁定。
logs eal real reference hostname 配置文件 cal false frame 解決方案: 其實只要在客戶端配置文件中加上如下紫色粗體屬性( maxReceivedMessageSize): <?xml version="1.0" enc
mysql 證明為什麽用limit時,offset很大會影響性能
技術分享 讀取 mit group zha 同時 like dump 說明 本文同時發表在https://github.com/zhangyachen/zhangyachen.github.io/issues/117 首先說明一下MySQL的版本: mysql> se
定義2個有關聯的類時,產生的使用了未定義類型的錯誤
return 一個 class bsp 功能 私有 報錯 ring 編譯 定義了A類的時候,需要定義一個B類來完善A的功能,A類當中有 返回類型為B的函數 ,定義A之前,先聲明了B,且B作為A的友元,需要訪問A的私有成員。 eg: class B; class A { pu
Qt---去掉標題欄後,最大化應用程序窗口時,窗口遮住了任務欄的問題
cat bsp zed 任務欄 available des 問題 ica try 不應該使用: this->showFullScreen(); 或 this->showMaximized(); 而應該使用: this->setGeometry(
5款黑客喜歡用的系統,看看就行了
第一款:NodeZeroNodeZero是一款基於Ubuntu搭建的、專門用於滲透測試的完整系統。NodeZero使用Ubuntu可以保證你的系統不斷更新。該系統 安裝簡單,並且它設計的初衷就是磁碟安裝和自由可定製。NodeZero提供了大約300個用於滲透測試的工具和一系列在滲透測試過程中可能會用到的基本
MySQL實戰 | 01-當執行一條 select 語句時,MySQL 到底做了啥?
原文連結:當執行一條 select 語句時,MySQL 到底做了啥? 也許,你也跟我一樣,在遇到資料庫問題時,總時茫然失措,想重啟解決問題,又怕導致資料丟失,更怕重啟失敗,影響業務。 就算重啟成功了,對於問題的原因仍不知所以。 本文開始,記錄學習《MySQL實戰45講》專欄的過程。 也許有人會問,你記
Mac 上sshd 服務啟用------便於用在mac上用securecrt連線mac自己 (試了一下,靠譜)
scp (Secure copy) 命令相信 同學們都知道。今天我想從我的一臺同區域網內的Linux 機器上拷貝幾個檔案到我的的機上來。突然想到,mac 畢竟不是 linux, sshd 服務預設沒有啟動的可能性很大。 到底有沒有 sshd 服務
python呼叫unittest組織執行測試用例時,autoit按鍵不能釋放,指令碼卡住的情況
suite.addTest(Test_PcIndexPage(“test_getindexpage”)) #開啟pc首頁 suite.addTest(Test_Pclogin(“test_pcLogin”)) #登入 在第一個指令碼的結尾處加上如下程式碼,
能力不足以支撐起你的夢想時,應該去學習。
最近花了很長時間寫了b和b+的實現,由於第一次寫,寫的時候浪費了很多時間,但是多寫兩次就能很快寫出來了,且思路也清晰了。 先來b+樹 #include<stdio.h> #include<stdlib.h> #include<
大牛都是這樣寫測試用例的,你get到了嘛?
1. 用於語句覆蓋的基路徑法 基路徑法保證設計出的測試用例,使程式的每一個可執行語句至少執行一次,即實現語句覆蓋。基路徑法是理論與應用脫節的典型,基本上沒有應用價值,讀者稍作了解即可,不必理解和掌握。 基路徑法步驟如下: 1)畫出程式的控制流圖 控制流圖是描述程式控制流的一種圖示方法
【初級】C++中子類物件轉型為父類物件時,編譯器默默做了什麼?
被問及C++中將子類物件轉型為父類物件時,會發生什麼?大部分人可能會回答說:子類成份會被"閹割",也就是說它不再具有子類特性。確實是這樣,不過我想知道編譯器是怎麼處理“閹割”的。請看如下程式碼, Child chd; Base b0(chd); Base b1 = chd
windows安裝MSI軟體時,系統管理員設定了系統策略 禁止進行此安裝
1. 執行 -> gpedit.msc(本地組策略編輯器)->使用者配置->管理模板->windows元件->windows installer-> 1、禁用:阻止從可移動介質... 2、啟用以特高許
調用類時,加括號和不加括號的區別
沒有 list 進行 none () 自己的 tno ext 根據 class ListNode: def __init__(self, x): self.val = x self.next = Nonea = ListNodea.val
android從橫屏的activity退回到豎屏的activity時,程式自動退出了。
android程式中,從豎屏的activity A啟動了橫屏的activity B,當從B退出時,程式並沒有返回A而是直接退出了。這問題怎麼解決呢? 我在AndroidManifest中,對A註冊了android:co
載入子類時,父類做了什麼?
在做android或者java開發時,我們很少考慮到類載入的事情,因為這些事情,虛擬機器都幫我們做了。 可是,你有沒有想過,當我們new了一個子類的時候,父類是個什麼情況? 我們先說一下載入類時機。“類的程式碼在初次使用時才載入”,一般就是在我們new例項、使用靜態域或者使