在 jQuery EasyUI 中,你可以使用 formatter 选项来格式化下拉框的显示文本。这允许你自定义显示在下拉框中的每个选项的文本。

以下是一个简单的例子,演示如何在 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