'bootstrap'에 해당되는 글 3건

  1. [CSS] CSS 프레임워크 관련 리소스 북마크
  2. [JavaScript] Kendo UI Web Grid: JavaScript 그리드 위젯 라이브러리 (2)
  3. [JavaScript] Twitter Bootstrap에서 jqGrid 레이아웃 최적화하기

[CSS] CSS 프레임워크 관련 리소스 북마크

Top 10 Front-End Development Frameworks (by Ivaylo Gerchev)

http://www.sitepoint.com/top-10-front-end-development-frameworks/

http://www.sitepoint.com/top-10-front-end-development-frameworks-part-2/

Bootstrap을 포함한 다양한 프론트엔트 개발 프레임워크를 소개한다. 나 또한 작년부터 사내 웹 시스템 개발에 Bootstrap을 도입하여 재미를 보고 있다. Bootstrap은 이미 그 자체가 생태계가 되어 전세계적으로 관련  라이브러리들이 쏟아져 나오고 있다. 당분간 Bootstrap의 강세가 지속될 것으로 예상된다.


Five Essential Front-End Tools That Should be Used with Modern MVC Projects (by Adam Tibi)

http://www.adamtibi.net/06-2013/five-essential-front-end-tools-that-should-be-used-with-modern-mvc-projects

normalize.css, html5shiv.js와 같은 유용한 브라우저 호환성 라이브러리를 소개한다.


저작자 표시 비영리 동일 조건 변경 허락
신고

[JavaScript] Kendo UI Web Grid: JavaScript 그리드 위젯 라이브러리

Kendo UI Web Grid by Telelik
- jQuery v1.8.2 기반의 무료 그리드 위젯 라이브러리
- 튜토리얼
http://demos.kendoui.com/web/grid/index.html
http://docs.kendoui.com/api/web/grid
- 다운로드 링크

http://telerik.s3.amazonaws.com/kendoui.web.2012.3.1114.open-source.zip

http://cdn.kendostatic.com/2012.3.1114/js/kendo.web.min.js
http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css
http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css

Bootstrap Theme for Kendo UI Web by AdvancedREI
https://github.com/advancedrei/BootstrapForKendoUI
- AdvancedREI 개발팀이 만든 Kendo UI Web Grid를 위한 Twitter Bootstrap CSS 테마 제공
- kendo.default.min.css를 대체
- 소개글
http://bristowe.com/blog/2012/9/25/tales-of-kendo-ui-awesomeness-advancedrei
- 다운로드 링크
https://github.com/advancedrei/BootstrapForKendoUI/raw/master/Stylesheets/kendo.bootstrap.min.css

Knockout-Kendo.js by Ryan Niemeyer
http://rniemeyer.github.com/knockout-kendo/
- Knoockout.js 개발자가 만든 Kendo UI Web을 위한 Knockout.js 바인딩 라이브러리 제공
- 소개글
http://www.knockmeout.net/2012/03/knockoutjs-bindings-for-kendo-ui.html
http://www.kendoui.com/blogs/teamblog/posts/12-12-20/knockout_js_and_kendo_ui_-_a_potent_duo.aspx
- 다운로드 링크
https://raw.github.com/rniemeyer/knockout-kendo/master/build/knockout-kendo.js
https://github.com/rniemeyer/knockout-kendo/blob/master/build/knockout-kendo.min.js


Kendo UI Web Grid: Enabling Server Side Sorting and Paging with ASP.NET MVC by dlewis
http://sympletech.com/hacking-on-the-kendo-ui-grid-enabling-server-side-sorting-and-paging-in-asp-net-mvc/

Kendo UI Web Grid: KendoGridBinder Demo by Stef
https://github.com/StefH/KendoGridBinder
http://kendogridbinderex.apphb.com/


API Reference: kendo.data.DataSource
http://docs.kendoui.com/api/framework/datasource

API Reference: kendo.ui.Grid
http://docs.kendoui.com/api/web/grid





Bootstrap 테마 적용하기

* 아래 순서대로 CSS를 임포트

<link rel="stylesheet" href="/resources/lib/KendoUIWeb/css/kendo.common.min.css">
<link rel="stylesheet" href="/resources/lib/KendoUIWeb/css/kendo.default.min.css">
<link rel="stylesheet" href="/resources/lib/KendoUIWeb/css/kendo.bootstrap.min.css">


메시지 한글화하기

