极客教程EasyUI jQuery propertygrid widget
EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。
在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个属性网格。属性网格为用户提供了一个浏览和编辑对象属性的界面。
EasyUI for jQuery的下载：
https://www.jeasyui.com/download/index.php
语法:
<input class="easyui-propertgrid">
属性:
- showGroup。定义是否显示属性组。
- groupField。定义组的字段名。
- groupFormatter。定义如何格式化组的值。
方法:
- group:返回所有的组
- expandGroup。展开指定的组。
- collapseGroup。折叠指定的组。
步骤:
- 首先，添加你的项目所需的jQuery Easy UI脚本。
<link rel="stylesheet" type="text/css"
href=”https://www.jeasyui.com/easyui/themes/default/easyui.css”>
<link rel="stylesheet" type="text/css"
href=”https://www.jeasyui.com/easyui/themes/icon.css”>
<script type=”text/javascript”
src=”https://www.jeasyui.com/easyui/jquery.min.js”></script>
<script type=”text/javascript”
src=”https://www.jeasyui.com/easyui/jquery.easyui.min.js”></script>
示例 :
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript"
src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript"
src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h1>PropertyGrid</h1>
<table id="gfg" style="width:300px"></table>
<script type="text/javascript">
('#gfg').propertygrid({
showGroup: true,
scrollbarSize: 20
});
var row = {
name:'GfG',
value:'GeeksforGeeks',
group:'Websites',
editor:'text'
};
('#gfg').propertygrid('appendRow',row);
var row = {
name:'GfG',
value:'Self Placed',
group:'Courses',
editor:'text'
};
$('#gfg').propertygrid('appendRow',row);
</script>
</body>
</html>
输出:
