rest api 호출시 그리드 바인딩전에 진행바가 표시되도록 할수 있나요 ?

rest api 호출시 그리드 바인딩전에 진행바가 표시되도록 할수 있나요 ? > Q&A | 토론

PureJS rest api 호출시 그리드 바인딩전에 진행바가 표시되도록 할수 있나요 ?

추천0 비추천 0

페이지 정보

작성자 밝은하늘

작성일 2023-08-21 17:07 조회 276회 댓글 0건

검색

제품 버전 : 5.2

컨트롤 이름 : jquery기반에서 purejs로 위즈모 그리드를 사용하고자 합니다.

본문

관련링크

안녕하세요. 제가 사용하고 있는 쿼리는 jquery기반에서 위즈모 그리드를 사용합니다.

데이터를 호출할때 rest api

 $.ajax({
                type: 'POST',               
                url: 'https://localhost:7073/api/GetAzPartner',
                headers: { "apkey": "dddd" }, //인증키 추가 
                dataType: 'json',
                contentType: 'application/json', // 추가: Content-Type을 application/json으로 설정
                data: JSON.stringify({ bp_Nm: '홍길동' }), // 변경: 데이터를 JSON 문자열로 변환
                success: function (res) {

방식으로 호출하고 위즈모 그리드를 사용하면서 

  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
                      itemsSource: res.returnData,
                      isReadOnly: true,
                      loadedRows: function () {
                          itemCountElement.innerHTML = theGrid.rows.length + ' items';
                      }
                  });

데이터를 바인딩 합니다. 

api를 호출하고 그리드 바인딩전에 그리드에서 진행바를 호출할수 있나요 ?

한가지 더 문의 드립니다. 
아래와 같이 

   // 그리드에 필터 추가
    var f = new wijmo.grid.filter.FlexGridFilter(theGrid);

그리고 이 부분을 추가했더니 아래와 같이 오류가 발생했습니다.

wgrid02:80 Uncaught TypeError: Cannot read properties of undefined (reading 'FlexGridFilter')
    at Object.success (wgrid02:80:49)
    at c (jquery.min.js:2:25266)
    at Object.fireWith [as resolveWith] (jquery.min.js:2:26015)
    at l (jquery.min.js:2:77721)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2:80204)

아래와 같이 include했는데 빠진 부분이 있나요 ??

<title>위즈모 그리드</title>
    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script th:src="@{/webjars/jquery-ui/jquery-ui.min.js}"></script>
    <!-- Wijmo 레퍼런스 (필수) -->
    <link rel="stylesheet" th:href="@{/styles/wijmo.css}"/> 
    <script type="text/javascript" th:src="@{/scripts/vendor/controls/wijmo.min.js}"></script><!--thymeleaf js 연결-->

    <!-- Wijmo 컨트롤 (옵션, 필요한 컨트롤 만 추가) -->
    <script th:src="@{/scripts/vendor/controls/wijmo.grid.min.js}"></script>
    <!-- <script th:src="@{/scripts/vendor/controls/wijmo.chart.min.js}"></script>
    <script th:src="@{/scripts/vendor/controls/wijmo.input.min.js}"></script>
    <script th:src="@{/scripts/vendor/controls/wijmo.gauge.min.js}"></script> -->

    <!-- Wijmo custom culture (옵션, 원하는 문화권을 추가) 한국 -->
    <script th:src="@{/scripts/vendor/controls/cultures/wijmo.culture.ko.min.js}"></script>

확인 부탁드립니다. 감사합니다. 








 