* kendo.web.min.js 파일을 아래와 같이 수정

required:"{0} is required"
pattern:"{0} is not valid"
min:"{0} should be greater than or equal to {1}"
max:"{0} should be smaller than or equal to {1}"
step:"{0} is not valid"
email:"{0} is not valid email"
url:"{0} is not valid URL"
date:"{0} is not valid date"
empty:"Drag a column header and drop it here to group by that column"
display:"{0} - {1} of {2} items" >> "전체 {2}개 항목 중 {0}~{1}번째 항목 출력"
empty:"No items to display" >> "출력할 항목이 없습니다"
page:"Page"
of:"of {0}"
itemsPerPage:"items per page" >> "한 페이지에 출력할 항목 수"
first:"Go to the first page" >> "첫 페이지로 이동"
previous:"Go to the previous page" >> "전 페이지로 이동"
next:"Go to the next page" >> "다음 페이지로 이동"
last:"Go to the last page" >> "마지막 페이지로 이동"
refresh:"Refresh" >> "새로 고침"
sortAscending:"Sort Ascending" >> "오름차순 정렬"
sortDescending:"Sort Descending" >> "내림차순 정렬"
filter:"Filter" >> "필터"
columns:"Columns"
uploadFile:"Upload"
orderBy:"Arrange by"
orderByName:"Name"
orderBySize:"Size"
directoryNotFound:"A directory with this name was not found."
emptyFolder:"Empty Folder"
deleteFile:'Are you sure you want to delete "{0}"?'
invalidFileType:"The selected file \"{0}\" is not valid. Supported file types are {1}."
overwriteFile:"A file with name \"{0}\" already exists in the current directory. Do you want to overwrite it?"
dropFilesHere:"drop files here to upload"
info:"Show items with value that:"
isTrue:"is true"
isFalse:"is false"
filter:"Filter"
clear:"Clear"
and:"And"
or:"Or"
selectValue:"-Select value-"


한글화 적용하기

* 아래 순서대로 JavaScript를 임포트

<script src="/resources/lib/jQuery/jquery-1.8.3.min.js"></script>
<script src="/resources/lib/KendoUIWeb/js/kendo.web.min.js"></script>
<script src="/resources/lib/KendoUIWeb/js/cultures/kendo.culture.ko-KR.min.js"></script>





테이블에 그리드 적용하기

* HTML

<div class="k-content" style="overflow: auto; width: 100%">
  <table id="someTable"></table>
</div>


* JavaScript (그리드 정의)

$('#someTable').kendoGrid({
    dataSource: {
        data: localDataSource,
        pageSize: 10
    },

    autoBind : false, // 그리드 초기화시 DataSource 자동 맵핑을 방지
    sortable: {
        mode: "multiple",
        allowUnsort: true
    },
    selectable: 'multiple row',
    navigatable: false,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    scrollable: true,
    columnMenu: false,
    columns: [{
        field: 'IS_SELECTED',
        title: ' ',
        template: '<input type="checkbox" />',
        width: 35},
    {
        field: 'DB_TABLE_FIELD_NAME_1',
        title: '컬럼명1',
        width: 60},
    {
        field: 'DB_TABLE_FIELD_NAME_2',
        title: '컬럼명2',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_3',
        title: '컬럼명3',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_4',
        title: '컬럼명4',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_5',
        title: '컬럼명5',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_6',
        title: '컬럼명6',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_7',
        title: '컬럼명7',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_8',
        title: '컬럼명8',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_9',
        title: '컬럼명9',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_10',
        title: '컬럼명10',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_11',
        title: '컬럼명11',
        width: 200}]
});


* JavaScript (로컬 데이터소스 정의)

var localDataSource = [{
    DB_TABLE_FIELD_NAME_1: '1001',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1002',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1003',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1004',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1005',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1006',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1007',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1008',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1009',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1010',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1011',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1012',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1013',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1014',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1015',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'

}];


* 적용 결과


* Remote DataSource 정의하기

