教程總目錄
上一節(jié):JBolt開發(fā)平臺入門(14)-四種主從表管理操作方式
在上節(jié)課中我們講到一種上下結(jié)構(gòu)的主從表管理方式。如下圖所示:
上下結(jié)構(gòu)
上圖中,上半部分是主表JboltVersion表的增刪改查管理table;
class="jbolt_master_slave_box" 聲明是一個主從表管理頁面容器 class="jbolt_master_container" 聲明上半部分主要做主表管理
上半部分布局
class="jbolt_master_page" 聲明給主表使用的分頁組件區(qū)域 其實是放在 主從表中間部位
class="jbolt_slave_container" 聲明下半部分主要做子表管理的容器
中間部分
中間是分頁組件 對應(yīng)的是主表的分頁,下半部分是子表管理區(qū)域。 如果子表有多個蟋恬,就會出現(xiàn)多個選項卡。
子表管理
每個選項卡內(nèi)容區(qū)域是包含了一個data-ajaxportal的區(qū)域惕鼓,通過配置data-url去動態(tài)加載子表數(shù)據(jù)筋现。
觸發(fā)事件是上面主表的每一行數(shù)據(jù)的點擊事件唐础,點擊上方任意一行箱歧,獲取到tr綁定的數(shù)據(jù)的唯一主鍵ID 與下方子表的ajaxPortal的原始URL拼接組成新的URL,調(diào)用ajaxPortal的重新加載新URL一膨,實現(xiàn)內(nèi)容切換呀邢。
剩下的就是設(shè)計AjaxPortal區(qū)域加載了子表的管理UI后的CURD操作,直接參考系統(tǒng)內(nèi)實例即可豹绪。
具體位置
下一節(jié):
JBolt開發(fā)平臺入門(16)- 彈出Dialog顯示指定區(qū)域的html內(nèi)容