Demo
SeedGrid는 간편하게 그리드를 표현할 수 있습니다. 웹 사이트 제작시 SeedGrid를 사용해 보세요.
Support Browser
SeedGrid는 다양한 브라우저를 지원 합니다. 아래의 지원 브라우저를 확인 하세요.
Download
SeedGrid 라이브러리를 다운로드 하세요.
Manual
SeedGrid 메뉴얼을 다운로드 하세요.
라이브러리 추가
Header 영역에 내려받은 SeedGrid와 Jquery를 포함 시키세요.
Jquery는 서버에서 Json 데이터를 가져오는 Ajax 호출시 사용 됩니다.
<!-- css -->
<link rel="stylesheet" type="text/css" href="/resources/library/seedgrid/seedgrid.min.css" />
<!-- script -->
<script type="text/javascript" src="/resources/library/seedgrid/seedgrid.min.js"></script>
그리드 영역 추가
Body 영역에 Div 태그를 추가 하세요.
<div id="grid"></div>
그리드 생성
Javascript 영역에 SeedGrid 객체를 생성하고, 그리드를 로드하는 소스 코드를 작성 하세요.
// 그리드 객체 생성
var seedGridOne = new SeedGrid();
seedGridOne.setConfig({
sgArea: "grid",
sgType: "sg_type1",
sgWidth: 900,
sgHeight: 0,
sgPagingType: "paging",
sgListNo: 20,
sgPageNo: 10,
sgColWidths: [50, 150, 80, 80, 70, 70, 70, 80, 80, 80, 90],
sgHeaders: [
{
title: ["현장명", "현장명", "명칭", "규격", "표준", "도급금액", "비고"],
align: ["center", "center", "center", "center", "center", "center", "center"],
span: ["2:1", "2:1", "2:1", "2:1", "1:3", "1:3", "2:1"],
endCol: ["N", "N", "N", "N", "N", "N", "Y"],
index: [1, 2, 3, 4, 5, 8, 11]
},
{
title: ["현장코드", "예산번호", "내역번호", "수량", "단가", "금액"],
align: ["center", "center", "center", "center", "center", "center"],
span: ["1:1", "1:1", "1:1", "1:1", "1:1", "1:1"],
endCol: ["N", "N", "N", "N", "N", "N"],
index: [5, 6, 7, 8, 9, 10]
}
],
sgCols: [
{ saveNm: "ContractNo", type: "Text", align: "center", hidden: true, underLine: false },
{ saveNm: "No", type: "Text", align: "center", hidden: false, underLine: false },
{ saveNm: "SiteNm", type: "Text", align: "center", hidden: false, underLine: true },
{ saveNm: "Nm", type: "Text", align: "left", hidden: false, underLine: false },
{ saveNm: "Spec", type: "Text", align: "left", hidden: false, underLine: false },
{ saveNm: "Unit", type: "Text", align: "left", hidden: true, underLine: false },
{ saveNm: "SiteCd", type: "Text", align: "center", hidden: false, underLine: false },
{ saveNm: "BudgetNo", type: "Text", align: "center", hidden: false, underLine: false },
{ saveNm: "BrdnNo", type: "Text", align: "center", hidden: false, underLine: false },
{ saveNm: "CdNm", type: "Text", align: "center", hidden: true, underLine: false },
{ saveNm: "ContractQty", type: "Text", align: "right", hidden: false, underLine: false },
{ saveNm: "ContractCost", type: "Text", align: "right", hidden: false, underLine: false },
{ saveNm: "ContractAmt", type: "Text", align: "right", hidden: false, underLine: false },
{ saveNm: "BudgetQty", type: "Text", align: "right", hidden: true, underLine: false },
{ saveNm: "BudgetCost", type: "Text", align: "right", hidden: true, underLine: false },
{ saveNm: "BudgetAmt", type: "Text", align: "right", hidden: true, underLine: false },
{ saveNm: "Etc", type: "Text", align: "center", hidden: false, underLine: false }
]
});
// 그리드 데이터 목록 조회 Ajax
function listGridData() {
$.ajax({
type: "GET",
url: "/AjaxData/ListGridData",
dataType: "json",
async: false,
success: function (datas) {
// 그리드 데이터 로드
seedGridOne.loadData(seedGridOne, datas);
},
error: function (e) {
alert("오류발생");
}
});
}
// 페이지 로드
$(document).ready(function (e) {
// 그리드 생성
seedGridOne.makeGrid(seedGridOne);
// 그리드 데이터 목록 조회
listGridData();
});
// 그리드 클릭 이벤트
function grid_onClick(row, col) {
alert(row);
alert(col);
if (seedGridOne.getColSaveNm(seedGridOne, col) == "SiteNm") {
alert(seedGridOne.getCellValue(seedGridOne, row, "No"));
}
}
