Multi Combo Filter
컬럼 타입이 combo인 SBGrid의 행을 중심으로 연관성이 있는 범주내에 찾는 멀티 콤보 필터를 제공합니다.
요약
컬럼 타입이 combo인 SBGrid의 특정 컬럼에 필터링 기능을 설정합니다.입력값
Number : 필터링 할 컬럼의 Index
Array : 필터링된 리스트
예)datagrid1.setComboFiltering (nCol,arrComboFilteringInfoList);
상세설명
nCol의 값은 필터링 할 컬럼의 인덱스 번호이고, nCol번째 컬럼의 타입이 combo이면arrComboFilteringInfoList배열에 담긴 조건들을 적용해 필터링 기능을 설정합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta content="IE=9" http-equiv="X-UA-Compatible">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SoftBowl SBGrid Example</title>
<script type="text/javascript" src="../../kr/co/softbowl/js/Library/json-minified.js"></script>
<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../kr/co/softbowl/js/Library/json2.js"></script>
<script type="text/javascript" src="../../kr/co/softbowl/SBGrid.js"></script>
<script type="text/javascript" src="../../js/DATA_JSON_eval3.js"></script>
<script type="text/javascript">
SBGrid.DEF.DOMAIN = "../../";
<script>
<script type="text/javascript">
var datagrid1;
$(document).ready(function(){
__createElements();
});
function __createElements (){
var obJson = {
"strParentId":"sbGridArea",
"strId": "datagrid1",
"strCaption": "시/도^군/구^동/면",
"strColWidth": "150, 150, 150",
"strJsonRef": "gridData",
"strDataHeight":"29",
"strExplorerbar": "sortshow",
"strBackColorAlternate" : "#f7f7f7",
"strStyle": "width:100%; height:480px; "
};
datagrid1 = createSBDataGrid(obJson);
var objJsonColumn = [
{
"id": "col1","type": "combo",
"ref": "city",
"strJsonNodeSet": "JSONcomboData_city",
"strLabelRef": "label",
"strValueRef": "value"
},
{
"id": "col2",
"type": "combo",
"ref": "gu",
"strJsonNodeSet": "JSONcomboData_gu",
"strLabelRef": "label",
"strValueRef": "value",
"bIsComboFiltering" : true //ComboFiltering을 위해 'bIsComboFiltering'속성을 true로 설정한다.
},
{
"id": "col3",
"type": "combo",
"ref": "dong",
"strJsonNodeSet": "JSONcomboData_dong",
"strLabelRef": "label",
"strValueRef": "value",
"arrComboFilteringInfoList" : [
{
strAttrName:"code",
strAttrValue:"1"
},
{
strAttrName:"code",
strAttrValue:"3"
}
],
//필터링 할 조건들을 'arrComboFilteringInfoList' 속성을 통해 설정할 수 있다.
//조건들을 object타입으로 여러 개 설정이 가능하다.
//설정하지 않고 나중에 SBGridID.setComboFiltering() API를 통해 동적으로 설정할 수도 있다.
"bIsComboFiltering" : true
}
];
datagrid1.createColumns(objJsonColumn); //createColumns(objJsonColumn); SBGrid의 column 생성에 필요한 속성들의 집합인 JSON 오브젝트를 파라미터를 갖는 column 생성 함수
datagrid1.addEventListener("onvaluechanged","eventProcess","","");//cell의 값이 변경되면 발생
datagrid1.addEventListener("onentercell","eventProcess","","");//cell이 선택되면 발생
}
function eventProcess(event){
var targetGrid = eval(event.currentTarget);
var nRow = targetGrid.row; //마우스로 클릭한 행의 인덱스 번호
var nCol = targetGrid.col; //마우스로 클릭한 열의 인덱스 번호
if(event.name == 'onvaluechanged'){
if(nRow >= targetGrid.fixedRows){//caption을 표시하는 부분이 아닌 data영역에 대한 변경 사항인 경우
if(targetGrid.getRefOfCol(nCol) == "city"){//'시도'에 해당하는 cell의 data가 변경된 경우
targetGrid.setTextMatrix(nRow,targetGrid.getColRef("gu"),""); //구 data를 초기화
targetGrid.setTextMatrix(nRow,targetGrid.getColRef("dong"),""); //동 data를 초기화
}
else if(targetGrid.getRefOfCol(nCol) == "gu"){//'구'에 해당하는 cell의 data가 변경된 경우
targetGrid.setTextMatrix(nRow,targetGrid.getColRef("dong"),""); //동 data를 초기화
}
}
}
else if(event.name == 'onentercell'){
if(targetGrid.getRefOfCol(nCol) == "gu"){//'구'에 해당하는 cell을 선택 시
var arrComboFilteringInfoList =[]; //필터링 할 조건 data들을 넘겨주기 위해 배열을 선언
var objComboFilteringInfo = {}; //필터링 조건들은 'object' 타입이여야 함
//SBGridID.getTextMatrix(nRow, nCol); -> value값을 가져온다.
//SBGridID.labelMatrix(nRow, nCol); -> label값을 가져온다.
var strCityData = targetGrid.labelMatrix(nRow, targetGrid.getColRef("city"));
if(strCityData == '서울'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "1";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
//SBGridID.setComboFiltering(nCol, arrComboFilteringInfoList); -> nCol번째 컬럼의 타입이 combo이면 arrComboFilteringInfoList배열에 담긴 조건들을 적용해 필터링 기능을 설정한다.
//nCol -> 필터링 할 컬럼인 인덱스 번호(컬럼타입이 combo인 경우에만 설정된다.)
//arrComboFilteringInfoList -> 필터링 조건 정보들의 집합
[
{
strAttrName:"code",
strAttrValue:"1"
},
{
strAttrName:"code",
strAttrValue:"3"
}
]
//createColumns()시 콤보에 표시할 항목정보를 "strJsonNodeSet":"JSONcomboData_gu"로 표시했다면 'strAttrName'으로 지정한 'code'를 이용해 'JSONcomboData_gu[0].code'처럼 각 항목들의 'code'값이 'strAttrValue'와 같은 지를 조사하여 같은 항목들만 표시 할 수 있도록 지정한다.
}
else if(strCityData == '대전'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "2";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
}
else if(strCityData == '대구'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "3";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
}
else if(strCityData == '부산'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "4";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
}
arrComboFilteringInfoList = objComboFilteringInfo = null;
}
else if(targetGrid.getRefOfCol(nCol) == "dong"){//'동'에 해당하는 cell을 선택 시
var arrComboFilteringInfoList =[];
var objComboFilteringInfo = {};
var strGuData = targetGrid.labelMatrix(nRow, targetGrid.getColRef("gu"));
if(strGuData == '서초구_서울'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "1";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
}
else if(strGuData == '강남구_서울'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "2";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
}
else if(strGuData == '광진구_서울'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "3";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
}
else if(strGuData == '대덕구_대전'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "4";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
}
else if(strGuData == '유성구_대전'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "5";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
}
else if(strGuData == '수성구_대구'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "6";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
}
else if(strGuData == '남구_대구'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "7";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
}
else if(strGuData == '동래구_부산'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "8";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
}
else if(strGuData == '금정구_부산'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "9";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
}
else if(strGuData == '사상구_부산'){
objComboFilteringInfo.strAttrName = "code";
objComboFilteringInfo.strAttrValue = "10";
arrComboFilteringInfoList[0] = objComboFilteringInfo;
targetGrid.setComboFiltering(nCol,arrComboFilteringInfoList);
}
arrComboFilteringInfoList = objComboFilteringInfo = null;
}
}
targetGrid = nRow = nCol = null;
};
</script>
</head>
<body onload="createElements()" class="sbgrid_body" >
<div class="topNav">
<div class="content_group">
<div id="sbGridArea"></div>
</div>
</div>
</body>
</html>