jquery_jquery를 기반으로 하는 무한 계단식 드롭다운 상자 js 플러그인

유연성 측면에서 여러 가지 측면을 고려했으며, 다양한 환경에서 사용하기 쉽도록 몇 가지 중요한 구성을 제공하며, 소스 코드도 완전히 공개되어 있습니다. 이 플러그인을 개발하게 된 이유는 얼마전 4단계 캐스케이딩 드롭다운 박스를 유지하면서 답답함을 느꼈고, 200줄의 코드와 복잡한 구조, 그 안에 들어있는 버그들로 인해 답답함을 느꼈기 때문입니다. 계단형 드롭다운 상자가 2~3개만 나타나기 때문에 코드가 많이 발생하는 것입니다. ), 실제로 이런 요구가 자주 발생하는 경우는 jquery에 이보다 더 좋은 플러그인이 없으므로 제가 직접 개발하는 편이 나을 것 같습니다. . 소스 코드는 복잡하지 않습니다. 조금 더 복잡한 부분은 두 번째 플러그인에서 캐시를 사용하는 부분이므로 나중에 설명하기가 매우 어렵습니다.
플러그인 1: 서버와 AJAX 상호 작용이 없을 때 사용하기에 적합합니다. 모든 드롭다운 상자 데이터를 미리 읽어야 합니다.
플러그인 2: 각 하위 드롭다운에 적합합니다. 데이터 바인딩을 위해 서버에 게시되는 상자입니다. 뛰어난 효율성을 달성하기 위해 사용된 데이터를 캐시한다는 점입니다. 참고: 캐시된 키 값은 상위 드롭다운 상자의 값일 뿐만 아니라 최상위 드롭다운 상자의 값 조합입니다. 현재 상위 드롭다운 상자입니다. 이는 동일한 상위 드롭다운 상자에 해당하는 하위 항목이 동일하지 않은 상황을 처리하기 위한 것입니다. 같은 이유로 포스트백을 통해 서버로 다시 전송되는 양식에는 모든 상위 드롭다운 상자의 값도 포함됩니다.

코드 복사 코드는 다음과 같습니다.

