以下是关于 EasyUI jQuery propertygrid widget 的详细攻略:
EasyUI jQuery propertygrid widget
propertygrid widget 是 EasyUI jQuery 中的一个组件,它是一个属性表格,可以用于显示和编辑对象的属性。propertygrid widget 可以通过 AJAX 加载数据,支持分组和排序,还可以自定义列和行。
语法
$(selector).propertygrid(options);
参数
- options: 一个包含设置选项的对象。
示例一:基本使用
<!DOCTYPE html>
<html>
<head>
<title>EasyUI jQuery propertygrid widget 示例</title>
<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">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#pg').propertygrid({
url:'propertygrid_data.json',
showGroup:true,
scrollbarSize:0
});
});
</script>
</head>
<body>
<table id="pg"></table>
</body>
</html>
这将创建一个 propertygrid widget,并使用 AJAX 加载数据。在页面加载时,propertygrid widget 将被创建,并显示对象的属性。可以通过编辑属性来修改对象的值。
示例二:自定义列和行
<!DOCTYPE html>
<html>
<head>
<title>EasyUI jQuery propertygrid widget 示例</title>
<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">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#pg').propertygrid({
url:'propertygrid_data.json',
showGroup:true,
scrollbarSize:0,
columns:[[
{field:'name',title:'Name',width:100},
{field:'value',title:'Value',width:100},
{field:'group',title:'Group',width:100}
]]
});
});
</script>
</head>
<body>
<table id="pg"></table>
</body>
</html>
这将创建一个 propertygrid widget,并自定义列和行。在页面加载时,propertygrid widget 将被创建,并显示对象的属性。可以通过编辑属性来修改对象的值。还可以自定义列和行。
总结:
propertygrid widget 是 EasyUI jQuery 中的一个组件,它是一个属性表格,可以用于显示和编辑对象的属性。可以使用 $(selector).propertygrid(options); 来创建 propertygrid widget。可以通过 AJAX 加载数据,支持分组和排序,还可以自定义列和行。
以上是关于 EasyUI jQuery propertygrid widget 的完整攻略。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:EasyUI jQuery propertygrid widget - Python技术站