/*
* 계단식 드롭다운 상자 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 테스트 코드