我的草图——界面功能介绍 - 框兴秀泽

本邮件内容由第三方提供，如果您不想继续收到该邮件，可 点此退订 。

我的草图――界面功能介绍 - 框兴秀泽  阅读原文»

主界面

登录软件后进入主界面，主界面的效果图如下

主界面主要包括有：菜单栏、页面区域、元件区域、工作区域


菜单栏

菜单栏如下图所示，左边有菜单项：文件、项目、帮助，右边有操作按钮：打开、下载、预览


文件菜单项
文件菜单项展开如下图所示

文件菜单的子菜单项功能如下：
新建：新建项目
打开：打开本地项目文件
下载到本地：当前项目保存到本地文件
导出\导出图片：当前项目导出为图片文件包

文件菜单项
项目菜单项展开如下图所示

项目菜单的子菜单项
预览：预览当前项目
属性：打开当前文件属性

帮助菜单项
帮助菜单项展开如下图所示

帮助菜单的子菜单项

示例教程：打开示例教程标签页
快捷键说明…：显示快捷键说明
关于MyMockup：显示关于窗体

大湿教我写程序(3)之自动补全（�丝没有春天）篇 - 微软高级php工程师  阅读原文»

一、女神也爱玩撸码

“在么，亲。”

“在！在！有,有事么”(我真睡醒了么！垂涎了好久的女神呀！高中同学,高一向她表白,"我想找个170以上的"，高二等我长到170了“我想找个175的”，高三下血本买了双内增高“我喜欢178以上的，有安全感”）

三分钟后....

"没事也可找我的."擦，我TM怎么这么不争气，不是发过誓等她主动跟我讲话的时候就送她一个字:滚!

"有个网页不会做,你可不可以帮人家弄一下呀."

"弄,一定给你弄得妥妥的."

"坏死了,需求我离线发给你了,这个就靠你了啊."

"恩,靠我,靠我就对了"

QQ头像又黑掉了...

需求还好嘛.就是写一个采购单的录入界面而已.

二十分钟后收工，离线发送。

"亲,你好快呀,我先看看有没有问题哈,有问题还要麻烦你哦"

---

二、重湿AV之旅（此AV非彼AV详情请见上一篇博客《大湿教我写程序(2)之走向AV之路》）

"亲,还有两个小问题耶,采购单录入界面的表头上的供应商要可以自动补全,自动补全用户体验会好很多，客户会感觉很人性化。那个东东我把要求用标出来的你看看哈,可能有点难哦。"

"这东西对我来说就不叫个事儿,包在我身上."

这东西以前好像用过,自动补全的,ajaxcontroltoolkit,里面有CascadingDropDown控件.

引用一下ajaxcontroltoolkit,拉一个CascadingDropDown出来,关联一下文本框.然后写一个webservice,里面提供一个方法给它调用。OK，解决了。

看一下好像不对，女神要求的下拉框里有两列，一列是编码，一列是名称。这个只能显示一列。达不到要求呀，查了一遍属性没办法。

“大雄”

“大湿”

“死了啊”

“网速有点慢，我把快播的端口号限一下啊。”

“搞什么呀，又有什么问题了，我这刚准备陶冶一下情操你就。。。”

“恩，需求你看下，这个下拉框怎么搞。”

“教学视频看了这么多AV技术还是没学到家呀,典型的AV技术应用嘛。”

"AV技术我知道呀,用ajax去visit后台数据我知道怎么去抓。关键是怎么在前台展现呢？"

“苍老师用外语教的每一句话你都记得那么清楚，我上周刚教你的动态加载菜单(详情请见《大湿教我写.net通用权限框架(1)之菜单导航篇》)不就是讲的怎么动态构造html么？

前端说穿了其实很简单，不管多绚丽的界面都还是由那些最基本的html元素拼起来的。”

“好啦，讲半天还是得自己写，滚吧滚吧”

经他这么一说其实我心里也已经有了大致思路。

1、从后台把数据抓取出来

根据前台传过来的条件返回10条记录供界面显示

/// <summary>
/// 自动补全(显示10行)
/// </summary>
/// <param name="where">条件</param>
/// <param name="param">参数化</param>
/// <returns></returns>
public DataTable autocomplete(StringBuilder where, SqlParam[] param)
{
StringBuilder strSql = new StringBuilder();
strSql.Append("SELECT TOP 10 Supplier_ID,Code,ShortName,ValueAddRate FROM Base_Supplier WHERE 1=1");
strSql.Append("AND DeleteMark =0 AND IsVisible = 0");
strSql.Append(where);
strSql.Append(" ORDER BY CreateDate");
return DataFactory.SqlDataBase().GetDataTableBySQL(strSql, param);
}

2、动态拼接要显示的内容

确实像大湿所有的那样,这个下拉自动填充框确实是由表格和字符组成。

在上一篇博文里已经讲了ajax如何调用后台方法，这里就不再重复。

抓取到供应商数据后进行一次遍历循环地拼接<tr>

<td>内容</td>

..............

</tr>

拼接好了以后就放入到div中根据Supplier_Name这个控件的位置加载出来。

然后选定了内容的时候再将选中的内容写入Supplier_Name控件中

Supplier_Name失去焦点时隐藏掉div.

//供应商自动补全
function SupplierAutocomplete() {
$("#Supplier_Name").bind("keyup", function (e) {
if (e.which != 13 && e.which != 40 && e.which != 38) {
var parm = "action=autocomplete&search=" + escape($(this).val());
Load_Supplier(parm);
}
}).focus(function () {
var parm = "action=autocomplete&search=" + escape($(this).val());
Load_Supplier(parm);
$(this).select();
});
function Load_Supplier(parm) {
getAjax('../../WMSBase/SysSupplier/Supplier_List.aspx', parm, function (data) {
var json = eval("(" + data + ")");
var html = "";
for (var i = 0; i < json.JSON.length; i++) {
var list = json.JSON;
html += "<tr>";
html += '<td style="display: none;">' + list.SUPPLIER_ID + '</td>';
html += '<td style="width: 100px;">' + list.CODE + '</td>';
html += '<td style="width: 200px;">' + list.SHORTNAME + '</td>';
html += '<td style="display: none;">' + list.VALUEADDRATE + '</td>';
html += "</tr>";
}
//点击事件回调
autocomplete("Supplier_Name", "300px", "300px", html, function (r) {
var array = new Array();
array = r.split('≌');
$("#Supplier_ID").val(array[0]);
$("#Supplier_Name").val(array[2]);
VALUEADDRATE = array[3];
});
});
}
//上，下键盘回调
autocompletekeydown("Supplier_Name", function (r) {
var array = new Array();
array = r.split('≌');
$("#Supplier_ID").val(array[0]);
$("#Supplier_Name").val(array[2]);
VALUEADDRATE = array[3];
});
}

阅读更多内容