HAP框架学习之前后端数据交互

功能要求，点击行政区，弹出框显示该城市的行政区（注意：以下数据只供演示用，并不代表其真实性）

一、截图说明功能要求：

二、实现步骤：

1、获取页面参数

通过点击事件获取当前行的城市编号（cityId）

{
                name: "cityDistrict",
                title: '<@spring.message "fndcity.citydistrict"/>',
                width: 120,
                headerAttributes: {style: "text-align:center"},
                attributes: {style: "text-align:center"},
                template: function (rowdata) {
                    if (rowdata.cityId) {
                        return '<a href="javascript:void(0);" onclick="openWin(' + rowdata.cityId + ')"><@spring.message "fndcity.citydistrict"/></a>'
                    }
                    return '';
                }
            },

openWin = function (cityId) {
        var districtDialog = $("#district-dialog").kendoWindow({
            width: 1000,
            height: 450,
            title: '<@spring.message "fndcity.citydistrict"/>',
            visible: false,
            iframe: true,
            modal: true,
            resizable: false,
            content: 'fnd_district.html?cityId=' + cityId,
            close: function (e) {
                $("#grid").data("kendoGrid").dataSource.page(1);
            }
        }).data("kendoWindow");
        districtDialog.center().open();
    };

上面代码就实现了获取当前行的城市编号（cityId）

2、页面获取参数

方法{RequestParameters.<parameterName>!<defaultValue>}
举例{RequestParameters.studentId!0}

read: {
   url: BaseUrl + "/rent/fnd/district/${RequestParameters.cityId!0}/querybyid",
   type: "POST",
   dataType: "json"
    },

根据上面代码中的请求路径将cityId获取到并传向后台

3、后台接收参数

        @RequestMapping(
                value = {"/rent/fnd/district/{cityId}/querybyid"},
                method = {RequestMethod.POST}
                )
        @ResponseBody
        public ResponseData querybyid(@PathVariable Long cityId, @RequestParam(defaultValue = DEFAULT_PAGE) int page,
                                      @RequestParam(defaultValue = DEFAULT_PAGE_SIZE) int pageSize, HttpServletRequest request) {
            IRequest requestContext = createRequestContext(request);
            ResponseData rd = new ResponseData();
            FndDistrict ss = new FndDistrict();
            ss.setCityId(cityId);
            rd.setRows(this.service.selectById(requestContext,ss,page,pageSize));
            return rd;
        }

通过上面代码就可以获取到从前端传过来的参数cityId

接下来就是写自定义查询语句，实现方法就OK了

想看如何自定义查询语句请观看我的另一篇文章https://blog.csdn.net/qq_39331713/article/details/81226319HAP框架-自己写查询语句。

HAP框架学习之前后端数据交互

猜你喜欢