要在 jQuery EasyUI DataGrid 中添加查询功能,你可以使用 datagrid 提供的远程数据加载和本地数据过滤的功能。以下是一个简单的例子:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
    <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>

<div style="margin-bottom:10px">
    <input id="searchBox" class="easyui-textbox" label="Search:" labelWidth="50" style="width:200px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="searchData()">Search</a>
</div>

<table id="datagrid" title="DataGrid" style="width:400px;height:250px;">
    <thead>
        <tr>
            <th field="id" width="50">ID</th>
            <th field="name" width="150">Name</th>
            <th field="age" width="50">Age</th>
        </tr>
    </thead>
</table>

<script>
    $(function(){
        // 初始化 DataGrid
        $('#datagrid').datagrid({
            url: 'your_data_url', // 替换成你的远程数据源 URL
            method: 'get',
            columns: [[
                {field: 'id', title: 'ID', width: 50},
                {field: 'name', title: 'Name', width: 150},
                {field: 'age', title: 'Age', width: 50}
            ]],
            pagination: true,
            rownumbers: true,
            fitColumns: true,
            singleSelect: true
        });
    });

    // 查询数据的函数
    function searchData(){
        var searchText = $('#searchBox').textbox('getValue'); // 获取查询文本
        // 使用 load 方法重新加载数据,传递查询条件到后端处理
        $('#datagrid').datagrid('load', { keyword: searchText });
    }
</script>

</body>
</html>

在上述代码中,我们使用了 textbox 组件创建一个文本框,用于输入查询条件。点击 "Search" 按钮后,调用 searchData 函数,获取输入的查询文本,然后使用 datagrid 的 load 方法重新加载数据,同时传递查询条件到后端(你需要替换成实际的后端数据接口)。这样就实现了基本的查询功能。

请注意,在实际项目中,你需要替换 'your_data_url' 为你的后端数据接口的实际 URL,同时在后端处理接口中根据传递的查询条件进行数据过滤。


转载请注明出处:http://www.zyzy.cn/article/detail/13105/jQuery EasyUI