02.java实现冷饮批发管理系统-页面设计之【选择店铺页面】

ゝ一纸荒年。 2024-02-17 19:01 13阅读 0赞

需求：用户设置完收货地址，系统判断该地址里对应的商铺列表。

### HTML 预览 ###

1.  <!DOCTYPE html> 
2.  <html> 
3.   <head> 
4.   <meta charset="UTF-8"> 
5.   <title>冷饮批发/选择冷饮店铺</title> 
6.   <link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css"> 
7.   <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css"> 
8.   <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /> 
9.   <script type="text/javascript" src="../js/easyui/jquery.min.js"></script> 
10.  <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script> 
11.  <script type="text/javascript" src="../js/easyui/plugins/datagrid-detailview.js"></script> 
12.  <script type="text/javascript" src="../js/bootstrap.min.js"></script> 
13.  </head> 
14.  <body > 
15.  <div id="cc"**class**="easyui-layout" style="width:1000px;height:750px;overflow:hidden;margin: 0 auto;" border="false" > 
16.  <div data-options="region:'north'" style="height:50px;" ></div> 
17.  <div data-options="region:'center'" style="padding:0px;background:\#eee;" border="false" > 
18.   
19.  <table fit="true" id="dg"**class**="easyui-datagrid" title="选择冷饮店铺" iconCls="icon-shield"
20.  toolbar="\#tb" idField="id" rownumbers="true" singleSelect="true" pagination="true"
21.  style="width:800px;height:400px"
22.  fitColumns="true" remoteSort="false"
23.  > 
24.  <thead> 
25.  <tr> 
26.  <th field="number" align="center" width="80" hidden="true">编号</th> 
27.  <th field="saler" align="center" width="80" >卖家</th> 
28.  <th field="name" align="center" width="100" >店铺名称</th> 
29.   
30.  <th field="desc" align="center" width="200">店铺介绍</th> 
31.  <th field="position" align="center" width="200">店铺地址</th> 
32.  <th field="rule" align="center" width="200">优惠规则</th> 
33.  <th field="postWay" align="center" width="200">送货方式</th> 
34.  <th field="tel" align="center" width="200">联系方式</th> 
35.  </tr> 
36.  </thead> 
37.  </table> 
38.  <div id="tb" style="padding:5px"> 
39.  <span>店铺名:&nbsp;&nbsp;&nbsp;&nbsp;</span> 
40.  <input id="id"**class**="easyui-textbox" prompt="请输入店铺名称"
41.  style="width:170px;height:26px;">&nbsp;&nbsp;&nbsp;&nbsp; 
42. 
43.  <a href="\#" iconCls="icon-search"**class**="easyui-linkbutton" οnclick="doSearch()">查询</a> 
44.  &nbsp;&nbsp; 
45.  </div> 
46.  <script type="text/javascript"> 
47.  var cardview = $.extend(\{\}, $.fn.datagrid.defaults.view, \{ 
48.  renderRow: function(target, fields, frozen, rowIndex, rowData)\{ 
49.  var cc = \[\]; 
50.  cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">'); 
51. **if** (!frozen)\{ 
52. //var aa = rowData.itemid.split('-');
53.  var img = 'shopone' + '.png'; 
54.  cc.push("<div style=\\"float:left;margin-left:15px;margin-top:80px;margin-right:50px;font-family:'微软雅黑'\\"><span style=\\"font-size:30px;font-weight:800;\\">"\+(rowIndex+1)+"</span></div>"); 
55.  cc.push('<img src="../img/' + img + '" style="width:200px;float:left">'); 
56.  cc.push('<div style="float:left;margin-left:20px; width:500px;" >'); 
57. //取出商家编号
58. //var firstline== $(target).datagrid('getColumnOption', fields\[0\]);
59. **for**(var i=0; i<fields.length; i++)\{ 
60.  var copts = $(target).datagrid('getColumnOption', fields\[i\]); 
61. 
62. **if**(i==0)\{ 
63. //cc.push("<br/>");
64. //cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData\[fields\[i\]\] + '</p>');
65.  \}**else**\{ 
66.  cc.push('<p><span **class**="c-label">' + copts.title + ':</span> ' + rowData\[fields\[i\]\] + '</p>'); 
67.  \} 
68.  \} 
69. //cc.push('<a href="\#" iconCls="icon-search" class="easyui-linkbutton" οnclick="doSearch()">进店批发</a>');
70.  cc.push('</div>'); 
71.  cc.push("<div οnclick=\\"javascript:alert('"\+rowData\[fields\[0\]\]+"')\\" style=\\"float:left;margin-left:5px;margin-top:80px;\\"><span class='l-btn-left l-btn-icon-left' style='margin-top: 2px;'><span class='l-btn-text'>进店批发</span><span class='l-btn-icon icon-add'>&nbsp;</span></span></div>"); 
72.  \} 
73.  cc.push('</td>'); 
74. **return** cc.join(''); 
75.  \} 
76.  \}); 
77. 
78.  $("\#dg").datagrid(\{ 
79. "url":"shops.json", 
80. "method":"get", 
81. "view":cardview 
82. 
83.  \}); 
84.  </script> 
85.   
86.  </div> 
87.  <div data-options="region:'south',split:false" style="height:30px;text-align: center;" > 
88.  版权所有@冷饮批发管理系统 Copyright 2016\-2017
89.  </div> 
90.  </div> 
91.  </body> 
92. </html>

效果图如下：

![Center][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2b6848465b76461fbbdb1ad52cc72fb9.png