最近项目中有需求如下：
输入品名后，弹出对话框显示以前采购类似品名的产品的采购记录；样式图如下：
输着输入的品名进行模糊查找和精确查找，并可以在弹出的采购记录进行选择，并把相应项赋值给相应文本框或者列表框.
html代码如下：
html代码
1 <div id="itab" style="display: none; width: 532px; margin-left: 25px; position: absolute;"> 2 <div style="background-image: url('../images/dg_01.png'); background-repeat: no-repeat; 3 width: 530px; height: 32px;"> 4 </div> 5 <div id="itabch" style="width: 530px; background-image: url('../images/dg_02.png'); 6 height: 200px; background-repeat: repeat-y;"> 7 </div> 8 <%--<div style="background-image: url('../images/dg_05.png'); width: 530px; height: 52px;" > 9 </div>--%> 10 <img src="../images/dg_05.png" style="width: 530px; height: 52px;" border="0" usemap="#Map" /> 11 <map name="Map" id="Map"> 12 <area shape="circle" coords="494,23,21" href="#" onclick="CloseDoc();" /> 13 </map> 14 </div>
js代码如下：
js代码
1 <script language="javascript" type="text/javascript"> 2 $(function () { 3 $("#txtProductName").keyup(function () { 4 var product = $("#txtProductName").val(); 5 $.post("../Ashx/GetProductInfo.ashx", { "productName": product }, function (data) { 6 if (data == "false") { 7 } 8 else { 9 $("#itab").css("left", "0px"); 10 $("#itab").css("top", "110px"); 11 $("#itab").css("display", "block"); 12 $("#itabch").html(data); 13 } 14 }) 15 }); 16 }); 17 function test(r) { 18 var vfouces = r.id; 19 var vindex = parseInt(vfouces.substring(1)); 20 var tab = document.getElementById("tjj"); 21 var rows = tab.rows; 22 for (var i = 0; i < rows.length; i++) { 23 if ((vindex + 1) == i) { 24 var quantity = rows[i].cells[6].innerHTML; 25 var unitPrice = rows[i].cells[5].innerHTML; 26 var approve = rows[i].cells[4].innerHTML; 27 var supplyName = rows[i].cells[3].innerHTML; 28 var purity = rows[i].cells[2].innerHTML; 29 var productName = rows[i].cells[1].innerHTML; 30 $("#txtSupplyName").val(supplyName); 31 $("#txtProductName").val(productName); 32 $("#txtPurty").val(purity); 33 $("#txtPrice").val(unitPrice); 34 $("#txtCount").val(quantity); 35 $("#itab").css("display", "none"); 36 } 37 } 38 } 39 function CloseDoc() { 40 $("#itab").hide(); 41 } 42 43 function ClickPage(e) { 44 var vPageButton = e.id; 45 var product = $("#txtProductName").val(); 46 var pageindex = parseInt($("#pageindex").text())-1; 47 var pageCount = parseInt($("#pageCount").text()); 48 if (vPageButton == "first") { 49 pageindex = 0; 50 } 51 if (vPageButton == "pre") { 52 if (pageindex == 0) { 53 return; 54 } 55 pageindex = pageindex - 1; 56 } 57 if (vPageButton == "next") { 58 if (pageindex + 1 == pageCount) { 59 return; 60 } 61 pageindex = pageindex + 1; 62 } 63 if (vPageButton == "last") { 64 pageindex = pageCount - 1; 65 } 66 $.post("../Ashx/GetProductInfo.ashx", { "productName": product, "pageindex": pageindex }, function (data) { 67 if (data == "false") { 68 } 69 else { 70 $("#itab").css("left", "0px"); 71 $("#itab").css("top", "110px"); 72 $("#itab").css("display", "block"); 73 $("#itabch").html(data); 74 } 75 }) 76 } 77 </script>
ashx代码：
ashx代码
1 context.Response.ContentType = "text/plain"; 2 OrderInfo orderBll = new OrderInfo(); 3 4 if (string.IsNullOrEmpty(context.Request.Form["productName"])) 5 { 6 context.Response.Write("false"); 7 return; 8 } 9 string productName = context.Request.Form["productName"]; 10 DataTable dt = orderBll.GetOrderDetailsByProductName(productName); 11 if (dt == null || dt.Rows.Count <= 0) 12 { 13 context.Response.Write("false"); 14 return; 15 } 16 int rowsCount = dt.Rows.Count;//总行数 17 int pageSize = 4;//每页4条记录 18 int pageCount = rowsCount % 4 == 0 ? rowsCount / 4 : rowsCount / 4 + 1; 19 int pageIndex = 0; 20 if (!string.IsNullOrEmpty(context.Request.Form["pageindex"])) 21 { 22 pageIndex = Convert.ToInt32(context.Request.Form["pageindex"]); 23 } 24 int start = pageIndex * 4; 25 int size = (pageIndex + 1) * 4; 26 if ((rowsCount - (pageIndex + 1) * 4) < 0) 27 { 28 size = rowsCount; 29 } 30 string str = "<table id=\"tjj\" cellspacing=\"1\"><tr class=\"itable_title\"><th>选择</th><th>品名</th><th>规格</th><th>供应商</th><th>评价</th><th>报价</th><th>数量</th></tr>"; 31 32 for (int i = start; i < size; i++) 33 { 34 string product = dt.Rows[i]["productname"].ToString(); 35 string purity = dt.Rows[i]["purity"].ToString(); 36 string supplyname = dt.Rows[i]["supplyname"].ToString(); 37 string unitprice = dt.Rows[i]["unitprice"].ToString(); 38 string quantity = dt.Rows[i]["quantity"].ToString(); 39 string appraise = dt.Rows[i]["appraise"].ToString(); 40 str += string.Format("<tr class=\"tr3\"><td><input type=\"radio\" name=\"radio\" onclick=\"test(this)\" id=\"r{0}\"/></td>", i); 41 str += string.Format("<td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td><td>{5}</td></tr>", product, purity, supplyname, appraise, unitprice, quantity); 42 } 43 str += string.Format("<table align=\"center\" style=\"margin-left:-26px;border:1px solid #e7e7e7;line-height:25px;height:35px;background:#ffffff;text-align:center;\"><tr><td colspan=\"5\"><input id=\"first\" class=\"btn\" type=\"button\" onclick=\"ClickPage(this);\" value=\"首页\"/> <input id=\"pre\" type=\"button\" class=\"btn\" value=\"上一页\" onclick=\"ClickPage(this);\"/> <input id=\"next\" type=\"button\" class=\"btn\" value=\"下一页\" onclick=\"ClickPage(this);\"/> <input id=\"last\" type=\"button\" class=\"btn\" value=\"尾页\" onclick=\"ClickPage(this);\"/> [第<span id=\"pageindex\">{0}</span>页/共<span id=\"pageCount\">{1}</span>页]</td></tr></table>", pageIndex + 1, pageCount); 44 str += "</table>"; 45 context.Response.Write(str);
从html代码中，可以看到弹出的div实质上是由三部分组成，
分别下面三张图片：
（1）dg_01.png
（2）dg_02.png
（3）dg_05.png
只是对图片2进行y轴平铺。