var someDataSource = new kendo.data.DataSource({
    serverPaging: true, // 서버 사이드 페이징 활성화
    pageSize: 10, // 1페이지 요청시 page=1, pageSize=10 요청 파라메터 전달
    serverSorting: true, // 서버 사이드 정렬 활성화
                         // sort[0][field]=필드명, sort[0][dir]=asc|desc 요청 파라메터 전달
    transport: {
        read: {
            type: 'post',
            dataType: 'json',
            url: 'someUrl'
            // data: { userDefinedParameter: someValue }
            // 사용자정의 요청 파라메터 전달

        }
    }
    schema: {
        data: function(response) { return response.data; } // 그리드에 출력될 결과 데이터, 응답 데이터의 data 값을 맵핑
        total:
function(response) { return response.total; } // 전체 페이지 수, 응답 데이터의 total 값을 맵핑
   
}

});



* DataSource 오브젝트에 로우 추가하기

someDataSource.add({ name: "John Smith", description: "Product Description", address: "123 1st Street" });



* DataSource URL 재설정 및 그리드 Refresh하기

function reloadKendoGrid(dataSource, url) {
  dataSource.options.transport.read.url = url;
  dataSource.read();
}

reloadKendoGrid(dataSource, 'url');



* 그리드 초기화하기

function resetKendoGrid(dataSource) {
  dataSource.options.transport.read.url = '';
  dataSource.data([]);
}


resetKendoGrid(dataSource);


* 그리드 오브젝트가 아닌 그리드가 바라보는 new kendo.data.DataSource()로 정의된 데이터소스 오브젝트에 직접 접근하여 초기화 수행



* 서버 사이드(Java/Spring MVC 3)에서 DataSource 요청에 응답하기

<Controller>

    @RequestMapping(value = "someUrl", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    @ResponseBody
    public Map<String, Object> response(@RequestParam("page") int page, @RequestParam("pageSize") int pageSize) {
        Map<String, Object> response = new HashMap<String, Object>();
        try {
            List<Map<String, Object>> result = someService.read(page, pageSize);
            response.put("data", result);

            if (Objects.equal(result.size(), 0)) {
                response.put("total", 0);
            } else {
                response.put("total", result.get(0).get("TOTAL_ROW_COUNT"));
            }

            return response;
        } catch (Exception ex) {
            Map<String, Object> errorResponse = JsonUtil.createErrorResponse(ex);
            return errorResponse;
        }
    }



* 서버 요청시 파라메터를 JSON 문자열로 전달하기

var someDataSource = new kendo.data.DataSource({
    serverPaging: true,
    serverSorting: true,
    pageSize: 10,
    sort: {
        field: "CREATETIME",
        dir: "desc"
    },
    transport: {
        read: {
            type: 'post',
            dataType: 'json',
            url: '',
            contentType: 'application/json;charset=UTF-8'
        },
        parameterMap: function(data, operation) {
            return JSON.stringify(data);
        }
    },
    schema: {
        data: function(response) {
            return response.data;
        },
        total: function(response) {
            return response.total;
        }
    }
});

* contentType: 'application/json;charset=UTF-8'가 명시되어야 서버에서 파라메터를 JSON 문자열로 인식 가능
* parameterMap은 Kendo UI Web Grid의 파라메터 포맷을 커스터마이징하는 역할을 수행하는 프라퍼티
* return JSON.stringify(data);을 통해 기본 파라메터 오브젝트인 data을 JSON 문자열로 변환하여 서버에 전달


저작자 표시 비영리 동일 조건 변경 허락
신고

[JavaScript] Twitter Bootstrap에서 jqGrid 레이아웃 최적화하기

jqGrid는 DataTables와 더불어 가장 많이 쓰이는 JavaScript 진영의 DataGridView 라이브러리다. 하지만 jQuery UI를 기반으로 개발되었기 때문에 그리드 기반의 Twitter Bootstrap에서 사용하려면 아래와 같이 약간의 트윅이 필요하다.


<CSS>

input.ui-pg-input {
    width: auto;
    padding: 0px;
    margin: 0px;
    line-height: normal
}
select.ui-pg-selbox {
    width: auto;
    padding: 0px;
    margin: 0px;
    line-height: normal
}


<HTML>

<body data-spy="scroll" data-target=".bs-docs-sidebar" style="padding-top: 60px">
  <div class="contatiner-fluid" style="margin-left: 10px; margin-right: 10px">
    <div class="row-fluid">
      ...
        <table id="someTable"></table>
        <div id="someTablePager"></div>
      ...
    </div>
  </div>


<JavaScript>

$("#someTable").jqGrid({ ... height : 'auto', autowidth : true, shrinkToFit : false, ... });


저작자 표시 비영리 동일 조건 변경 허락
신고