以下是关于 EasyUI jQuery combogrid widget 的详细攻略：
EasyUI jQuery combogrid widget
combogrid widget 是 EasyUI jQuery 中的一个组件，它是一个下拉框和表格的组合，可以用于选择和显示数据。combogrid widget 可以通过 AJAX 加载数据，支持分页和排序，还可以自定义列和行。
语法
$(selector).combogrid(options);
参数
- options: 一个包含设置选项的对象。
示例一：基本使用
<!DOCTYPE html>
<html>
<head>
<title>EasyUI jQuery combogrid 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(){
$('#cc').combogrid({
panelWidth:450,
idField:'id',
textField:'name',
url:'datagrid_data.json',
columns:[[
{field:'id',title:'ID',width:60},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});
});
</script>
</head>
<body>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<input id="cc" class="easyui-combogrid" style="width:250px;">
</body>
</html>
这将创建一个 combogrid widget，并使用 AJAX 加载数据。在页面加载时，combogrid widget 将被创建，并可以通过下拉框选择数据。当选择数据时，表格将显示所选数据的详细信息。
示例二：自定义列和行
<!DOCTYPE html>
<html>
<head>
<title>EasyUI jQuery combogrid 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(){
$('#cc').combogrid({
panelWidth:450,
idField:'id',
textField:'name',
url:'datagrid_data.json',
columns:[[
{field:'id',title:'ID',width:60},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'},
{field:'category',title:'Category',width:100,align:'center'},
{field:'description',title:'Description',width:200,align:'left'}
]],
fitColumns:true,
rownumbers:true,
pagination:true,
pageSize:10,
pageList:[10,20,30,40,50],
loadMsg:'Loading...',
toolbar:[{
text:'Reload',
iconCls:'icon-reload',
handler:function(){
$('#cc').combogrid('reload');
}
}]
});
});
</script>
</head>
<body>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;"></div>
<input id="cc" class="easyui-combogrid" style="width:250px;">
</body>
</html>
这将创建一个 combogrid widget，并自定义列和行。在页面加载时，combogrid widget 将被创建，并可以通过下拉框选择数据。表格将显示所选数据的详细信息，并支持分页和排序。还可以自定义工具栏和加载消息。
总结：
combogrid widget 是 EasyUI jQuery 中的一个组件，它是一个下拉框和表格的组合，可以用于选择和显示数据。可以使用 $(selector).combogrid(options); 来创建 combogrid widget。可以通过 AJAX 加载数据，支持分页和排序，还可以自定义列和行。
以上是关于 EasyUI jQuery combogrid widget 的完整攻略。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：EasyUI jQuery combogrid widget - Python技术站
微信扫一扫 
支付宝扫一扫 