jEasyUI 过滤下拉数据网格学习笔记

jEasyUI 提供了一种功能强大的组件——过滤下拉数据网格，可以在数据量较大的情况下，快速、准确地筛选出所需数据。下面是本文将要介绍的内容：

过滤下拉数据网格的基本用法
实例演示

1. 过滤下拉数据网格的基本用法

过滤下拉数据网格是一个复合组件，由下拉框和数据网格两部分组成，用户可以通过下拉框筛选数据，并将筛选结果在数据网格中展示。

使用方法如下：

首先，在页面中引入 jEasyUI 的 JS 和 CSS 文件：

htmlCopy Code
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

然后，创建 HTML 元素并初始化组件：

htmlCopy Code
<input id="dd" class="easyui-combogrid" style="width:250px;"
        data-options="
            panelWidth: 355,
            idField: 'itemid',
            textField: 'productname',
            url: 'get_data.php',
            mode: 'remote',
            pagination: true,
            pageSize: 10,
            pageList: [10,20,30,40,50],
            columns: [[
                {field:'productid',title:'Product ID',width:60},
                {field:'productname',title:'Product Name',width:100},
                {field:'listprice',title:'List Price',width:80,align:'right'}
            ]],
            filter: function(q, row){
                var opts = $(this).combogrid('options');
                return row[opts.textField].indexOf(q) >= 0;
            }
        ">

其中，data-options 属性中的字段含义如下：

panelWidth：下拉面板的宽度。
idField：数据网格中的 id 字段名称。
textField：数据网格中用于展示的文本字段名称。
url：远程加载数据的 URL。
mode：加载数据的模式（local 或 remote）。
pagination：是否启用分页。
pageSize：每页显示的记录数。
pageList：分页可选的每页记录数。
columns：数据网格的列定义。
filter：过滤器回调函数。

最后，通过 filter 属性来添加过滤功能。当用户输入关键字时，会触发该回调函数，根据输入的关键字过滤数据，并将过滤结果在数据网格中展示。

2. 实例演示

下面是一个简单的实例，展示如何使用 jEasyUI 的过滤下拉数据网格组件来筛选出电子产品中的手机模型：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>过滤下拉数据网格学习笔记</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <input id="dd" class="easyui-combogrid" style="width:250px;"
        data-options="
            panelWidth: 355,
            idField: 'productid',
            textField: 'productname',
            url: 'data.json',
            mode: 'remote',
            pagination: true,
            pageSize: 10,
            pageList: [10,20,30,40,50],
            columns: [[
                {field:'productid',title:'Product ID',width:60},
                {field:'productname',title:'Product Name',width:100},
                {field:'listprice',title:'List Price',width:80,align:'right'}
            ]],
            filter: function(q, row){
                var opts = $(this).combogrid('options');
                return row[opts.textField].indexOf(q) >= 0
                        && row['producttype'] == '手机';
            }
        ">
</body>
</html>

其中，data.json 文件中的数据如下：

jsonCopy Code
{
    "total": 19,
    "rows": [
        {"productid":"FI-SW-01", "productname":"Koi", "listprice":10.00, "producttype":"鱼缸用品"},
        {"productid":"K9-DL-01", "productname":"Dalmation", "listprice":20.00, "producttype":"宠物食品"},
        {"productid":"RP-SN-01", "productname":"Rattlesnake", "listprice":40.00, "producttype":"宠物食品"},
        {"productid":"RP-SN-02", "productname":"King snake", "listprice":50.00, "producttype":"宠物食品"},
        {"productid":"RP-LI-02", "productname":"Iguana", "listprice":60.00, "producttype":"宠物食品"},
        {"productid":"FL-DSH-01", "productname":"Manx", "listprice":16.50, "producttype":"宠物食品"},
        {"productid":"FL-DSH-02", "productname":"Persian", "listprice":22.00, "producttype":"宠物食品"},
        {"productid":"FL-DSH-03", "productname":"Bengal", "listprice":18.30, "producttype":"宠物食品"},
        {"productid":"FL-DLH-01", "productname":"Maine Coon", "listprice":23.00, "producttype":"宠物食品"},
        {"productid":"FL-DLH-02", "productname":"Siamese", "listprice":29.00, "producttype":"宠物食品"},
        {"productid":"AV-CB-01", "productname":"Amazon Parrot", "listprice":92.00, "producttype":"宠物食品"},
        {"productid":"AV-SB-02", "productname":"Bird Cage", "listprice":45.00, "producttype":"宠物用具"},
        {"productid":"RP-SN-03", "productname":"Copperhead", "listprice":75.00, "producttype":"宠物食品"},
        {"productid":"DO-TC-01", "productname":"Turtle", "listprice":12.76, "producttype":"宠物食品"},
        {"productid":"DO-FP-01", "productname":"Ferret", "listprice":34.00, "producttype":"宠物食品"},
        {"productid":"FI-FW-01", "productname":"Small bird cage", "listprice":55.00, "producttype":"宠物用具"},
        {"productid":"FI-FW-02", "productname":"Large bird cage", "listprice":155.00, "producttype":"宠物用具"},
        {"productid":"PE-RC-01", "productname":"Rabbit", "listprice":9.00, "producttype":"宠物食品"},
        {"productid":"GT-CB-01", "productname":"Rat", "listprice":10.00, "producttype":"宠物食品"},
        {"productid":"GT-MG-01", "productname":"Mouse", "listprice":5.50, "producttype":"宠物食品"}
    ]
}

通过运行上述代码，可以在浏览器中看到一个下拉框和数据网格。当用户输入关键字并选中“手机”模型时，数据网格中只会展示与该关键字匹配的手机型号。

以上就是 jEasyUI 过滤下拉数据网格的基本用法和实例演示。