HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器，基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于

LayoutIt拖放排序在线编辑的Bootstrap可视化布局系统，目标是打造成一个好用的BS端拖拽式报表设计器-拖拽式表单设计器。暂不提供在线浏览,代码还在完善中!本次代码对第一个版本进行了全部代码的重构，增加报表元素更加方便，按照一定的规范来实现，能轻松增加插件。

require.config({

baseUrl : "assets/js/lib/",

shim : {

backbone : {

deps : [ 'underscore', 'jquery' ],

exports : 'Backbone'

},

underscore : {

exports : '_'

},

bootstrap : {

deps : [ 'jquery' ]

},

jqueryui: {

deps: ['jquery']

}

},

paths : {

app : "..",

collections : "../collections",

data : "../data",

models : "../models",

helper : "../helper",

templates : "../templates",

views : "../views"

}

});

require([ 'app/app' ], function(app) {

app.initialize();

});

每个拖动元素绑定一个模型，可以轻松对该模型进行数据管理。

左边拖动结点元素取于JSON格式的数据，可以定义成本地JSON也可以远程加载JSON，每个节点对应模版数据

本程序实现的目录结构

面向前端开发者

使用我们的界面生成器能生成更高质量的HTML5代码。

依赖于组件化的 Bootstrap, 这款足够强大的前端框架。

使你所有的设计具备响应式CSS和自适应布局的特性

功能特点

通过拖放动作将Bootstrap风格的组件加入到你的个人设计里。

轻松地整合进任何编程语言，你只需下载生成的HTML源码就可进一步开展代码设计。

在已生成的专业标准的HTML代码里，可以通过嵌入变量或循环等脚本来满足你任何需求!

不是一个网站生成器这么简单，它是每个前端项目敏捷开发的新起点。

利用 Bootstrap 的元素组件，你不需要深入掌握 javascript，html5 或 css3

就能帮助你更轻松地编写前端代码。你只需利用这款工具生成原型，便可尽情享受编程的乐趣!

目标实现

简单高效的表单设计器

表单设计器是一款表单设计和数据收集管理工具，通过简单拖拽操作就可快速地创建各种Web表单，如在线订单、市场调研、满意度调查、在线简历和各种报名表、反馈表、投诉建议表、申请表、登记表，并可与微信公众号、网站和博客集成。

广泛应用于调查反馈、OA办公、客户关系、电子商务、微信营销等多种场景。

它轻松生成数据库表结构，生成表字段，长度定义，验证规则等。

简易报表设计器

WEB报表设计器能够助您游刃有余地处理数据查询展示等方面的工作。

WEB报表设计器帮您玩转企业数据，提高营销效率、降低管理成本，并创造出数据应用的新价值。

WEB报表设计器提供多种方式与其他应用系统集成，为应用软件提供商提供数据应用方面的整体解决方案。

WEB报表设计器支持多数据源，能够根据一定的规则把不同来源的数据拼装成想要的报表样式和结果。

相关链接