一，效果图。
二，源代码。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Group DataList - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo.css"> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body> <h2>Group DataList</h2> <p>This example shows how to display items in groups.</p> <div style="margin:20px 0"></div> <div id="#dglist" class="easyui-datalist" title="Group DataList" style="width:400px;height:250px" data-options=" method: 'get', groupField: 'group' "> </div> <script type="text/javascript"> $().ready(function(){ $("#dglist").datalist({data:[ {"text":"Epson WorkForce 845","group":"Printer"}, {"text":"Canon PIXMA MG5320","group":"Printer"}, {"text":"HP Deskjet 1000 Printer","group":"Printer"}, {"text":"Cisco RV110W-A-NA-K9","group":"Firewall"}, {"text":"ZyXEL ZyWALL USG50","group":"Firewall"}, {"text":"NETGEAR FVS318","group":"Firewall"}, {"text":"Logitech Keyboard K120","group":"Keyboard"}, {"text":"Microsoft Natural Ergonomic Keyboard 4000","group":"Keyboard"}, {"text":"Logitech Wireless Touch Keyboard K400","group":"Keyboard"}, {"text":"Logitech Gaming Keyboard G110","group":"Keyboard"}, {"text":"Nikon COOLPIX L26 16.1 MP","group":"Camera"}, {"text":"Canon PowerShot A1300","group":"Camera"}, {"text":"Canon PowerShot A2300","group":"Camera"} ] }); }); </script></body></html>
转载于:https://www.cnblogs.com/luocheng/p/4389275.html
相关资源：JAVA上百实例源码以及开源项目