主从表 ajax,JBolt开发平台入门(15)- 上下结构主从表管理简单实现

在上节课中,我们讲到一种上下结构的主从表管理方式。如下图所示:

954049f5ab918f4bb13dcd99b2612e0b.png

上图中,上半部分是主表JboltVersion表的增删改查管理table;

class="jbolt_master_slave_box" 声明是一个主从表管理页面容器 class="jbolt_master_container" 声明上半部分主要做主表管理

d148346f65da37d2ae66a69750c88245.png

class="jbolt_master_page" 声明给主表使用的分页组件区域 其实是放在 主从表中间部位

class="jbolt_slave_container" 声明下半部分主要做子表管理的容器

95f8a39b64c3e5675f5c270702426465.png

中间是分页组件 对应的是主表的分页,下半部分是子表管理区域。 如果子表有多个,就会出现多个选项卡。

10cd6e9d50fffb2210aa0d2f2bfe49cb.png

每个选项卡内容区域是包含了一个data-ajaxportal的区域,通过配置data-url去动态加载子表数据。

触发事件是上面主表的每一行数据的点击事件,点击上方任意一行,获取到tr绑定的数据的唯一主键ID 与下方子表的ajaxPortal的原始URL拼接组成新的URL,调用ajaxPortal的重新加载新URL,实现内容切换。

剩下的就是设计AjaxPortal区域加载了子表的管理UI后的CURD操作,直接参考系统内实例即可。

fd5083e5a431bd689ef4141477e0e2f9.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值