⼯欲善其事必先利其器---SQL在线可视化模型设计，（还可学习拖拽知识）
作为技术⼈员，在开发项⽬中，不可避免的要跟数据库打交道，⼀个完整的项⽬正常情况下是讨论完整体需求，有了⼤致的框框在脑海中后，是需要设计合理的数据库的，这时会有其他的专业的UML建模⼯具可以使⽤，但是这种⼤型的专业化的UML建模⼯具，仅仅拿来建⽴数据库模型显得⼤材⼩⽤了，并且也太重量级，所以⼀般都不会轻易使⽤。多数⼈会选择直接在数据库软件中直接⿏标操作建表、填充列，这样更是不⽅便，故⽽很多⼈提到了VS中的codefirst⽅式，直接在代码中建⽴数据库模型，这种⽅式⽣成数据库之后，如果回头维护、查看都不太友好，甚⾄过了⼏个⽉之后你⾃⼰回头看都有可能不知道是什么意思。这样我们就需要数据库说明。
常见的数据库说明都是word⽂档，类似如下：
这是很多公司或团队采⽤的，但是我觉得这样还是不爽，假定你是⼀个接⼿⼈，你拿着这样的表格，左边点开数据库，右边打开这个⽂档，瞄⼀眼数据库再瞄⼀眼这个表格，左右切换窗⼝，超级不爽啊。
另外⼀种更加直观的，正向思维的⽅式：
这样看起来是不是直观多了，清楚明⽩的知道这个表的构成，直接在数据库中打开，不⽤切换窗⼝，它是建表脚本，也是⼀份详细直观的数据库说明⽂档，后续对数据库进⾏修改、增加、删除结构都很直接、直观。
于是，我个⼈就弄了个⾃⼰⽤的⽅便的可视化的数据库设计的东西，当然最终是⽣成上述直观可读性⾼的脚本⽂件，今天把它写出来分享下。
我的环境是mvc3，其实这个东西根本⽤不着MVC，很简单，就⼀个页⾯⼤量的JS操作，提交到后台代码⽣成⽂件下载回本地。先看打开时：
默认加载⼀个空表，填写相应的名称之类的，字段、类型、默认值、备注信息等，+号增加⼀⾏，如果⼀⾏没有完成会提⽰：
点击新建表会增加⼀个表，整个筐筐内每个表模型可以任意拖动位置且⾼度会⾃适应。拖拽都是靠JS。整个界⾯代码如下：
1 @{
2 ViewBag.Title = "主页";
3 }
4<div class="box">
5
6
7
8
9<div class="editmenu">
10
11<input type="text" id="txtBaseName" value="@ViewBag.baseName"/>
12
13<input type="text" id="txtBaseDes" value="@ViewBag.baseDes"/>
14<input id="addTable" type="button" value="新建表"/>
15<input id="getData" type="button" title="下载完整的TXT格式的数据库脚本" value="下载数据"/>
16
17</div>
18<div id="main" class="main">
19<div class="tbbox">
20
21<div class="titletr" title="">
22<span class="spleft">
23<input value="XXX表" class="tbname" type="text"/>
24</span>
25<span class="title"></span>
26<span class="spright"></span>
27</div>
28
29<div class="titletr" title="">
30<span class="spleft">
31名:<input value="tb_1" class="tbname" type="text"/>
32</span>
33<span class="title"></span>
34<span class="spright">删除</span>
35</div>
36<table class="tablelist">
37<tbody>
38<tr>
39<td>
40字段名
41</td>
42<td>
43类型
44</td>
45<td>
46默认值
47</td>
48<td>
49备注
50</td>
51<td >
52</td>
53</tr>
54<tr>
55<td>
56<input type="text"/>
57</td>
58<td>
59<div class="sortdiv">
60<span class="selspan">
61<select class="selsort">
62<option value="int">int</option>
63<option value="varchar(50)">varchar(50)</option>
64<option value="nvarchar(200)">nvarchar(200)</option>
65<option value="datetime">datetime</option>
66<option value="float">float</option>
67<option value="text">text</option>
68<option value="ntext">ntext</option>
69</select>
70</span>
71<input value="int" class="sortinput"/>
72</div>
73</td>
74<td>
75<input class="txtdef" type="text"/>
76</td>
77<td>
78<input type="text"/>
79</td>
80<td id="tool" class="jiatr" >
81 +
82</td>
sql容易学吗
83</tr>
84</tbody>
85</table>
86</div>
87</div>
88</div>
89
90<input id="hdbase" type="hidden" value="@ViewBag.baseId"/>
91
92<input id="hdtr" type="hidden" value="@ViewBag.Tr"/>
93<input id="hddiv" type="hidden" value="@ViewBag.div"/>
94<input id="hdall" type="hidden" value="@ViewBag.AllData"/>
95
96<script type="text/javascript">
97 $(document).ready(function () {
98 load = function () {
99if ($("#hdall").val() != "") {
100 $("#main").html($("#hdall").val());
101 }
102///初始化给div加移动事件
103 $("#main").find("span.title").each(function () {
105 });
106///给+TD事件
107 $("#main").find("td.jiatr").each(function () {
108 $(this).click(TdClick);
109 $(this).attr("title", "新增⼀⾏");
110 });
111///添加DIV按钮
112 $("#addTable").click(AddTbale);
113 $("#getData").click(GetData);
114 $("#saveData").click(SaveData);
115///给select绑定事件
116 $("#main").find("div.tbbox").each(function () {
117 SortList(this);
118 $(this).find("span.spright").click(DelDiv);
119 });
120
121 CheckMainHeight();
122
123 }
124///返回txt⽂件
125function SaveTxt(arr) {
126var loogParam = arr;
127var nwin = window.open('/home/DataText?t=' + Math.random(), 'newwindow', 'height=5, width=5, top=400,left=500, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'); 128 document.body.insertAdjacentHTML("beforeEnd", "<form name='form1' action='/home/DataText' target='newpage' method='post'><input type='hidden' name='param'></form>");
129 document.form1.param.value = loogParam;
130 document.form1.submit();
131 $("form").remove();
132 nwin.close();
133 }
134
135///txt⽂件空格占位
136function NullSpace(defnum, str) {
137var s = "\040";
138var r = "";
139var l = str.length;
140var num = defnum - l;
141for (var i = 0; i < num; i++) {
142 r += s;
143 }
144return r;
145 }
146///"-"占位符
147function NullH(defnum, str) {
148var s = "-";
149var r = "";
150var l = str.length;
151var num = defnum - l;
152for (var i = 0; i < num; i++) {
153 r += s;
154 }
155return r;
156 }
157
158
159///下载脚本为txt⽂件
160function GetData() {
161var tbName = "";
162var tr = 0;
163var sav = true;
164var br = "\r\n";
165var strSql = "use " + $("#txtBaseName").val() + br;
166 $("#main").find("div.tbbox").each(function () {
167 tbName = $($(this).find(".tbname")[1]).val();
168var desName = $($(this).find(".tbname")[0]).val();
169var sqlExists = "if exists ( select * from sysobjects where name = '" + tbName + "' and xtype='U') " + br + ""
170 + "drop table " + tbName + "";
171 strSql += sqlExists + br;
172 strSql += "create table " + tbName + NullH(67, tbName) + desName + br + "(" + br;
173 $(this).find("tr").each(function (index, element) {
174if (index > 0) {
175var tdlist = $(this).find("td");
176var key = $(tdlist[0]).find("input").val();
177if ($.trim(key) != "") {
178if (key.length >= 17) {
179 alert(key + "超出了15个字符的限制");
180//alert(strSql);
181 sav = false;
182return;
183 }
184 key += NullSpace(17, key);
185var col = $(tdlist[1]).find("input").val();
186 col += NullSpace(17, col);
187if (index == 1)
188 col = "int" + NullSpace(17, "int");
189var def = $(tdlist[2]).find("input").val() == "" ? "default ''" : "default " + $(tdlist[2]).find("input").val();
190 def += NullSpace(32, def);
191if (index == 1)
192 def = "primary key identity(1,1)" + NullSpace(32, "primary key identity(1,1)");
193var des = "--" + $(tdlist[3]).find("input").val();
194if (index == 1)
195 des = "--主键-" + $(tdlist[3]).find("input").val();
196 strSql += "\040\040" + key + col + def + "NOT NULL , " + des + br;
197
198 tr++;
199 }
200 }
201 });
202 strSql += ");" + br + br + br;
203 });
204if (sav && tr > 0) {
205 $("#saveData").click();
206 SaveTxt(strSql);
207 }
208 }
209
210
211///给数据类型列加事件
212function SortList(obj) {
213 $(obj).find("div.sortdiv").each(function () {
214
215
216 $(this).find("select:first").change(ChangeVal).change(DefaultTxt);
217 $(this).find("input:first").focus(ShowSel);
218
219 $(this.parentNode).mouseenter(ShowSel).mouseleave(HideSel);
220
221 $(this.parentNode.parentNode).find(".txtdef").blur(DefaultTxt);
222
223 });
224
225 }
226
227///删除div
228function DelDiv() {
229 $(this.parentNode.parentNode).remove();
230 }
231
232
233
234///改变数据类型
235function ChangeVal(obj) {
236 $(this.parentNode.parentNode).find(".sortinput").val($(this.parentNode).find(".selsort").val());
237
238
239 }
240///默认值
241function DefaultTxt(obj) {
242var txt = $(this.parentNode.parentNode).find(".txtdef:first")[0];
243if (pe == "change") {
244 txt = $(this.parentNode.parentNode.parentNode.parentNode).find(".txtdef:first")[0];
245 }
246var val = $(txt).val().replace("'", "").replace("'", "");
247 $(txt).val(val);
248if ($.trim($(txt).val()) != "" && $.trim($(txt).val().toLowerCase()) != "getdate()" && $.trim($(txt.parentNode.parentNode).find(".sortinput").val()) != "int" && $.trim($(txt.parentNode.parentNode).find(".sortinput").val()) != 249
250 $(txt).val("'" + val + "'");
251 }
252 }
253///数据类型下拉显⽰
254function ShowSel(obj) {
255 $(this.parentNode).find(".selspan").show();
256 $(this.parentNode).find(".sortinput").width("90px");
257 $(this.parentNode).find(".sortinput").css("position", "absolute");
258 }
259///数据类型下拉隐藏
260function HideSel(obj) {
261var td = this;
262var o = latedTarget || Element;
263if (!o) {
264return;
265 }
266 $(td).find(".selspan").hide();
267 $(td).find(".sortinput").width("118px");
268 $(td).find(".sortinput").css("position", "");
269 }
270
271
272
273///添加DIV
274function AddTbale() {
275var child = ateElement("div");
276 child.className = "tbbox";
277var name = Math.random().toString().substr(2, 3);
278var div = $("#hddiv").val().replace("tb_Name", "tb_" + name);
279 $(child).html(div);
280 $(child).find("span.title").each(function () {
282 });
283
284
285
286
287 $(child).find("span.spright").click(DelDiv);
288 $(child).find("td.jiatr").each(function () {
289 $(this).click(TdClick);
290 $(this).attr("title", "新增⼀⾏");
291 });
292 SortList(child);
293 $("#main").append(child);
294 CheckMainHeight();
295 }
296
297///TD增加⼀⾏点击
298function TdClick(obj) {
299var tooltipem = $(this.parentNode).find("td:first").find("input:first");
300if ($.trim(tooltipem.val()) == "") {
301 $(tooltipem).tooltip({
302 "title": "这⾥还没填写呢~！",
303 "trigger": "manual",
304 "placement": "right",
305 "delay": 800
306 });
307 $(tooltipem).tooltip("show");
308
309 $(tooltipem).focus();
310 setTimeout(function () { $(tooltipem).tooltip("hide"); }, 1800)
311
312return false;
313 }
314 $(tooltipem).tooltip("destroy");
315var tr = $("#hdtr").val();
316var child = ateElement("tr");
317 $(child).html(tr);
318 $(this.parentNode.parentNode).append(child);
319 SortList(child);
320 $(child).find("td.jiatr").click(TdClick);
321
322
323 $(this).removeClass();
324 $(this).unbind();
325 $(this).html("");
326 $(this).attr("title", "");
327
328 CheckMainHeight();
329 $($($(this.parentNode.parentNode).find("tr:first").next("tr"))).find("td:last").addClass("prmkey").attr("title", "第⼀⾏默认为主键&⾃增长"); 330 }
331///校验div#main⾼度
332function CheckMainHeight() {
333 $("#main").find("div").each(function () {
334if (this.offsetTop + $(this).height() > $("#main").height())
335 $("#main").height(this.offsetTop + $(this).height() + 10);
336 });
337 }
338
339///移动
340function MoveBegin(obj) {
341var e = obj || window.event,
342 x1 = e.clientX;
343 y1 = e.clientY;
344var setOn = this.parentNode.parentNode;
345var defLeft = setOn.offsetLeft;
346var defTop = setOn.offsetTop;
347
348 usemove = function (event) {
349var e = event || window.event;
350//
351 x2 = e.clientX;
352 y2 = e.clientY;
353//
354 x = x2 - x1;
355 y = y2 - y1;
356var setLeft = defLeft + x;
357var setTop = defTop + y;
358 setOn.style.position = "absolute";
359//setOn.style.filter = 'alpha(opacity=80)';
360//setOn.style.opacity = "0.8";
361if (setLeft <= 0) {
362 setLeft = 0;
363 }
364if (setTop <= 0) {
365 setTop = 0;
366 }
367if (setLeft >= $("#main").width() - $(setOn).width() - 9) {
368 setLeft = $("#main").width() - $(setOn).width() - 14;
369 }
370if (setTop > $("#main").height() - $(setOn).height() + 10) {
371
372 $("#main").height(setTop + $(setOn).height() + 100);
373
374 setTop = $("#main").height() - $(setOn).height();
375 }
376 setOn.style.left = setLeft + 'px';
377 p = setTop + 'px';
378//$("#showText").text("Top:" + p + "; Left:" + setOn.style.left + "; OFl:" + "");
379 }
380 useup = function () {
382 }
383 }
384
385 });
386</script>
⾥⾯有JS拖拽代码，都很简单，上⾯这些是我2年前做的东西，很多命名之类的都不规范，⼤家关注⽅法就好。
后台代码：
1public ActionResult Index()
2 {
3 StringBuilder sb = new StringBuilder();
4
5 sb.Append("<td>");
6 sb.Append("<input type=\"text\" />");
7 sb.Append("</td>");
8 sb.Append("<td>");
9 sb.Append("<div class=\"sortdiv\">");
10 sb.Append("<span class=\"selspan\">");
11 sb.Append("<select class=\"selsort\">");
12 sb.Append("<option value=\"int\">int</option>");
13 sb.Append("<option value=\"varchar(50)\">varchar(50)</option>");
14 sb.Append(" <option value=\"nvarchar(200)\">nvarchar(200)</option>");
15 sb.Append("<option value=\"datetime\">datetime</option>");
16 sb.Append("<option value=\"float\">float</option>");
17 sb.Append("<option value=\"text\">text</option>");
18 sb.Append("<option value=\"ntext\">ntext</option>");
19 sb.Append("</select>");
20 sb.Append("</span>");
21 sb.Append("<input value=\"int\" class=\"sortinput\" />");
22 sb.Append("</div>");
23 sb.Append("</td>");
24 sb.Append("<td>");
25 sb.Append("<input class=\"txtdef\" type=\"text\" />");
26 sb.Append("</td>");
27 sb.Append("<td>");
28 sb.Append("<input type=\"text\" />");
29 sb.Append("</td>");
30 sb.Append("<td id=\"tool\" class=\"jiatr\" title=\"新增⼀⾏\" style=\"border: 0\">");
31 sb.Append("+");
32 sb.Append("</td>");
33 ViewBag.Tr = sb.ToString();
34
35 StringBuilder sbdiv = new StringBuilder();
36 sbdiv.Append("<div class='titletr' title=''>");
37 sbdiv.Append("<span class='spleft'>");
38 sbdiv.Append("<input value='XXX表' class='tbname' type='text' />");
39 sbdiv.Append("</span>");
40 sbdiv.Append("<span class='title'></span>");
41 sbdiv.Append("<span class='spright'></span>");
42 sbdiv.Append("</div>");
43 sbdiv.Append("<div class='titletr' title=''>");
44 sbdiv.Append("<span class='spleft'>");
45 sbdiv.Append("名:<input value='tb_Name' class='tbname' type='text' />");
46 sbdiv.Append("</span>");
47 sbdiv.Append("<span class='title'></span>");
48 sbdiv.Append("<span class='spright'>删除</span>");
49 sbdiv.Append("</div>");
50 sbdiv.Append("<table class='tablelist'>");
51 sbdiv.Append("<tbody>");
52 sbdiv.Append("<tr>");
53 sbdiv.Append("<td>");
54 sbdiv.Append("字段名");
55 sbdiv.Append("</td>");
56 sbdiv.Append("<td>");
57 sbdiv.Append("类型");
58 sbdiv.Append("</td>");
59 sbdiv.Append("<td>");
60 sbdiv.Append("默认值");
61 sbdiv.Append("</td>");
62 sbdiv.Append("<td>");
63 sbdiv.Append(" 备注");
64 sbdiv.Append("</td>");
65 sbdiv.Append("<td style='border: 0'>");
66 sbdiv.Append("</td>");
67 sbdiv.Append("</tr>");
68 sbdiv.Append("<tr>");
69 sbdiv.Append("<td>");
70 sbdiv.Append("<input type='text' />");
71 sbdiv.Append("</td>");
72 sbdiv.Append("<td>");
73 sbdiv.Append("<div class='sortdiv'>");
74 sbdiv.Append("<span class='selspan'>");
75 sbdiv.Append("<select class='selsort'>");
76 sbdiv.Append("<option value='int'>int</option>");
77 sbdiv.Append("<option value='varchar(50)'>varchar(50)</option>");
78 sbdiv.Append("<option value='nvarchar(200)'>nvarchar(200)</option>");
79 sbdiv.Append("<option value='datetime'>datetime</option>");
80 sbdiv.Append("<option value='float'>float</option>");
81 sbdiv.Append("<option value='text'>text</option>");
82 sbdiv.Append("<option value='ntext'>ntext</option>");
83 sbdiv.Append("</select>");
84 sbdiv.Append("</span>");
85 sbdiv.Append("<input value='int' class='sortinput' />");
86 sbdiv.Append("</div>");
87 sbdiv.Append("</td>");
88 sbdiv.Append("<td>");
89 sbdiv.Append("<input class='txtdef' type='text' />");
90 sbdiv.Append("</td>");
91 sbdiv.Append("<td>");
92 sbdiv.Append("<input type='text' />");
93 sbdiv.Append("</td>");
94 sbdiv.Append("<td id='tool' class='jiatr' style='border: 0'>");
95 sbdiv.Append(" +");
96 sbdiv.Append("</td>");
97 sbdiv.Append("</tr>");
98 sbdiv.Append("</tbody>");
99 sbdiv.Append("</table>");
100 ViewBag.div = sbdiv.ToString();
101 ViewBag.AllData = "";
102 ViewBag.baseId = "";
103 ViewBag.baseName = "basename";
104 ViewBag.baseDes = "备注说明";
105
106return View();
107
108 }
109//响应下载脚本请求，返回txt⽂件
110public void DataText()
111 {
112if (Request["param"] == null)
113return;
114string t = Request["param"];
115if (t == "")
116return;
117string tbName = "数据库-" + System.DateTime.Now.ToString("yyMMdd-HHmmss")+".sql"; 118 Response.AppendHeader("Content-Disposition", "attachment;filename=" + tbName);
119 Response.ContentEncoding = System.Text.Encoding.Default;
120 Response.ContentType = "text/plain";
121 Response.Write(t);
122 }
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论