프로그래밍/javascript: 4개의 글

[DevExtreme] datagrid 사용법 및 옵션 정리

Posted by 고 고특파원
2020. 10. 18. 23:34 프로그래밍/javascript
Devextreme datagrid

프로젝트를 진행하다 보면 반드시 사용하게 되는 datagrid에대해 정리한다.

 

프로젝트는 jQuery로 진행할 것이다.

 

html

<div id="grid"></div>

간단히 div tag에 id값을 사용하여 html Tag를 사용한다.

 

js

	var _dataGrid;  
    
    var _dataList = [{
        "ID": 1,
        "FirstName": "John",
        "LastName": "Heart",
        "Prefix": "Mr.",
        "Position": "CEO",
        "BirthDate": "1964/03/16",
        "HireDate": "1995/01/15",
        "Notes": "John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.",
        "Address": "351 S Hill St.",
        "StateID": 5,
        "Key":"1",

    }, {
        "ID": 2,
        "FirstName": "Olivia",
        "LastName": "Peyton",
        "Prefix": "Mrs.",
        "Position": "Sales Assistant",
        "BirthDate": "1981/06/03",
        "HireDate": "2012/05/14",
        "Notes": "Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.",
        "Address": "807 W Paseo Del Mar",
        "StateID": 5,
        "Key":"2",
    },
    ];

_dataGrid = $("#grid").dxDataGrid({
            dataSource: _dataList,
            keyExpr: "Key",
            showBorders: true,              // DataGrid Border
            columnAutoWidth: true,          // 컬럼 자동 Width 설정
            wordWrapEnabled: false,         // DataGrid Text Wrap 여부
            rowAlternationEnabled: true,    // 짝수 Row 음영
            allowColumnResizing: true,      // 컬럼 사이즈 조절 여부
            allowColumnReordering: true,    // 컬럼 위치 조절 여부
            focusedRowEnabled: false,        // FocusedRow 포커싱 여부 (해당 옵션이 true이어야, onFocusedRowChanged Evnet 발생)
            filterRow: { visible: true },	// filter 및 Search row 
            pager: {
                showPageSizeSelector: true,
                allowedPageSizes: [5, 10, 20],
                showInfo: false
            },
            paging: {
                enabled: true,
                pageSize: 10
            },
            editing: {
                mode: 'cell', // 'batch' | 'cell' | 'form' | 'popup'
                allowUpdating: true
            },
            selection: {
                mode: "multiple"
            },
            onRowUpdating: function (e) {
                var row = e.oldData;
                console.log(row.STATE == "C" ? "C" : "U");
                row.ACTION = row.STATE == "C" ? "C" : "U";
            },
            onInitNewRow: function (e) {

                e.data.Key = "Key값 설정"
                e.data.STATE = "C";

                setTimeout(function () {
                    _dataGrid.option("focusedRowKey", e.data.Key);
                }, 10);
            },
            onEditingStart: function (e) {

            },
            onRowInserting: function (e) {

            },
            onRowInserted: function (e) {

                //새로 생성된 Row에 Focuse 되도록 변경
                _dataList.unshift(e.data);
                _dataList.splice((_dataList.length - 1), 1);

                _dataGrid.option({
                    dataSource: _dataList
                });

            },
            onFocusedRowChanged: function (e) {

                //const focusedRowKey = e.component.option("focusedRowKey");
                //console.log(focusedRowKey);

            },
            onRowValidating: function (e) {

                console.log("유효성 체크");
            },
            onContentReady: function (e) {

                e.component.option("pager.visible", !e.component.hasEditData());
                
            },
            columns: [
                {
                    dataField: "Key",
                    caption: "Key",
                    minWidth: 180,
                    allowEditing: false,
                    //width: 300
                },
                {
                    dataField: "ID",
                    caption: "ID",
                    minWidth: 180,
                    allowEditing: false,
                    //width: 300
                },
                {
                    dataField: "FirstName",
                    caption: "FirstName",
                    minWidth: 180,
                    //width: 300
                    validationRules: [{ type: "required", message: "FirstName을 입력하세요." }]
                }
            ]
        }).dxDataGrid("instance");

 

유료 컴포넌트 답게 devextreme에서 왠만한 datagrid 기능은 모두 제공되어진다.

문서화도 잘 되어 있어 사용하기 쉬울 것 같다.

 

Data Grid 관련 기능 Document

 

Overview - DevExtreme Data Grid: jQuery Widgets by DevExpress

