以下是一个简单的例子,演示如何在 EasyUI 的下拉框中使用 formatter 来格式化选项:
1. HTML 结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formatted Combo Box</title>
<link rel="stylesheet" type="text/css" href="path/to/jquery-easyui/themes/default/easyui.css">
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div>
<label for="formattedCombo">选择选项:</label>
<input id="formattedCombo" />
</div>
<script>
// 在这里编写 JavaScript 代码
</script>
</body>
</html>
2. JavaScript 代码:
$(function(){
// 创建下拉框
$('#formattedCombo').combobox({
valueField: 'id',
textField: 'text',
data: [
{id: 1, text: 'Option 1'},
{id: 2, text: 'Option 2'},
{id: 3, text: 'Option 3'}
],
formatter: function(row){
// 自定义格式化显示文本
return 'Custom Text: ' + row.text;
}
});
});
在上述代码中,formatter 函数接收每个选项的数据对象,并返回一个字符串,该字符串将用作该选项的显示文本。在这个例子中,我们简单地在每个选项的文本前添加了 "Custom Text: "。
确保替换实际的 EasyUI 文件路径、数据、以及其他选项,以适应你的具体需求。
转载请注明出处:http://www.zyzy.cn/article/detail/13147/jQuery EasyUI