推荐一款可视化前端布局器H5-表单设计器(MagicalCoder)
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

今天给大家介绍一款高定制化的前端纯js的布局器

特性:

自由定制组件和属性 大量api,callback与布局器交互 同时支持可视化拖拽和编码并存设计 表格:合并 拆分 等功能 自由定位:任意位置都可以放置组件 响应式栅格布局自适应各设备端,一端设计多端运行 可视化js编写器 支持:echarts各类统计组件 同时可以联动后端数据 实时展示效果 代码可控:自定义各种事件 并且控制事件内容 版本更新迅速,bug修复迅雷不及掩耳 支持各类Vue ,Jquery的UI框架嵌入布局器 如:Element Antdesign Vant Vuetify Layui Mini 导航树 完善的官方文档 右键操作面板 其他

    如果您需要嵌入系统或者做定制个人的布局器 实在是首选  也不用再造轮子了 专心做自己的业务吧

先上一下体验地址

http://lowcode.magicalcoder.com/magicaldrag/start.html

第一步:先预览下布局器吧 首次大家要加载资源 所以会略慢 耐心等待加载完 后续再打开就很快了

enter image description here

Heading

Blockquote

第二步:通过下面提供的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[] strong text主要是有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.magicalcoder.com/doc/bjq/html/ enter image description here ———————————————— 版权声明:本文为CSDN博主「程序类猿」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/adyuebanwan/java/article/details/105785793

评论
发表评论
暂无评论
PUBLISHED IN
推荐一款可视化前端布局器H5-表单设计器(MagicalCoder)

推荐一款可视化前端布局器H5-表单设计器(MagicalCoder)

友情链接 大搜车前端团队博客
我的收藏