sql怎么实现某一列拼接成一行显示_网页端实现sql的AppendLine拼接转换

先来看下网页端的最终的效果 实现的主要功能点

1. 设置背景图透明
2. 实现sql的数据转换

   

目录

一、应用场景 

二、代码示例：前端控件 

三、代码示例：前端样式 

四、代码示例：后端字符串转换 

五、最终效果图

一、应用场景

当我们在sql server中写好sql执行通过之后，需要将sql搬到软件编辑器，这时需要一行一行的复制粘贴sql，当sql只有几行的时候效率还是蛮快的，很多手速快的离谱的小伙伴对于十几行的sql几秒钟就搞定了。但是当sql有几十行时，复制粘贴就显得很不现实，即使手速再快，也难免会有操作失误的时候。复制的吐血的同时还生怕少复制。所以最终就写个sql转换的小工具~

本人使用visual studio2017编辑器开发

吐血：类似如下图的sql可能会有几十行，一行行复制真的效率贼低！~

二、代码示例：前端控件

注意

1. TextMode="MultiLine" ID="leftDiv"：MultiLine表示可以输入多行数据，这个控件用来输入sql的源数据
2. TextMode="MultiLine" ID="rightDiv"：这个控件用来显示转换后的sql数据
3. id="imageLeft"：这个id为imageLeft的div，很突兀的显示在这里，看上去没什么用，其实是用来存放背景图片，最后会设置透明，在稍后的样式中会说明怎么设置。
4. OnClick="appendLineClick"：点击事件(AppendLine的拼接方式)
5. OnClick="strClick"：点击事件(str +=的拼接方式)

   

三、代码示例：前端样式

css中用到的需要注意的属性 

a. width: 45vw; 相对于浏览器的可用宽度的百分比,可设置为45占比 

b. height: 100vh; 相对于浏览器的可用高度的百分比，可设置为100占比

c. 设置背景图路径 background: url('../image/3.jpg'); 

d. 设置背景图片不重复，不出现多张图片 background-repeat: no-repeat; 

e. 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域background-size: cover; 

f. 使背景图显示在最下面一层 z-index: -1; 

g. 将div控件变得透明，显示出在最下面一层的背景图 background-color: transparent; 

h. 将按钮调成圆角 border-radius: 100px;

cdefg同时使用，就能实现背景图的透明，具体实现的css代码如下

/*将div控件变得透明，能看到最下面那层的背景图*/#leftDiv {    background-color: transparent; /*背景透明 字没淡*/}/*背景层控件*/#imageLeft {    background: url('../image/3.jpg');    opacity: 0.5;    width: 100vw;    height: 100vh;    position: absolute;    z-index: -1;    background-repeat: no-repeat; /*图片不重复，不会出现多张图片*/    background-size: cover; /*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/}

四、代码示例-后端字符串转换

如下代码是直接将sql代码以AppendLine的方式转换成想要的代码 

例如：select * from good_info  with(nolock)最终转换的结果是 

StringBuilder strSql = new StringBuilder(); 

strSql.AppendLine("select * from good_info  with(nolock)");

protected void appendLineClick(object sender, EventArgs e){    rightDiv.Text = "StringBuilder "+ text.Text + " = new StringBuilder();\r\n";    foreach (var str in leftDiv.Text.Replace("\r\n", "^").Split('^'))    {        if (str != "")        {            rightDiv.Text += text.Text + ".AppendLine(\"" + str + "\");\r\n";        }    }}

如下代码是直接将sql代码以str +=的方式转换成想要的代码 

例如：select * from good_info  with(nolock)最终转换的结果是 

strSql+="select * from good_info  with(nolock) \r\n";

protected void strClick(object sender, EventArgs e){    rightDiv.Text = "";    foreach (var str in leftDiv.Text.Replace("\r\n", "^").Split('^'))    {        if (str != "")        {            rightDiv.Text += text.Text + "+=\"" + str + " \\r\\n\";\r\n";        }    }}

五、最终效果图