/*
* 계단식 드롭다운 상자 Jqueyr 플러그인, V1.2
* Copyright 2011, Leo.Liu
* 이 플러그인에는 새로 고침이 없는 계단식 드롭 2개가 포함되어 있습니다. -다운 박스 플러그인:
* 플러그인 1: cascadeDropDownData는 서버와 AJAX 상호 작용이 없을 때 사용되며 모든 드롭다운 박스 데이터를 미리 읽어야 합니다. 데모:
* 방법 1: var dataItem = [['all', '-1', '0'], ['a001', 'a001', '0'], ['a002', 'a002' , '0'], ['a003', 'a003', '0']
, ['b001', 'b001', 'a001'], ['b002', 'b002', 'a001'] , ['b003', 'b003', 'a002'], ['b004', 'b004', 'a003']
, ['c001', '001', 'b001'], ['c002' , '002', 'b001'], ['c003', '003', 'b002'], ['c004', '004', 'b003']]
$.cascadeDropDownBind.bind(dataItem, { sourceID: 'Select1', selectValue: 'a001', parentValue: '0',
child: { sourceID: 'Select2', selectValue: 'b002',
child: { sourceID: 'Select3', selectValue : 'c002'}
}
});
* 이 방법에는 결함이 있습니다. a) 드롭다운 상자의 값은 상위-하위 통신의 상위 값과 동일해서는 안 됩니다. b ) 모두 선택 규칙을 설정할 수 없습니다.
*
* 방법 2: var data = [['all', '0'], ['a001', 'a001'], ['a002', ' a002'], ['a003', 'a003' ]];
var data2 = [['all', '0', '0'], ['b001', 'b001', 'a001'], ['b002', 'b002', 'a001' ], ['b003', 'b003', 'a002'], ['b004', 'b004', 'a003']]
var data3 = [ ['모두', '0', '0' ], ['c001', '001', 'b001'], ['c002', '002', 'b001'], ['c003', '003' , 'b002'], ['c004', ' 004', 'b003']];
$.cascadeDropDownBind.bind(data, { sourceID: 'Select1', selectValue: 'a001' }); $.cascadeDropDownBind.bind(data2, { sourceID: ' Select2', selectValue: 'b002', parentID: 'Select1' })
$.cascadeDropDownBind.bind(data3, { sourceID: 'Select3', selectValue: ' c002', parentID: 'Select2' });
* 세 번째 방법은 cascadeDropDownBind.bind
*/
jQuery.extend({
//드롭의 데이터 개체를 참조하세요. -down box
cascadeDropDownData: function () {
//*** ***구성 속성************
this.removeFirst = true; 첫 번째 항목 제거
this.appentAllValue = ''; //상위 항목의 값이 이 값과 같은 경우 모든 항목 표시
this.sourceID = '' //이 드롭다운 상자 ID
this.parentID = ''; //상위 드롭다운 상자 ID
this.items = []; //항목 데이터, 2차원 배열, 형식: [['text', 'value', 'parent ID'],...]; 값과 상위 ID는 생략 가능
this.selectValue = ''; //선택한 항목을 초기화합니다.
this.parentValue = null; 일반적으로 첫 번째 드롭다운 상자를 바인딩하는 데 사용되는 데이터 더미에서 그룹에 필요한 항목
//**** **구성 속성*******
//다음은 다음과 같습니다. 전역 변수는 외부에서 설정할 필요가 없습니다.
this.child = null
var currentDrop = null
this.bind = function() {
currentDrop = $('#' this.sourceID );
this.clear();
//데이터 항목 채우기
this.fillItem()
//선택한 항목 설정
if (this.selectValue) {
currentDrop .val(this.selectValue);
}
//상위 드롭다운 상자의 변경 이벤트 설정
this.setChange()
}//채워진 항목 지우기 items
this.clear = function () {
if (this.removeFirst) {
currentDrop.empty()
} else {
for (var i = currentDrop[0]. options.length - 1; i--) {
currentDrop[0].options[i] = null
}
}; 데이터 항목
this.fillItem = function () {
var _parentValue = this.parentValue;
if (this.parentID)
_parentValue = $( '#' this.parentID).val() ;
var all = false; if (this.appentAllValue && _parentValue == this.appentAllValue)
all = true;
var val = item.length > 1 ? item[1] : item[0]; //값을 지정하지 않으면 대신 텍스트를 사용합니다.
if (all || item.length <= 2 | | item[2] == _parentValue) { //길이가 3보다 작으면 상위 드롭다운 상자가 없는 것으로 간주되어 모든 항목이 채워집니다.
currentDrop.append('' item[0] '');
}
})
}//상위 드롭의 변경 이벤트를 설정합니다. -다운 박스
this.setChange = function () {
if (this.parentID) {
$('#' this.parentID).bind('change', this.change); >}
} ;
//상위 드롭다운 상자 이벤트 콜백 함수
var _this =
this.change = function () {
_this.clear(); >_this.fillItem();
currentDrop.change();
},
cascadeDropDownBind: {
bind: 함수(데이터, 설정) {
var obj = new $.cascadeDropDownData(); $.extend(obj, 설정);
obj.items = data;
obj.bind()
if (setting.child) settings.child.parentID = 설정.sourceID
this.bind(data, settings.child)
}
}
}
}); 플러그인 2: ajaxDropDownData는 데이터 바인딩을 위해 서버에 게시되는 각 하위 레벨 드롭다운 상자에 적용됩니다.
* 이 플러그인의 가장 큰 장점은 사용된 데이터를 캐시하여 높은 효율성을 달성한다는 것입니다.
* 참고: 캐시된 키 값은 상위 드롭다운 상자의 값뿐만 아니라 최상위 드롭다운 상자에서 현재 상위 드롭다운 상자까지의 값 조합을 처리하기 위한 것입니다. 동일한 상위 드롭다운 상자에 해당하는 다른 하위 항목이 발생합니다.
* 같은 이유로 포스트백에서 서버로 다시 전송되는 양식에는 모든 상위 드롭다운 상자의 값도 포함됩니다.
* 사용법:
var firstItems = null; //첫 번째 항목을 넣을 수도 있습니다. 드롭다운 상자의 데이터 배열은 바인딩을 위해 여기에 배치되거나 비어 있도록 설정되며 드롭다운 상자는 변경되지 않습니다.
$.ajaxDropDownBind.bindTopDrop('Select1', firstItems, null, false, 'Select2')
$.ajaxDropDownBind.bindCallback('Select2', null, false, 'Select3', 'http:// localhost:4167/GetDropDownData.ashx?action=select1')
$.ajaxDropDownBind.bindCallback('Select3', null, false, null, 'http://localhost:4167/GetDropDownData.ashx?action=select2' );
$('#Select1').change();
* 가장 중요한 것은 계단식 ID 설정이 빠질 수 없다는 것입니다. 고급 사용법은 $.ajaxDropDownBind.bindCallback 메소드를 참조하세요.
*/
jQuery.extend({
//이 객체는 연결 목록 구조입니다
ajaxDropDownData: function () {
//******구성 속성************
this.sourceID = ''; //이 드롭다운 상자 ID
this.items = [] //데이터 이 항목의 2차원 배열, 형식: [['Text', 'Value', 'Parent ID'],...]; 값과 상위 ID는 생략 가능
this.callback = null / /Callback 함수는 다음 A의 첫 번째 수준 메서드를 얻는 데 사용됩니다. 이 함수는 두 개의 매개 변수를 받습니다. value와 dropdownlist는 각각 상위 드롭다운 상자와 자체 인스턴스에서 선택한 값을 나타냅니다.
this.childID = ''; //관련 자식 컨트롤 ID
this.removeFirst = true; //이 항목의 첫 번째 옵션을 제거할지 여부
this.selectValue = ''; //이 항목의 선택된 값을 초기화합니다.
// ******구성 속성**** ***
//**********************다음은 시스템 변수 및 메소드입니다. ****************** ******************************** ****
this.childItem = []; //캐싱을 위한 하위 객체 목록
this.parentObj = null; //상위 객체
this.canChange =
this.clearItem = true;
this.bind = 함수() {
$.ajaxDropDownBind.bindData(this)
};
this.bindData = 함수(설정) {
$.extend(this , 설정);
$.ajaxDropDownBind.bindData(this);
}/*루트 노드로 돌아가서 현재 올바른 드롭다운 상자 개체를 가져옵니다. 캐스케이드
드롭다운 상자의 이벤트는 하나뿐이고 해당 개체는 여러 개 있으므로 여기에서는 먼저 루트로 돌아가서 루트에서 시작해야 합니다
*/
this .getRightOnChangeObj = function () {
if (this.parentObj)
return this.parentObj.getRightOnChangeObj().childItem[$('#' this.parentObj.sourceID).val()] //재귀
else
return this;
}
},
ajaxDropDownBind: {
currentDrop: null,
_thisData: null,
callbackPool: [],
// 채워진 항목 지우기
clear: function () {
if (_thisData.removeFirst) {
currentDrop.empty()
} else {
for (var i = currentDrop[0 ].options.length - 1; i > 0; i-) {
currentDrop[0].options[i] = null;
}
/ /채우기 데이터 항목
fillItem: function () {
for (var i = 0; i < _thisData.items.length; i ) {
var val = _thisData.items[i].length > ; 1 ? _thisData.items[i][1] : _thisData.items[i][0]; //값이 지정되지 않은 경우 대신 텍스트를 사용하세요.
currentDrop.append('');
}
//선택한 항목 설정
if (_thisData.selectValue) {
currentDrop .val(_thisData .selectValue);
_thisData.selectValue = '';
}
},
//매개변수 데이터는 현재 변경된 드롭다운 상자가 위치한 개체를 참조합니다. 🎜>bindData: function (data) {
_thisData = data;
currentDrop = $('#' _thisData.sourceID) //자식 대신 노드 자체
if (_thisData.clearItem)
this.clear();
if (_thisData.items)
this.fillItem()
if (_thisData.childID) {
if (!currentDrop.data('binded') ) { // 바인딩되었는지 확인 이벤트, 바인딩된 이벤트는 더 이상 바인딩되지 않습니다.
currentDrop.data('binded', true)
var _firstChangeObj = _thisData; 드롭다운 상자에 대한 이벤트이며 해당 개체가 여러 개 있으므로 여기 개체는 올바른 개체가 아니라 바인딩할 때의 개체입니다.
currentDrop.bind('change', function () {
var rightChildItem = _firstChangeObj.getRightOnChangeObj().childItem;
var thisValue = $('#' _firstChangeObj.sourceID).val(); //현재 변경된 드롭다운 상자의 값을 가져옵니다. currentDrop도 이전 값이기 때문입니다.
if (rightChildItem[thisValue]) {
console.log('cache')
rightChildItem[thisValue].bind(); //캐시된 데이터를 사용하여 바인딩
}
else {
console.log('getdata' );
//새 인스턴스 및 연결 목록 관계 설정
var dropData = new $.ajaxDropDownData()
dropData.sourceID = _firstChangeObj.childID;
dropData.parentObj = _firstChangeObj;
rightChildItem[thisValue] = dropData; //캐시 설정
if (_firstChangeObj.callback) //콜백 함수가 있는 경우 그렇지 않으면 시스템에서 자동으로 생성된 함수를 호출합니다
_firstChangeObj.callback(thisValue, dropData) ; //콜백 함수
else {
var callback = $.ajaxDropDownBind.callbackPool[dropData.sourceID];
if (콜백)
callback(thisValue, dropData);
}
})
}
if (_thisData.canChange)
currentDrop.change ();
}
},
//첫 번째 수준 드롭다운 상자 바인딩
bindTopDrop: function (sourceID, items, selectValue, RemoveFirst, childID) {
var mydrop = new $.ajaxDropDownData();
mydrop.sourceID =
mydrop.items = items;
if (!items || items.length == 0)
mydrop.clearItem =
mydrop.removeFirst = RemoveFirst;
mydrop.childID = childID;
mydrop.canChange =
mydrop.bind(); 🎜>//하위 드롭다운 상자 바인딩
bindCallback: function (sourceID, selectValue, RemoveFirst, childID , parentPostUrl) {
var callback = function (value, dropdownlist) {
var postData = {};
var parentObj = dropdownlist.parentObj;
while (parentObj) {
postData[parentObj.sourceID] = $('#' parentObj.sourceID).val(); parentObj;
}
$.getJSON(parentPostUrl '&jsoncallback=?', postData, function (data) {
dropdownlist.items = data;
dropdownlist.removeFirst = RemoveFirst;
dropdownlist. selectValue = selectValue;
dropdownlist.bind();
}
this.callbackPool[sourceID]
} 🎜>}
});


사용 코드에 의견이 있으므로 자세히 설명하지 않겠습니다.
첨부파일 추가 방법을 몰라서 테스트 코드도 올려보겠습니다. 플러그인 2는 서버의 협조가 필요하기 때문에 플러그인 2의 테스트 코드는 여기에 올리지 않겠습니다.
플러그인 1 테스트 코드

코드 복사

코드는 다음과 같습니다.

无限极级联下拉框的封装

绑定方法：第一种方法
第二种方法

第一个下拉框：	设置当前项的选中值
第二个下拉框：	设置当前项的选中值	是否移除第一项	当前一项值等于此值时，该项全选
第三个下拉框：	设置当前项的选中值	是否移除第一项	当前一项值等于此值时，该项全选

下拉框结果：