amis(crud组件后台拼接展示+分页效果)

{
    "type": "page",
    "body": [{
        "type": "crud",
        "api": "/amis/api/mock2/sample?page=${page}&perPage=${perPage}",
        "syncLocation": false,
        "defaultParams": {
            "perPage": 5
        }

    }]


};

syncLocation:是否将过滤条件的参数同步到地址栏,默认为true
可以配置defaultParams,配置{ perPage: 5 },指定分页的默认每页数据条数为 5条。

"defaultParams": {
                     "perPage":5
                  },

后台接口


List<Map<String, String>> listMap = new ArrayList<>();
Map<String, String> datamap1 = new HashMap<>();
datamap1 .put("testname", "测试01");
datamap1 .put("testage", "27");
datamap1 .put("testTime", "2023-10-10");
datamap1 .put("testAddress", "xx省xx市");
listMap.add(datamap1 );

Map<String, String> datamap2 = new HashMap<>();
datamap2.put("testname", "测试02");
datamap2.put("testage", "28");
datamap2.put("testTime", "2023-10-10");
datamap2.put("testAddress", "xx省xx市");
listMap.add(datamap2);

List<Map<String, String>> listMap1 = new ArrayList<>();
Map<String, String> map1 = new HashMap<>();
map1.put("label", "姓名");
map1.put("name", "testname");
listMap1.add(map1);

Map<String, String> map2 = new HashMap<>();
map2.put("label", "年龄");
map2.put("name", "testage");
listMap1.add(map2);

Map<String, String> map3 = new HashMap<>();
map3.put("label", "日期");
map3.put("name", "testTime");
listMap1.add(map3);

Map<String, String> map4 = new HashMap<>();
map4.put("label", "地址");
map4.put("name", "testAddress");
listMap1.add(map4);

Map<String, Object> maptest= new HashMap<>();
maptest.put("rows", listMap)
maptest.put("columns",listMap1)
maptest.put("count", 2)

### 创建和使用AMIS自定义组件 #### 注册并引用自定义组件 为了使其他组件能够引用新创建的组件,在AMIS环境中需先完成组件注册工作。一旦某个组件被成功注册至`scoped`上下文中,其余部分就可以利用`getComponentByName("指定名称")`的方式获取已命名的目标组件实例[^1]。 #### 自定义HTML内容组件案例 具体来说,如果目的是构建一个允许用户设定背景颜色的HTML片段显示组件,则可以通过调用AMIS提供的定制化渲染接口来达成这一需求。此过程涉及设计一个新的渲染单元——比如命名为`highlightHtml`——随后将其作为全局可用资源加入项目之中[^3]。 ```json { "type": "custom-component", "name": "highlightHtml", "renderer": function(args){ // 实现自定义逻辑... } } ``` 对于上述JSON配置中的`renderer`字段,应当填充实际用于处理数据并与前端交互的具体函数体;而`name`属性则决定了后续通过何种标识符访问这个新的组件类型。 #### Dialog弹窗组件应用范例 除了纯文本或静态结构外,有时也需要动态地向页面注入更复杂的UI元素,例如模态对话框(Modal Dialog)。借助于内置的动作机制(Action),可以轻松触发此类界面控件,并传递必要的参数描述预期行为[^2]: ```json { "type": "page", "body": { "label": "点击打开弹窗", "type": "button", "actionType": "dialog", "dialog": { "title": "提示信息", "body": "<p>这里是弹窗的内容区域。</p>" } } } ``` 以上代码展示了怎样设置按钮以响应用户的点击事件,进而呈现带有特定标题及主体消息的浮动窗口。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值