xxxxxxxxxx本节整理了大家经常遇到的问题
xxxxxxxxxx问：此为深入使用布局器，期望有些组件的属性比如下拉框 能够动态的根据后台返回来设置答：您需要使用布局器的api+callback便可实现，具体做法如下方案一：实时刷新调用在callabck.js的pre_build_attrs(每次在构建属性之前)里注入以下逻辑方法调用api.getConstant()拿到constant.js的实例，然后动态修改this.rightPanel的某个组件的属性最后需要调用一下api.refreshRightAttrPane();使之生效方案二：仅在布局器加载后调用一次在callback.js的after_start(布局器加载完毕)里注入以下逻辑方法调用api.getConstant()拿到constant.js的实例，然后动态修改this.rightPanel的某个组件的属性最后需要调用一下api.refreshWorkspace();使之生效以上方案同样适用于自定义左侧组件源最后调用一下api.rebuildLeftComponents();刷新一次左侧源的事件//参考代码 当我们改变由此属性下拉框时动态渲染另外一个下拉框的可选值MagicalCallback.prototype.before_change_attr_callback = function (obj) {//属性 数据集change事件if (obj.changeAttrName == "mc-attr-unknown-source-api") {var api = new MagicalApi();var rightPanel = api.getConstant().getRightPanel();for (var i = 0; i < rightPanel.length; i++) {var content = rightPanel[i].content;for (var identifier in content) {if (identifier != 'mc-echarts-bar') {continue;}var configs = content[identifier];for (var j = 0; j < configs.length; j++) {var config = configs[j];if (config.attrName == 'mc-attr-unknown-type-api') {//这个是右侧有哪些表单 用于自动填充表单字段的 您可以忽略configs[j].options = [{'type1': '类型1'}, {'type2': '类型2'}];}}}}}//最后刷新一下右侧属性面板 让我们配置的生效api.refreshRightAttrPane(obj.focusNode.magicalCoder.id);return true;}
xxxxxxxxxx组件化思路，把我们的每一个echarts统计图标封装成一个独立完整的组件，只要配置了数据源就能自己请求后端接口，并按照布局器的配置来自动渲染数据
xxxxxxxxxx下拉框 动态显示可选数据库字段让用户选择业务的是每一家都不一样 所以业务就是组件化，只让小白用户拖拽和配置，真正运转起来 还得各家程序员来预编码好
把我们代码当做纯静态资源 跟您系统已有的js放同一个地方即可
xxxxxxxxxx思路如下：视图区是修改模板代码的区域，每当修改完，在callback.js中的after_workspace_change注入方法，将html保存到后端模板对应的文件夹，然后调用后端模板引擎+后端代码 来渲染预览实时页面也就是在布局器可以改模板 如果要预览效果 只能是用另一种方案 请求后端渲染一下页面 然后预览
xxxxxxxxxx我们会拉您入群，统一在群里推送更新版本
| 安装版 | 企业版 | |
|---|---|---|
| 离线使用 | 支持 | 支持 |
| 定制化 | 不支持 | 支持 |
| 使用限制 | 本机 | 无限制 |
xxxxxxxxxx只要您使用的ui框架或组件基于jquery 或者vue开发的 都可以顺利嵌入我们布局器
1 关闭缓存 application-env.js 中cache.enable配置成false 这个缓存
（当我们嵌入系统后，基本上就用不上了，因为数据都会被我们保存在自己服务器，布局器的缓存策略反而会影响体验）
2 callback.js种的default_render_after_start 返回false（但不是每次都返回false,需要您根据当前页面是否又pageId之类的标记来返回，因为如果没有pageId，布局器还是要初始化的，需要返回true,如果您又pageId，那您自己肯定会执行insert方法，此处就没必要额外的重复执行了)
MagicalCallback.prototype.default_render_after_start = function () {return true;}
3 打开iframe-ui.js，查看render的入参：html 当满足什么条件时 不需要继续往下执行，一般是一个根面板id=magicalDragScene 的空div时没必要继续往下渲染的
4 检查自己是否过早调用的相关api，因为相关api会导致重渲染工作区
xxxxxxxxxx如果您是希望把布局器嵌入到某一个流程，并且希望某些权限的角色可以使用当前界面的控件，那么就需要把布局器跟权限系统融合
xxxxxxxxxx当前页面 我拖拽了一个输入框，我希望领导权限的可以编辑，员工权限的不能编辑，那怎么做呢
xxxxxxxxxx我们为输入框控件定制一个属性（write-role-list)，可写权限角色列表（是个下拉框，复选框等等自行考虑），意思是 如果我们选择了这一个值，那么就往输入框配置了一个属性write-role-list=“1” 代表角色id=1的可以写这个输入框然后我们写一个全局的js,遍历界面有哪些控件配置了write-role-list属性，根据值来决定当前登录的用户对此控件是否可写
xxxxxxxxxx1 您可能需要知道我们布局器如何定制属性，并且属性是后端提供的接口返回的数据2 您可能需要了解这个全局js的写法
xxxxxxxxxx方式一推荐：封装到固定的业务场景组件 比如table内的删除 新增按钮 这些都是封装到表格控件的，布局器仅需要引入这个控件，这些事件都提前做好了优点：可维护性高 内聚 不易产生耦合缺点：遇到组件之间的交互会比较掣肘方式二：直接面向程序员编程 通过布局器的脚本模块自行写js优点：传统的开发方式缺点：使用者必须是程序员才行方式三：利用布局器的可视化脚本编辑器实现（针对vue框架），可以拖拽一个按钮，然后右侧属性 事件优点：可视化写js是布局器的一个深度扩展，给予用户更多的自由化缺点：不好维护啊 要求使用者预先培训方法四：利用布局器一步一拖拽，一步一配置的思路，动态的把可能出现的场景的脚本 动态的配置到布局器上，这是最复杂的方法，但也是最聪明的方式但是这会给开发工作带来爆炸式的增长，因为您是无法提前预知到底有哪些组合会出现，特别是组件之间的交互优点：使用者方便缺点：开发量多，容易出bug
xxxxxxxxxx综上所述：您可以尽量封装内聚的组件，当没法满足组件之间交互时，检查是不是自己封装的组件粒度太细，如果不是，可以考虑结合方法二 三 四综合使用在这方面我们经验丰富，拿出您的具体场景 跟我们沟通一下，我们会为您推荐最优路径
xxxxxxxxxx技术支持也是我们的一大特色，耐心专业的态度，为您集成过程中出谋划策
布局器引入部分第三方明确免费开源的，让您无后顾之忧开源产品列表如下:jqueryvuelayUielement-uiaceant desginvantvuetifyztreeechartsremixiconjson3具体可以参考我们的drag\js\lib\ 和drag\ui布局器是我们原创作品，请认准MagicalCoder官方