이전 기사에서 Bootstrap Metronic [II] 목록 페이지 매김 처리 및 플러그인 JSTREE 사용을 기반으로 한 개발 프레임 워크의 경험 요약, 데이터 페이지 매김 처리가 소개되었고 Bootstrap Paglinator 플러그인이 사용되었으며 트리 목록이 사용되었고 JStree 플러그인이 사용되었습니다. 이 기사는 편집 페이지에 일반적으로 사용되는 Control Select2를 계속 소개합니다. 이 컨트롤은 기존의 선택 드롭 다운 목록 컨트롤을 풍부하게하여 더 많은 기능과 더 나은 사용자 경험을 제공 할 수 있습니다.
1. Select2 Control 소개
이 플러그인은 Select를 기반으로 한 확장 플러그인으로 더 풍부한 기능과 사용자 경험을 제공 할 수 있습니다. 공식 Github 웹 사이트 주소는 https://select2.github.io/입니다. 특정 사용 사례는 주소를 참조하십시오 : https://select2.github.io/examples.html.
전체 프레임 워크에서, 우리는 단일 선택 드롭 다운 목록 (캐스케이딩 선택 상자 포함), 선택한 드롭 다운 목록, 트리 드롭 다운 목록 등을 포함하여 컨텐츠 표시를 처리하기 위해 많은 Select2 컨트롤을 사용했습니다. 인터페이스 효과는 다음과 같습니다.
1) 편집 인터페이스 하에서 지방, 도시 및 행정 지역의 계단식 인터페이스 효과 . 주를 선택하면 해당 지방의 도시에로드됩니다. 도시를 선택하면 도시의 행정 지역이 계속 적재되어 다단계 상관 관계의 드롭 다운 목록 효과를 달성합니다.
2) 편집 인터페이스에서 다중 선택 드롭 다운 목록
그러나 컨텐츠를 선택할 때 시스템은 선택하지 않고 목록 데이터를 자동으로 표시합니다. 이는 아래와 같이 매우 직관적이고 친숙합니다.
3) 트리 목록의 드롭 다운 목록
때때로, 우리의 데이터 중 일부는 조직, 상위 수준 목록 등과 같은 계층 적 관계를 가질 수 있습니다.
2. Select2 Control의 실제 사용 코드 분석
1) 기본 인터페이스 코드 및 작동
일반적으로 정기적 인 Select Control에서 Select2 컨트롤을 사용하면 설정을 설정하십시오 (클래스를 Select2로 설정).
<div> <div> <label> 중요한 레벨 </label> <div> <select id = "중요성"이름 = "중요성"자리 표시 자 = "중요도 ..."> </select> </div> </div> <div> <labe> 인식> <div> <select id = "inkep"= "indection"placeholder = "placeholder ="select> </select> </select>
고정 목록 인 경우 아래와 같이 옵션 컨텐츠를 설정합니다.
감
Simple Select2 제어 초기화 코드는 다음과 같습니다.
$ (document) .ready (function () {$ ( ". js-example-basic-single"). select2 ();});일반적으로 여러 항목을 선택할 수있는 경우 다음 코드와 같이 Multiple = "Multiple"을 설정하십시오.
<선택 ID = "ResponseDemand"name = "responseDemand"Multiple = "Multip"> </select>
2) 비동기 데이터 결합 작업
일반적으로, 선택 제어의 데이터는 데이터베이스에서 동적으로로드되므로 데이터는 일반적으로 ajax를 통해 얻어지고 결합됩니다.
코드 재사용 성의 고려에 따라, 우리는 바인딩 작업 코드를 줄이고 코드 재사용 성을 향상시키기 위해 공통 JS 기능을 작성합니다.
// 지정된 선택 제어 함수에 사전 컨텐츠 바인드 BindSelect (ctrlName, url) {var control = $ ( '#' + ctrlname); // select2의 프로세싱 컨트롤을 설정합니다. Select2 ({allowClear : true, formatresult : formatresult, formattelection : formatselection, escapemarkup : function (m) {return m;}}); // ajax $ .getJson (url, function (data) {control.empty (); // 드롭 다운 상자 $ .Each (data, function (i, item) {intront value = ' + item.value + "'>" + item.text + "</옵션>");})의 내용을 바인딩합니다. });이러한 방식으로, 공개 사전 모듈에 결합 된 데이터는 다음과 같이 추가로 캡슐화되고 처리 될 수있다.
// 사전 컨텐츠를 지정된 제어 함수에 바인딩 inddictem (ctrlname, dicttypename) {var url = '/dictdata/getDictjson? dicttypename =' + encodeuri (dicttypename); bindselect (ctrlname, url);}이러한 방식으로, 우리는 select2 컨트롤을 초기화하고 해당 사전 값 또는 기타 데이터를 동적으로 바인딩합니다. 이는 다음 초기화 코드를 통해 달성 할 수 있습니다. 그중에서도 BindDictitem은 사전 컨텐츠를 직접 바인딩하는 작업이며, BindSelect는 URL을 기반으로 데이터를 얻고 바인딩하는 작업입니다. $ ( "#province"). on ( "Change", function (e) {})과 같은 기능 처리의 작동입니까? 선택한 컨텐츠의 변경 사항을 처리하는 링키지 작업을 처리합니다.
// 사전 정보 초기화 (드롭 다운 목록) 함수 initDictItem () {// 두 번째 할당 참조 bindDictItem ( "영역", "Market Partition"); binddictitem ( "산업", "고객 산업"); BindDictItem ( "등급", "고객 수준"); BindDictItem ( "CustomerType", "Customer Type"); BindDictItem ( "소스", "고객 소스"); BindDictItem ( "CreditStatus", "Credit Rating"); BindDictItem ( "Stage", "Customer Stage"); BindDictItem ( "상태", "고객 상태"); binddictitem ( "중요성", "중요도 수준"); // 묶음 주, 도시 및 행정 지역 (연결 처리) bindSelect ( "Province", "/Province/GetAllProvinCenamedItCjson"); $ ( "#province"). on ( "change", function (e) {var provincename = $ ( "#province"). val (); bindSelect ( "city", "/city/getCitySbyProvinCenamedItCjson? provincename ="+ provencename);}); $ ( "#city"). on ( "change", function (e) {var cityName = $ ( "#city"). val (); bindSelect ( "District", "/District/GetDistrictByCityNamedItCjson? cityName ="+ CityName);}); }MVC 컨트롤러가 반환 한 데이터의 경우 JSON 데이터 목록을 프론트 엔드 페이지로 반환하며 데이터 형식은 다음과 같습니다.
[{ "text": "", "value": ""}, { "text": "Academic Conference", "Value": "Academic Conference"}, { "텍스트": "친구 소개", "value": "친구 소개"}, { "텍스트": "광고 미디어": "광고 미디어"}]이러한 방식으로, 프론트 엔드 페이지가 select2 컨트롤을 바인딩 할 때, JSON 객체의 특성이 사용됩니다.
// ajax $ .getJson (url, function (data) {control.empty (); // 드롭 다운 상자 $ .Each (data, function (i, item) {intront value = ' + item.value + "'>" + item.text + "</옵션>");})의 내용을 바인딩합니다.컨트롤러의 구현 코드는 다음과 같습니다.
/// <summary> /// ui 컨트롤의 바인딩을 용이하게하기 위해 사전 유형에 따라 해당 사전 데이터를 얻습니다. /// </summary> /// <param name = "dicttypename"> 사전 이름 </param> // <returns> </returns> public actionsult getDictjson (string> dicttit) 목록 <ClistItem> (); clistitem pnode = new clistitem ( "", ""); treelist.insert (0, pnode); Dictionary <string, String> dict = bllfactory <DictData> .instance.getDictByDictType (DictTypename); foreach (dict.keys의 String key) {treelist.add (new clistitem (key, dict [key]); } return tojsonContent (treelist); }3) 트리 목록의 바인딩 작동
계열사, 부서 및 기관의 계층 적 데이터와 같은 속성 목록의 경우, 다음 코드와 같이 구속력있는 운영도 유사합니다.
// bindSelect ( "company_id", "/user/getMyComPanyDictJson? userId ="+@session [ "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": "iqidi group", "value": "1"}, { "text": "Guangzhou Branch", "Value": "3"}, { "텍스트": "상하이 지점", "value": "4"}, { "text": "Beijing Branch", "value": "5"}]또는 아래와 같이
[{ "text": "Guangzhou Branch", "Value": "3"}, { "text": "General Manager 's Office", "Value": "6"}, { "text": "재무 부서", "value": "7"}, "텍스트": "엔지니어링 부서", "value": "8"}, "텍스트": "valese", ",", ",", ",", "{"{ "{"{ "{"{ "{"{ "{", " "텍스트": "그룹 개발", "value": "14"}, { "text": "텍스트 개발", "value": "15"}, { "텍스트": "테스트 그룹 2", "value": "15"}, { "텍스트": "테스트 그룹 2", "value": "16"}, "text": "value": "10"}, < " 1 ","value ":"23 "}, {"텍스트 ":"시장 부서 2 ","value ":"24 "}, {"text ":"포괄적 인 부서 ","value ":"11 "}, {"text ":"value ","value ":"12 "},"텍스트 ":"인적 자원 부서 ":"value ":"13 "}]위의 두 부분을 요약하기 위해, 우리는 그들의 텍스트 내용이 계층 적 관계에 따라 공간을 늘려 계층 적 관계의 표시를 실현하는 것임을 알 수 있습니다.
그러나 인터페이스 효과 측면 에서이 처리는 실제로 EasyUI의 드롭 다운 목록 트리의 표시만큼 좋지 않습니다. 아마도 더 나은 부트 스트랩 플러그인을 사용 하여이 트리 모양의 콘텐츠를 표시 할 수 있습니다.
4) Select2 Control의 할당 처리
위에서 소개 된 방법은 Select2 제어 및 바인딩 관련 데이터를 초기화하는 것입니다. 따라서 인터페이스를 초기화 한 후 편집 인터페이스의 값을 바인딩하는 경우 컨트롤에 값을 할당하여 실제로 표시 해야하는 항목을 표시하도록해야합니다.
제어를 지우는 방법은 다음과 같습니다.
// select2 컨트롤 $ ( "#pid"). select2 ( "val", "")의 값을 지우십시오. $ ( "#company_id"). select2 ( "val", ""); $ ( "#dept_id"). select2 ( "val", "");
여러 컨트롤을 지워야하는 경우 컬렉션을 사용하여 처리 할 수 있습니다.
var select2ctrl = [ "영역", "산업", "등급", "customertype", "source", "creditstatus", "stage", "status", "mectivity"]; $ .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); $ ( "#중요"). select2 ( "val", info.ispublic);
계단식 방식으로 표시 해야하는 경우 다음 계단식 코드의 할당 처리와 같이 Onchange 기능 처리를 추가하십시오.
$ ( "#province"). select2 ( "val", info.province) .trigger ( 'change'); // link $ ( "#city"). select2 ( "val", info.city) .trigger ( 'change'); int $ ( "#company_id1"). select2 ( "val", info.company_id) .trigger ( 'change'); $ ( "#dept_id1"). select2 ( "val", info.dept_id) .trigger ( 'change'); $ ( "#pid1"). select2 ( "val", info.pid);
마지막으로, 참조를위한 두 가지 통합 인터페이스 효과가 있습니다.
위의 것은 Select2 플러그인 사용의 관련 컨텐츠의 [3] 드롭 다운 목록을 기반으로 부트 스트랩 메트로닉 개발 프레임 워크의 경험을 요약 한 것입니다. 모든 사람에게 도움이되기를 바랍니다. 더 많은 정보를 알고 싶다면 Wulin.com 웹 사이트에주의를 기울이십시오!