推荐一款可视化前端布局器H5-表单设计器（MagicalCoder）
今天给大家介绍一款高定制化的前端纯js的布局器特性：
如果您需要嵌入系统或者做定制个人的布局器 实在是首选 也不用再造轮子了 专心做自己的业务吧
先上一下体验地址
http://lowcode.
第一步：先预览下布局器吧 首次大家要加载资源 所以会略慢 耐心等待加载完 后续再打开就很快了
第二步：通过下面提供的api和回调函数 即可与布局器自由交互
/**
* 获取布局器HTML源码
* @return string
*/
MagicalApi.prototype.getHtml=function () {}
/**
* 获取布局器脚本
* @return string
*/
MagicalApi.prototype.getJavascript=function () {}
/**
* 获取布局器根节点json
* @return JSON
*/
MagicalApi.prototype.getRootNode=function () {}
/**
* 能获取表单条目下的控件数据
* @return JSON[]
*/
MagicalApi.prototype.getFormItemNodes = function (){}
/**
* 插入源码到布局器
* @param html 取值=""可以实现清空布局器 string
*/
MagicalApi.prototype.insertHtml=function (html) {}
/**
* 插入javascript脚本 请尽量在insertHtml方法之后执行 因为大部分脚本操作的是html 必须先有html
* @param javascript 不要="" 可以使用null来重置脚本 string
*/
MagicalApi.prototype.insertJavascript=function (javascript) {}
/**
* 插入html javascript 常用于初始化布局器
* @param html 取值=""可以实现清空布局器 string
* @param javascript 取值=null可以实现重置布局器的脚本 千万不要为"" 否则默认脚本不支持 工作区不渲染 string
*/
MagicalApi.prototype.insert=function (html,javascript) {}
/**
* 根据root 还原布局器
* @param rootNode 根据之前保存的json方式恢复布局器 javascript请配合insertJavascript实现 JSON
*/
/**/
MagicalApi.prototype.insertNode=function (rootNode) {}
/**
* 聚焦某个结构
* @param magicalCoderIds 结构的唯一magicalCoder.id string[]
*/
MagicalApi.prototype.focus = function (magicalCoderIds) {}
/**
* 获取constatn.js实例
* 这样就可以灵活的根据事件情况来调整配置
* @return JSON
*/
MagicalApi.prototype.getConstant = function () {}
/**
* 获取iframe-ui.js实例
* 这样就可以灵活的根据事件情况来调整配置
* @return JSON
*/
MagicalApi.prototype.getIframeUi = function () {}
/**
* 把html转换成magicalCoderNode数据
* @param html string
*/
MagicalApi.prototype.htmlToRootNode = function (html) {}
/**
* 把magicalCoder node数据转换成html
* @param nodes 可以通过rootNode.magicalCoder.children传入 JSON[]
* @param htmlWithMagicalCoderAttr true|false 是否包含magicalcode属性 默认false boolean
*/
MagicalApi.prototype.nodesToHtml = function (nodes,htmlWithMagicalCoderAttr) {}
/**
* 重新设置孩子节点 比如您想在某个节点插入html 那么可以先把html调用htmlToRootNode得到node,
* 然后childrenNodes = node.magicalCoder.children; 然后就可以调用此方法了 一般用在回调处理上
* @param parentId 父节点magicalCoder.Id string
* @param childrenNodes 子节点数组 JSON[]
*/
MagicalApi.prototype.resetChildren = function(parentId,childrenNodes){}
/**
* 主动触发布局器重绘工作区
*/
MagicalApi.prototype.refreshWorkspace = function () {}
/**
* 仅仅把中间html重绘 并不触发节点变更
*/
MagicalApi.prototype.onlyCenterRefreshHtml = function(){}
/**
* 根据magicalCoderParam查询结构
* @param fromNode 从哪个节点开始往下搜索 如果为null 则默认从根节点 JSON
* @param magicalCoderParam 查询参数例如 查看node.magicalCoder属性即可得知参数 {id:1,....} object
* return []
*/
MagicalApi.prototype.searchNodes = function (fromNode,magicalCoderParam) {}
/**
* 重新构造左侧组件列表:如果您动态的向左侧增删组件 可以使用此方法
* 您只需要修改完constant中的配置后 直接调用此方法 无法额外调用api.refresh();
*/
MagicalApi.prototype.rebuildLeftComponents = function () {}
/**
* 刷新拖拽事件
*/
MagicalApi.prototype.refreshDragEvent = function () {}
/**
* 刷新右侧属性面板 如果您获取constant并且 动态修复属性配置，则需要调用此方法刷新事件
* @param magicalCoderId string
*/
MagicalApi.prototype.refreshRightAttrPane = function (magicalCoderId) {}
/**
* 在节点中追加html
* @param node JSON 父节点
* @param html string
* @param preNode JSON 墙节点
* @return true|false
*/
MagicalApi.prototype.appendHtml = function (parentNode,html,preNode) {}
/**
* 删除多个节点
* @param nodes JSON[] 主要是有magicalCoder.id
*/
MagicalApi.prototype.deleteNodes = function (nodes) {}
/**
* 查找前置节点
* @param magicalCoderId string
* @return JSON
*/
MagicalApi.prototype.findPreNode = function (magicalCoderId) {}
/**
* 查找后置节点
* @param magicalCoderId string
* @return JSON
*/
MagicalApi.prototype.findNextNode = function (magicalCoderId) {}
/**
* 查找父亲节点
* @param magicalCoderId string
* @return JSON
*/
MagicalApi.prototype.findParentNode = function (magicalCoderId) {}
/**
* 移动节点
* @param dragMcId 要移动的id string
* @param targetMcId 目标id string
* @param moveType 可选值 inner prev next 类型 string
*/
MagicalApi.prototype.moveExistNode = function (dragMcId, targetMcId, moveType) {}
/**
* 获取聚焦结构
* @return JSON[]
*/
MagicalApi.prototype.findFocusNodes = function () {}
/**
* @version 2.2.5
* @param param 自定义一个参数 配合callback.js的reset_before(param)
* 重置布局器
*/
MagicalApi.prototype.reset = function (param) {}
/**
* 比如 "el-input":[{type:this.type.SELEC,attrName:'type',options:[{"text":"输入框","textarea":"文本框"}],"myId":"el-input-type",.....},]
* @version 2.2.5
* @param contentKey rightPanel下的content下的key 比如 'el-input'
* @param queryObj 自定义一个查询 {"属性名":"属性值"} 这里的属性名可以由您自己定义一个 {"attrName":"type"}
* 根据某个查询条件查询constant.js中配置的this.rightPanel下的一组满足条件的数据
* 使用场景：如果您要根据ajax数据动态更改下拉框值 此方法很有用 记得改完调用api的refreshRightAttrPane()方法
* @return []
例如：以下代码更改form表单的label-position值 假设这段代码放after_start
var list = api.getRightPanelItemListFromConstant("el-form",{attrName:"label-position"});
console.log(list);
for(var i=0;i<list.length;i++){
list[i].options=[{"1":"新值"}]
}
*/
MagicalApi.prototype.getRightPanelItemListFromConstant = function(contentKey,queryObj){}
/**
* 保存按钮
* @param html 源码部分 string
* @param rootNode 当前布局器JSON JSON
* @param javascript 脚本 string
*/
MagicalCallback.prototype.save_html = function (html,rootNode,javascript) {
}
/**
* 右侧属性配置属性变更前的回调事件 变更非文本
* @param obj.focusNode 当前聚焦的节点
* @param obj.changeAttrName 修改的属性名
* @param obj.changeAttrValue 修改后的属性值
* @param obj.originAttrValue 修改前的属性值
* @param obj.itemObj 配置属性
*/
MagicalCallback.prototype.before_change_attr_callback = function (obj) {return true;}
/**
* 右侧属性配置属性变更后的回调事件 变更非文本
* @param obj.focusNode 当前聚焦的节点
* @param obj.changeAttrName 修改的属性名
* @param obj.changeAttrValue 修改后的属性值
* @param obj.originAttrValue 修改前的属性值
* @param obj.itemObj 配置属性
*/
MagicalCallback.prototype.after_change_attr_callback = function (obj) {}
/**
* 右侧属性配置属性变更前的回调事件 注意变更文本（就是结构内的文本 change:this.change.TEXT）
* @param obj.focusNode 当前聚焦的节点
* @param obj.changeAttrName null
* @param obj.changeAttrValue 修改后的文本值
* @param obj.originAttrValue 修改前的文本值
* @param obj.itemObj 配置属性
*/
MagicalCallback.prototype.before_change_text_callback = function (obj) {return true;}
/**
* 右侧属性配置属性变更后的回调事件 注意变更文本（就是结构内的文本 change:this.change.TEXT）
* @param obj.focusNode 当前聚焦的节点
* @param obj.changeAttrName null
* @param obj.changeAttrValue 修改后的文本值
* @param obj.originAttrValue 修改前的文本值
* @param obj.itemObj 配置属性
*/
MagicalCallback.prototype.after_change_text_callback = function (obj) {}
/**
* @version 2.2.5
* 布局器顶端重置按钮点击之前
* @param param 如果您是手动调用api.reset(param) 可以获取 否则就是系统点击 null
* @return true则继续执行 false终止执行
*/
MagicalCallback.prototype.reset_before = function (param) {return true;}
/**
* @version 2.2.5
* 布局器顶端重置按钮点击后
* @param param 如果您是手动调用api.reset(param) 可以获取 否则就是系统点击 null
*/
MagicalCallback.prototype.reset_after = function (param) {}
/**
* 构建右侧属性面板 可配合api.refreshRightAttrPane()重置某些下拉框值等
* @param focusNode JSON
* @return true:继续构建 false:终止构建
*/
MagicalCallback.prototype.pre_build_attrs = function (focusNode) {
return true;
}
/**
* 当工作区变更后：比如拖拽 删除 等操作触发的
* 请不要跟api.refreshWorkspace()配合使用 否则就会无限递归死循环
* 可配合onlyCenterRefreshHtml把您修改的节点属性绘制出来
*/
MagicalCallback.prototype.after_workspace_change = function () {}
/**
* 当拖拽左侧组件准备松手到中间区域前 如果您此时给 dragItem设置属性则也会生效
* @param dragItem 拖拽的结构 DOM
* @param targetElem 拖放的目标结构 DOM
* @return true|false true:继续构建 false:则拖拽放入失败
*/
MagicalCallback.prototype.before_drop_left_to_center = function (dragItem,targetElem) {
return true;
}
/**
* 当拖拽左侧组件松手到中间区域放手后
* @param focusItem 当前聚焦的结构 DOM
* @param targetElem 拖放的目标结构 DOM
*/
MagicalCallback.prototype.after_drop_left_to_center = function (focusItem,targetElem) {
}
/**
* 删除当前聚焦的组件
* @param deleteNodes 已经被删除的组件 JSON[]
*/
MagicalCallback.prototype.after_delete_nodes = function (deleteNodes) {
}
/**
* @version 2.2.5
* 当点击左侧组件准备加入到中间面板前触发
* @param leftLiElem 左侧点击的结构 DOM
* @param targetElems 工作区的目标结构 DOM[]
* @param targetFocusNodes 工作区的目标结构对应的数组 JSON[]
* @return {boolean} true|false true:继续构建 false:则终止
*/
MagicalCallback.prototype.before_click_left_component_to_center = function (leftLiElem,targetElems,targetFocusNodes) {
return true;
}
/**
* @version 2.2.5
* 当点击左侧组件加入到中间面板后触发
* @param leftLiElem 左侧点击的结构 DOM
* @param targetElems 工作区的目标结构 DOM[]
* @param targetFocusNodes 工作区的目标结构对应的数组 JSON[]
*/
MagicalCallback.prototype.after_click_left_component_to_center = function (leftLiElem,targetElems,targetFocusNodes) {
}
/**
* @version 2.2.6
* 右键菜单定制
* actionName: 动作事件名称 title:中文标题 handler 处理函数
* @return [{actionName:"saveTo",title:"另存为",handler:function(focusNodes){//ajax保存吧}}];
*/
MagicalCallback.prototype.right_menu_list = function(focusNodes){
//return [{actionName:"test",title:"测试",handler:function(focusNodes){ console.log(focusNodes) }}]
return [];
}
第三步：看看布局器的开发文档 提供各种场景
http://www.
————————————————
版权声明：本文为CSDN博主「程序类猿」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.
