极客教程EasyUI的jQuery数据列表小工具
EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。
在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个数据列表。一个数据列表在一个列表中显示项目。它是一个特殊的数据表格，在一列中显示数据。
EasyUI for jQuery的下载：
https://www.jeasyui.com/download/index.php
语法:
<input class="easyui-datalist">
属性:
- lines。这个属性定义了显示行的线条。
- checkbox。这定义了是否为每行显示一个复选框。
- valueField。绑定到该行的字段值名称。
- textField。要显示在行上的字段名。
- groupField。指明要分组的字段。
- textFormatter。文本字段格式化函数。
- groupFormatter。格式化函数，用于返回组的内容。
CDN链接：首先，添加你的项目需要的jQuery Easy UI脚本，链接是本地路径。
<script type=”text/javascript” src=”jquery.min.js”>
</script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript”
src=”jquery.easyui.min.js”>
</script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript”
src=”jquery.easyui.mobile.js”>
</script>
示例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/mobile.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript" src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<script type="text/javascript">
$('#gfg').datalist();
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>how to make a basic datalist using jQuery UI?</h3>
<ul id="gfg"class="easyui-datalist" title="DataList">
<li value="1">Geeks</li>
<li value="2">Geeks2</li>
<li value="3">Geeks3</li>
<li value="4">Geeks4</li>
<li value="5">Geeks5</li>
<li value="6">Geeks6</li>
</ul>
</body>
</html>
输出:
Datalist