[AXBoot/Front-end] 샘플 그리드 만들기 2 (수정)

---

강사님에게 코드리뷰를 받고 코드를 조금 수정했다.

1. 검색영역에 개선(o)

• 사용유무 select
• key, value로 검색

2. 왼쪽 그리드, 오른 트리(o)

key, value, select로 검색하는 기능을 성공했다.

SampleController.java

    @RequestMapping(value = "/parent/queryDsl", method = RequestMethod.GET, produces = APPLICATION_JSON)
    @ApiImplicitParams({
            @ApiImplicitParam(name = "key", value = "key", dataType = "String", paramType = "query"),
            @ApiImplicitParam(name = "value", value = "value", dataType = "String", paramType = "query"),
    })
    public Responses.ListResponse parentList(RequestParams<ParentSample> requestParams) {
        List<ParentSample> pages = this.parentService.get(requestParams);
        return Responses.ListResponse.of(pages);
    }

BaseService.java

    protected QParentSample qParentSample = QParentSample.parentSample;

ParentSampleService.java

    public List<ParentSample> get(RequestParams<ParentSample> requestParams) {
		String key = requestParams.getString("key","");
		String value = requestParams.getString("value", "");
		String useYn = requestParams.getString("useYn", "");

		BooleanBuilder builder = new BooleanBuilder();
		if (isNotEmpty(key)){
			builder.and(qParentSample.key.eq(key));
		}
		if (isNotEmpty(value)){
			builder.and(qParentSample.value.eq(value));
		}
		if (isNotEmpty(useYn)){
			builder.and(qParentSample.etc4.eq(useYn));
		}

		List<ParentSample> sample = select().from(qParentSample).where(builder).fetch();

		return sample;
	}

sample-grid.jsp
key와 value에 name과 id를 설정해주고, select 옵션을 생성한다.

        <div role="page-header">
            <ax:form name="searchView0">
                <ax:tbl clazz="ax-search-tbl" minWidth="500px">
                    <ax:tr>
                        <ax:td label="key" width="300px">
                            <input type="text" name="key" id="key" class="form-control" />
                        </ax:td>
                        <ax:td label="value" width="300px">
                            <input type="text" name="value" id="value" class="form-control" />
                        </ax:td>
                        <ax:td label='ax.base.use.or.not' width="300px">
                            <select id="useYn" name="useYn" class="form-control" >
                                <option value="">전체</option>
                                <option value="Y">사용</option>
                                <option value="N">미사용</option>
                            </select>
                        </ax:td>
                    </ax:tr>
                </ax:tbl>
            </ax:form>
            <div class="H10"></div>
        </div>

sample-grid.js
PAGE_SEARCH와 PAGE_SAVE의 url을 컨트롤러에서 설정한 /api/v1/samples/parent/queryDsl로 변경해주고 searchView를 수정한다.

fnObj.searchView = axboot.viewExtend(axboot.searchView, {
    initView: function () {
        this.target = $(document['searchView0']);
        this.target.attr('onsubmit', 'return ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);');
        this.filter = $('#filter');
        this.key = $('#key');
        this.value = $('#value');
    },
    getData: function () {
        return {
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
            filter: this.filter.val(),
            key: this.key.val(),
            value: this.value.val(),
        };
    },
});

+PAGE_SEARCH 함수에서 필요없는 부분들은 날려준다. 모르는 코드는 쓰지 않는게 좋다.

    PAGE_SEARCH: function (caller, act, data) {
        var paramObj = caller.searchView.getData();
        // console.log('paramObj: ', paramObj);
        // return;
        axboot.ajax({
            type: 'GET',
            url: '/api/v1/samples/parent/queryDsl',
            data: paramObj,
            callback: function (res) {
                caller.gridView01.setData(res);
                caller.gridView02.setData(sampleData);
            },
        });

        return false;
    },

아직 의문인점

• 오른족 그리드의 트리 데이터를 샘플로 만들어서 출력하고 있는데, 왼쪽에서 작성한 데이터로 트리를 만들려면 pid가 필요하다. 이건 어떤식으로 해결해야 하는걸까,,?

--> 일단 샘플 데이터로 해결하는게 맞고 앞으로 pid가 필요하다면 db수정이 아니라 데이터를 가져다가 pid를 강제로 주입하는 과정이 필요하다고 한다.