5.13. 六赤阳阵の多表级联 - 图1六赤阳阵-已知最强的结界术,但此术范围远大于四赤阳阵。

    5.13. 六赤阳阵の多表级联 - 图2

    实例:功能演示>酒店管理(主子)Eova提供了如上图所示的主子模版可用于解决主子关系(仅支持1VN的主子关系)

    5.13. 六赤阳阵の多表级联 - 图3

    实例:功能演示>酒店管理(关联)但是实际业务系统,尤其是较为复杂的业务系统,往往各个业务功能之间都存在互相的关联关系,如上图所示.例如:主子孙: 用户 > 角色 > 权限主子孙孙主子多孙主多子多孙……复杂的需求有很多

    实际复杂需求举例:5.13. 六赤阳阵の多表级联 - 图4

    这种功能看着就有点头皮发麻的感觉,一个界面上9个表格,一路级联下来如果你的需求场景就是这样,并且客户或者需求要求这样,那么这种功能建议你手工自定义开发(Grid用Eova组件一句话构建)

    但是实际开发中,不应该是所有功能都是这样,极少数才会弄成这样,并且都是因为不得已的原因.

    下面就给大家介绍在Eova中如何搞定复杂的多表业务关联.权衡考虑:1.开发量少2.保持业务关系3.体验不能太差

    前置技能:色诱术の格式化单元格 思路:利用格式化单元格将关联字段进行格式化,建立点击事件,点击之后跳入级联目标界面.

    效果如下图所示:主表5.13. 六赤阳阵の多表级联 - 图5关联子表5.13. 六赤阳阵の多表级联 - 图6

    格式化关联的代码实现:格式化-链接

    1. function(value, row, index, field) {
    2. return '<a target="_blank" href="http://eova.cn" style="color:blue">' + value + ''
    3. }

    格式化-新开关联页面 to 浏览器Tab

    1. function(value, row, index, field) {
    2. return '<a target="_blank" href="/single_grid/list/biz_demo_hotel_stock?query_hotel_id=' + row.id + '" style="color:blue">' + value + '</a>';
    3. }

    格式化-新开关联页面 to Eova Tab

    1. function(value, row, index, field) {
    2. var url = '/single_grid/list/biz_demo_hotel_stock?query_hotel_id=' + row.id;
    3. return '<a href="javascript:parent.addTab(\'' + row.name + '库存\',\'' + url + '\',\'eova-icon1\');" style="color:blue">' + value + '</a>';
    4. }

    关联功能链接分解:目标功能列表URL:/single_grid/list/biz_demo_hotel_stock级联条件参数:?query_xxx字段名=条件值&query_xxx字段名=条件值同理可支持主子表的多字段关联

    PS:JS是万能的,只有你想不到的,没有你做不到的!大胆猜测,小心验证!


    后续的故事:在上面我们已经实现了不同功能界面之间的级联那如何讲当前列表页的参数继续传递给Form编辑页,固定某些关联字段的值.

    推荐方案:自定义按钮,参考主子的参数传递.主子模版是硬编码直接获取父Grid选中Row的关键字段值这里的区别是从URL上获取指定的关联字段值.

    1. <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'eova-icon724',plain:true" onclick="my_slave_add()">自定义子表新增,自动获取主的某字段</a>
    2. <script type="text/javascript">
    3. var my_slave_add = function () {
    4. // ------------------------------级联
    5. // 技能奥义:当前URL上获取关联参数,传递给Form固定指定字段值
    6. var ref = "?ref=xxx:" + $.getUrlPara("query_xxx");
    7. // 多个参数继续追加!!!!
    8. // ------------------------------级联
    9. var $grid = $('#${gridId}');
    10. loadDialog($grid, '新增${object.name}', '/form/add/${object.code}' + ref);
    11. };
    12. </script>

    当然这里需要考虑兼容默认列表的按钮操作和级联过来的按钮操作,如果有参则自动传递,否则走默认情况!