工欲善其事必先利其器---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格式的数据库脚本" style="float:right;"   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 style="border: 0">
 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" style="border: 0">
 81                                +
 82                             </td>
 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             window.onload = function () {
 99                 if ($("#hdall").val() != "") {
100                     $("#main").html($("#hdall").val());
101                 }
102                 ///初始化给div加移动事件
103                 $("#main").find("span.title").each(function () {
104                     this.onmousedown = MoveBegin;
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文件
125             function SaveTxt(arr) {
126                 var loogParam = arr;
127                 var 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文件空格占位
136             function NullSpace(defnum, str) {
137                 var s = "\040";
138                 var r = "";
139                 var l = str.length;
140                 var num = defnum - l;
141                 for (var i = 0; i < num; i++) {
142                     r += s;
143                 }
144                 return r;
145             }
146             ///"-"占位符
147             function NullH(defnum, str) {
148                 var s = "-";
149                 var r = "";
150                 var l = str.length;
151                 var num = defnum - l;
152                 for (var i = 0; i < num; i++) {
153                     r += s;
154                 }
155                 return r;
156             }
157 
158             
159             ///下载脚本为txt文件
160             function GetData() {
161                 var tbName = "";
162                 var tr = 0;
163                 var sav = true;
164                 var br = "\r\n";
165                 var strSql = "use  " + $("#txtBaseName").val() + br;
166                 $("#main").find("div.tbbox").each(function () {
167                     tbName = $($(this).find(".tbname")[1]).val();
168                     var desName = $($(this).find(".tbname")[0]).val();
169                     var 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) {
174                         if (index > 0) {
175                             var tdlist = $(this).find("td");
176                             var key = $(tdlist[0]).find("input").val();
177                             if ($.trim(key) != "") {
178                                 if (key.length >= 17) {
179                                     alert(key + "超出了15个字符的限制");
180                                     //alert(strSql);
181                                     sav = false;
182                                     return;
183                                 }
184                                 key += NullSpace(17, key);
185                                 var col = $(tdlist[1]).find("input").val();
186                                 col += NullSpace(17, col);
187                                 if (index == 1)
188                                     col = "int" + NullSpace(17, "int");
189                                 var def = $(tdlist[2]).find("input").val() == "" ? "default ''" : "default  " + $(tdlist[2]).find("input").val();
190                                 def += NullSpace(32, def);
191                                 if (index == 1)
192                                     def = "primary key identity(1,1)" + NullSpace(32, "primary key identity(1,1)");
193                                 var des = "--" + $(tdlist[3]).find("input").val();
194                                 if (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                 });
204                 if (sav && tr > 0) {
205                     $("#saveData").click();
206                     SaveTxt(strSql);
207                 }
208             }
209 
210 
211             ///给数据类型列加事件
212             function 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
228             function DelDiv() {
229                 $(this.parentNode.parentNode).remove();
230             }
231 
232 
233 
234             ///改变数据类型
235             function ChangeVal(obj) {
236                 $(this.parentNode.parentNode).find(".sortinput").val($(this.parentNode).find(".selsort").val());
237 
238 
239             }
240             ///默认值
241             function DefaultTxt(obj) {
242                 var txt = $(this.parentNode.parentNode).find(".txtdef:first")[0];
243                 if (obj.type == "change") {
244                     txt = $(this.parentNode.parentNode.parentNode.parentNode).find(".txtdef:first")[0];
245                 }
246                 var val = $(txt).val().replace("'", "").replace("'", "");
247                 $(txt).val(val);
248                 if ($.trim($(txt).val()) != "" && $.trim($(txt).val().toLowerCase()) != "getdate()" && $.trim($(txt.parentNode.parentNode).find(".sortinput").val()) != "int" && $.trim($(txt.parentNode.parentNode).find(".sortinput").val()) != "float") {
249 
250                     $(txt).val("'" + val + "'");
251                 }
252             }
253             ///数据类型下拉显示
254             function 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             ///数据类型下拉隐藏
260             function HideSel(obj) {
261                 var td = this;
262                 var o = obj.relatedTarget || obj.toElement;
263                 if (!o) {
264                     return;
265                 }
266                 $(td).find(".selspan").hide();
267                 $(td).find(".sortinput").width("118px");
268                 $(td).find(".sortinput").css("position", "");
269             }
270 
271 
272 
273             ///添加DIV
274             function AddTbale() {
275                 var child = document.createElement("div");
276                 child.className = "tbbox";
277                 var name = Math.random().toString().substr(2, 3);
278                 var div = $("#hddiv").val().replace("tb_Name", "tb_" + name);
279                 $(child).html(div);
280                 $(child).find("span.title").each(function () {
281                     this.onmousedown = MoveBegin;
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增加一行点击
298             function TdClick(obj) {
299                 var tooltipem = $(this.parentNode).find("td:first").find("input:first");
300                 if ($.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 
312                     return false;
313                 }
314                 $(tooltipem).tooltip("destroy");
315                 var tr = $("#hdtr").val();
316                 var child = document.createElement("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高度
332             function CheckMainHeight() {
333                 $("#main").find("div").each(function () {
334                     if (this.offsetTop + $(this).height() > $("#main").height())
335                         $("#main").height(this.offsetTop + $(this).height() + 10);
336                 });
337             }
338 
339             ///移动
340             function MoveBegin(obj) {
341                 var e = obj || window.event,
342                 x1 = e.clientX;
343                 y1 = e.clientY;
344                 var setOn = this.parentNode.parentNode;
345                 var defLeft = setOn.offsetLeft;
346                 var defTop = setOn.offsetTop;
347 
348                 document.onmousemove = function (event) {
349                     var e = event || window.event;
350                     //
351                     x2 = e.clientX;
352                     y2 = e.clientY;
353                     //
354                     x = x2 - x1;
355                     y = y2 - y1;
356                     var setLeft = defLeft + x;
357                     var setTop = defTop + y;
358                     setOn.style.position = "absolute";
359                     //setOn.style.filter = 'alpha(opacity=80)';
360                     //setOn.style.opacity = "0.8";
361                     if (setLeft <= 0) {
362                         setLeft = 0;
363                     }
364                     if (setTop <= 0) {
365                         setTop = 0;
366                     }
367                     if (setLeft >= $("#main").width() - $(setOn).width() - 9) {
368                         setLeft = $("#main").width() - $(setOn).width() - 14;
369                     }
370                     if (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                     setOn.style.top = setTop + 'px';
378                     //$("#showText").text("Top:" + setOn.style.top + "; Left:" + setOn.style.left + "; OFl:" + "");
379                 }
380                 document.onmouseup = function () {
381                     this.onmousemove = null;
382                 }
383             }
384 
385         });   
386     </script>

里面有JS拖拽代码，都很简单，上面这些是我2年前做的东西，很多命名之类的都不规范，大家关注方法就好。

后台代码：

  1    public 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             
106             return View();
107 
108         }
109         //响应下载脚本请求，返回txt文件
110         public void DataText()
111         {
112             if (Request["param"] == null)
113                 return;
114             string t = Request["param"];
115             if (t == "")
116                 return;
117             string 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         }

在线暂时测试地址：http://websql.puworld.com

posted @ 2014-04-01 17:32 沫尘阅读(4754) 评论(5) 编辑收藏举报

刷新页面返回顶部

沫尘

专注.NET平台的PC端web开发、服务器相关、数据库开发、集成服务，移动端微信公众平台、APP服务端等。[.NET、MVC、EntityFramework、Jquery、SQL、缓存]

工欲善其事必先利其器---SQL在线可视化模型设计，（还可学习拖拽知识）

公告