egovGrid 그리드 셀 비동기 렌더링 예제　

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://egov.angularjs.or.kr/build/eGovNg.js"></script>
<link rel="stylesheet" href="http://egov.angularjs.or.kr/build/css/eGovNg.css">
<div ng-app="myApp" ng-controller="myController">
    <div egov-grid name="demoGrid" dataset="userList" enable-async-post-render="true">
        <table>
            <thead>
                <tr>
                    <th>이름</th>
                    <th>이메일</th>
                    <th>등록일</th>
                    <th>결혼유무</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{name}}</td>
                    <td>{{email}}</td>
                    <td>{{regDate}}</td>
                    <td async-post-render="rederCircle">{{married}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

.eGovGrid-container {
    height: 400px;
}

JavaScript

//'ngGrid' 모듈을 인젝션
angular.module('myApp', ['egov.ui'])
    .controller('myController', function ($scope) {
    //그리드 데이터
    $scope.userList = [{
        id: "haibane",
        name: "재도",
        email: "[email protected]",
        regDate: "20130910",
        married: false
    }, {
        id: "jeaha",
        name: "재하",
        email: "[email protected]",
        regDate: "20130910",
        married: false
    }, {
        id: "jisu",
        name: "지수",
        email: "[email protected]",
        regDate: "20130910",
        married: false
    }, {
        id: "hanhang",
        name: "한행",
        email: "[email protected]",
        regDate: "20130910",
        married: true
    }];
       
    $scope.rederCircle = function(cellNode, row, dataContext, colDef){
        var canvas = $('<canvas width="100px" height="25px">');
        var canvasCtx = canvas[0].getContext("2d");
        var centerX = canvas[0].width / 2 - 2;
        var centerY = canvas[0].height / 2 - 2;
        
        jQuery(cellNode).empty().append(canvas);
        
        if(dataContext.married == true){
            canvasCtx.beginPath();
            canvasCtx.arc(centerX, centerY, 10, 0, Math.PI*2, true); 
            canvasCtx.closePath();
            canvasCtx.fill();
        }else{
            canvasCtx.beginPath();
            
            canvasCtx.moveTo(centerX - 20, centerY - 20);
            canvasCtx.lineTo(centerX + 20, centerY + 20);
        
            canvasCtx.moveTo(centerX + 20, centerY - 20);
            canvasCtx.lineTo(centerX - 20, centerY + 20);
            canvasCtx.stroke();
        }
    }
});