--> Copy to CodePen Apply Reset $(function() { $("#gridContainer").dxDataGrid({ dataSource: { store: { type: "odata", url: "https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes", beforeSend: function(request) { request.params.startDate = "2018-05

js.devexpress.com

완성 되어 보여지는 datagrid

 

완성된 datagrid

WindowForm으로 Devexpress를 사용해와서 그런지,, Web에서 사용하는 Datagrid 기능은 거이 비슷한 것 같다.

 
제 블로그의 내용이 도움이 되셨나요?

여러분의 공감댓글이 큰 힘이됩니다 :)

▼▼▼▼▼▼▼▼▼▼▼
이 댓글을 비밀 댓글로

[DevExtreme] 유료 js 컴포넌트 정리

Posted by 고 고특파원
2020. 10. 11. 12:21 프로그래밍/javascript

프로젝트를 진행하다 알게된 DevExtreme에 대해 정리를 하려고 한다.

 

이전에 DevExpress를 이용하여 프로젝트를 진행하곤 했었는데(윈폼, ASP.Net 등..)

DevExtreme은 javascript용 유료 컴포넌트이다.

 

이전에는 주로 C#(WinForm, WPF, WebForm, ASP.Net, ASP.Net Core) 등 의 컴포넌트를 제공하며 돈을 벌던 회사였는데.. 워낙 javascript가 강세이다 보니 이렇게 js용 컴포넌트도 제공하는건가 싶다.

 

Documentation 제공

js용 컴포넌트답게 다양한 javascript에 대해 샘플코드를 제공한다. (Angular, React, Vue, jQuery 등)

 

컴포넌트 별 다양한 데모 제공

DevExpress는 Demo 파일 및 매뉴얼 문서가 정말 잘 정리되어있어, 처음 프로젝트를 진행하더라도 웬만한 기능에 대해 Demo 및 문서가 정리되어 있으며, 프로젝트를 진행 중 궁금한 사항에 대해서 질문을 했을 때 최대 1주일 이내로 답변도 받아 볼 수 있어 좋은것 같다.

 

 

DevExtreme - HTML5 JavaScript UI Widgets for Angular, React, Vue and jQuery by DevExpress

From Angular and React, to ASP.NET Core or Vue, DevExtreme includes a comprehensive collection of high-performance and responsive UI widgets for use in traditional web and next-gen mobile applications. The suite ships with a feature-complete data�

js.devexpress.com

해당 링크를 통해 좀 더 자세한 내용이 확인 가능하다.

 

프로젝트를 진행하는데 있어 js 컴포넌트를 염두에 두고 있다면.. 한번쯤은 대안을 두고 사용해볼만한 컴포넌트라고 생각한다. 

 

다음 포스팅을 통해 DevExtreme을 이용하여 예제 소스를 하나씩 기록하도록 하겠다.

 

제 블로그의 내용이 도움이 되셨나요?

여러분의 공감댓글이 큰 힘이됩니다 :)

▼▼▼▼▼▼▼▼▼▼▼
이 댓글을 비밀 댓글로

Dropzone js를 사용한 파일업로드 [기본]

Posted by 고 고특파원
2020. 4. 2. 19:40 프로그래밍/javascript
dropzone 파일업로드

파일 업로드 기능을 구현하기 찾아보다 발견한 Dropzone에 대해 정리를 한다.

 

샘플 코드는 아래 깃 헙에 업로드하였다.

 

https://github.com/workshko/javascriptSutdy/tree/master/dropzone

 

workshko/javascriptSutdy

자바스크립트 스터디 프로젝트. Contribute to workshko/javascriptSutdy development by creating an account on GitHub.

github.com

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dropzone 샘플</title>

    <link rel="stylesheet" href="css/dropzone.min.css" />
</head>
<body>
    <h2>dropzone 테스트</h2>

    <div class="dropzone-area">

        <form name="fname">
            <div class="dropzone" id="fileDropzone"></div>
            <button id="btn-upload-file">서버전송</button>
        </form>

    </div>

    <script src="js/dropzone.min.js"></script>
    <script src="https://code.jquery.com/jquery-git.min.js"></script>

    <script>

        //fileDropzone dropzone 설정할 태그의 id로 지정
        Dropzone.options.fileDropzone = {

        url: '업로드할url',          //업로드할 url (ex)컨트롤러)
        init: function () {
            /* 최초 dropzone 설정시 init을 통해 호출 */
            var submitButton = document.querySelector("#btn-upload-file");
            var myDropzone = this; //closure

            submitButton.addEventListener("click", function () {
                
                console.log("업로드");
                //tell Dropzone to process all queued files
                myDropzone.processQueue(); 

            });
            
            //기존에 업로드된 서버파일이 있는 경우,
            // $.ajax({
            //     url: 'upload.php',
            //     type: 'post',
            //     data: {request: 2},
            //     dataType: 'json',
            //     success: function(response){

            //         $.each(response, function(key,value) {
            //             var mockFile = { name: value.name, size: value.size };

            //             myDropzone.emit("addedfile", mockFile);
            //             myDropzone.emit("thumbnail", mockFile, value.path);
            //             myDropzone.emit("complete", mockFile);

            //         });

            //     }
            // });

        },
        autoProcessQueue: false,    // 자동업로드 여부 (true일 경우, 바로 업로드 되어지며, false일 경우, 서버에는 올라가지 않은 상태임 processQueue() 호출시 올라간다.)
        clickable: true,            // 클릭가능여부
        thumbnailHeight: 90,        // Upload icon size
        thumbnailWidth: 90,         // Upload icon size
        maxFiles: 5,                // 업로드 파일수
        maxFilesize: 10,            // 최대업로드용량 : 10MB
        parallelUploads: 99,        // 동시파일업로드 수(이걸 지정한 수 만큼 여러파일을 한번에 컨트롤러에 넘긴다.)
        addRemoveLinks: true,       // 삭제버튼 표시 여부
        dictRemoveFile: '삭제',     // 삭제버튼 표시 텍스트
        uploadMultiple: true,       // 다중업로드 기능
        
        };

    </script>

</body>

</html>




 

여기서 작성 시 중요한 점은, 

<div class="dropzone" id="fileDropzone"></div>
 
파일이 업로드 되는 구역의 div tag의 id를 'fileDropzone' 으로 지정하였을 경우, 

스크립트단에서 Dropzone.options.fileDropzone 으로 지정하여 dropzone을 세팅하여야 한다.

 

그 외의 옵션에 대해서는 주석을 통해 기록해 두었으니 참고하도록 하고, 더 많은 옵션에 대해 알아보고 싶다면 아래 링크에서 확인해보도록 한다.

 

https://www.dropzonejs.com/

 

Dropzone.js

dropzone.js DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable. Scroll down!

www.dropzonejs.com

다음 편에서는. Net MVC5에서 Dropzone js를 적용하여 파일 업로드를 실제로 구현해보는 예제를 해볼 예정이다.

이 댓글을 비밀 댓글로

ASP.NET 에서 Ajax 사용하기.

Posted by 고 고특파원
2018. 4. 30. 15:31 프로그래밍/javascript

1. Repository클래스 구성

 

- 이 부분은 DB접속 및 데이터를 가져오는 클래스입니다.

 

단순히 DB에 접속하여 데이터를 가져오는 부분이기 때문에 각자의 스타일대로 구현 하면된다.

 

나는 ADO.Net을 이용하여 DB에 접근하고 프로시저를 통해 DataSet을 반환하도록 구성할 것이다.

 

최근들어 알게된 Micro ORM인 Dapper.Net 또한 유용하게 사용할 수 있으니 관심이 있는 사람은

 

참고해보면 좋을것 같다.

 

 

public class RepositoryClass
{
        
        public List<모델클래스> GetData(int Key)
        {
            

List<모델클래스>data = new List<모델클래스>();

 

 

            return data;

        }

}

 

 

 

2. 모델클래스 정의

 

이 부분은 DB에서 가져온 DataTable의 ModelView 클래스 입니다.

 

단순히 DB에서 가져오는 DataTable의 항목을 멤버로 가지면 된다.

 

 

public class 모델클래스

{

int Key {get;set;} //Key

}

 

 

 

3. WebService 구성 (.asmx)

 

이 부분은 ajax에서 호출하기 위한 웹서비스를 구성하는 부분입니다.

 

현재 내가 정리하는 부분은 웹서비스를 호출하면 해당하는 데이터를 Json방식으로 데이터를 반환 하고

 

있지만,

 

.net에서는 .asmx의 웹서비스는 상당히 오래된 기술이라고 한다..

 

최근 들어서는 .net의 WEB API를 호출하여 (POST, GET, PUT, DELETE) 의 요청을 하여 Json 방식

 

으로 데이터를 반환 시킬 수도 있다고 한다.

 

이부분에 대해서는 다음 기회에 알아가도록 한다.

 

 


        [WebMethod(EnableSession = true)]
        public List<모델클래스> GetData(int key = 0)
        {
            Repository클래스 repository = new Repository클래스();

            return repository.GetData(key);

        }

 

 

 

4.aspx에서 ajax 호출

 

이 부분에서 ajax를 호출 한다.

 

 

function GetData() {

            var keydata = '1';

 

            $.ajax({
                type: "POST",
                url: "WebService/웹서비스.asmx/GetData"

                data: "{key':'" + keydata + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                }
            });
            function OnSuccess(r) {

 

//성공시 처리할 내용 수행

 

                }
            }

        }

 

 

 

 

이 댓글을 비밀 댓글로