论坛首页新手上路 签到
查看: 8293|回复: 0

[知识分享] 联动 级联 高级查询 表单 可编辑表格 - 大全

[复制链接]
金智-蔡正大

该用户从未签到

5

主题

10

帖子

30

积分

初来乍到

Rank: 1

积分
30
发表于 2018-9-10 01:06:07 | 显示全部楼层 |阅读模式
本帖最后由 zdcai 于 2018-11-27 17:29 编辑

关于联动简要描述:
       实现方式: 字段实现联动, 是根据业务|数据模型配置来实现,或者js干预模型对象属性也成;具体的实现是需要相应组件来集成组件: emapLinkage,它是读取联动模型配置来实现联动;
起初只有EmapForm中继承了,后续因为业务的需要,emapAdvancedQueryemapFilterQuery 均已集成了;
但是由于相应的“历史”原因,可编辑表格, 每个tr中未能集成联动组件,但是没关系,本文中已描述如何取巧来集成;

一、 如何在模型中配置字段的联动?
1. 可以参考这个的 链接
2. 文字描述在某个字段中需要配置两个配置项;
联动字段:所配置的字段是根据模型中的哪一个字段值change后进行联动;
联动条件:字段的联动,会传递一个querySetting 的参数, 其中参数的name值(最终的生成sql条件)就是根据这个来,实际根据需求而定;

二、 联动条件querySetting参数如何传递给webservice接口组件端来接受并使用?
1. 没有前后端组件分离,基本上无需关注此问题。
2. 配置字典项, 对于自定义动作为组件查询接口;
3. 组件webservice接口中, 需要定一个参数,固定写法, final String dicSearchInfo_searchValue, 这个参数将会接受到联动传递的querySetting参数,在实现类中自行使用即可完成;

三、表单、高级查询中, 联动实现小技巧
场景描述:比如, 招生项目+院系需要联动, 而招生项目必须默认为当前开启的只有一条,所以无需显示,但是院系有需要根据招生项目的change来实现联动查询;前提,模型中配置好了联动字典信息;
1. 表单中实现,将招生项目字段通过模型配置或者js来干预模型信息,来隐藏该字段, 表单中虽然隐藏了,但是元素实际上是存的, 只是display:none而已;
1.1 emapForm('setValue', {ZSXM_WID: 'xxx', ZSXM_WID_DISPLAY: 'XXXX'}); 给默认值,然后 $('#emapForm [data-name=ZSXM_WID]').trigger('selected'); 即可实现联动了。

2. 高级查询中,如果模型中配置了隐藏招生项目字段, 那么久没有这个元素了,表单中的方式也就行不通,可以 通过js来手动隐藏加载好之后的元素;
$('#emapForm [data-name=ZSXM_WID]').parent().parent().hide(); 或者 parents('.xxx');
2.2 比如使用的emapAdvancedQuery,那么 $('#emapAdvancedQuery').emapAdvancedQuery('setValue', '[{name: "ZSXM_WID", value: "xxxx",...}]');
querySetting 具体格式,可以随意参考一个表格条件查询, debug Network;
2.3 setTimeout(function(){ $('#emapForm [data-name=ZSXM_WID]').trigger('selected'); },10)

四、可编辑表格每个tr中实现联动
1. 手动模拟模型配置一个联动信息
2. 定一个公共方法,我的这段代码在UI对象里面;
  1. /**
  2.                          * 字段联动功能实现
  3.                          * 由于emapForm中集成了Linkage组件, 但是emapAdvancedQuery 和 emapFilterQuery没有集成, 所以主要用于这两种情况使用
  4.                          * 同时关于这块的需求已经提交至前端部门, 后续直接在UI.js中直接废弃本方法即可
  5.                          * @param $element emapAdvancedQuery 或 emapFilterQuery 元素 或者可编辑表格$tr
  6.                          * @param dataMode 对应动作的业务模型|数据模型 字段信息 Array
  7.                          */
  8.                         initLinkage: function($element, dataMode){
  9.                     //联动 应该配置在被联动的字段模型中,
  10.                     //联动字段(linkageBy): 模型中联动字段的name 条件字段(linkageName): 数据表中联动字段的name
  11.                     var linkMode =  $(dataMode).filter(function(idx, item){
  12.                             if($.trim(item['form.linkageBy']) != '') {
  13.                                     item.linkage = [{
  14.                                             linkageBy:  item['form.linkageBy'],
  15.                                             linkageName: item['form.linkageName'],
  16.                                             type: "data"
  17.                                     }];
  18.                                     return true;
  19.                             }
  20.                             return false;
  21.                     }).get();
  22.                     $element.emapLinkage({
  23.                         data: linkMode
  24.                     });
  25.                         },
复制代码
3. 在可编辑表格中options中定一个渲染完成回调api: rendered(该api请参考jqx,在emapdatatable中的缺陷是:每次渲染调用了3次,不过无伤大雅, 这个场景不影响实现)
  1. var mode = WIS_EMAP_SERV.getMode(bs.api.pageMode, 'xxx自定义查询动作', 'gird');
  2. var tableOptions = {
  3. isEditMode: true, //表格默认进入编辑模式
  4. ....省略无数个api参数
  5. rendered: function(){
  6.    $('#emapdatatable tbody tr').each(function(idx, tr){ UI.initLinkage($(tr), mode) })
  7. }
  8. }
复制代码



以上内容就是小的个人所了解的关于联动的实现,同时感谢大佬【戚雨】的耐性指导下不断的学习, 如还有请问请直接咨询戚雨】,官请慢用;end。。。。




联动代码.png
您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

Archiver|手机版|小黑屋|江苏金智教育信息股份有限公司 ( 系统管理员:binmeng@wisedu.com  

GMT+8, 2021-3-3 03:46

Powered by Discuz! X3.2

© 2015 Design: www.wisedu.com

快速回复 返回顶部 返回列表