1. Python技术站首页
  2. jquery

Jquery之datagrid查询详解

• jquery

Jquery之datagrid查询详解

1. 简介

jQuery EasyUI Datagrid是一个灵活的、易于使用的数据表格控件。它具有分页、排序、过滤、选中、编辑和行内添加/编辑/删除等功能。本文将详细讲解jQuery EasyUI Datagrid的查询功能。

2. 数据源

在jQuery EasyUI Datagrid中，可以通过设置其"Toolbar"属性来添加查询条件组件。主要有三部分组成：输入框、下拉框和按钮。然后通过Jquery的Ajax方法向服务端发送请求，获得相应的数据，最后将返回的数据展示在datagrid中。

以下是一个数据源示例：

$(function(){
    $('#datagrid').datagrid({
        url:'/demo',
        toolbar:'#toolbar',
        pagination:true,
        pageSize:20,
        pageList:[20,30,50],
        singleSelect:true,
        fit:true,
        columns:[[...]]
    });
});

其中：

  • url：表示向服务端发起请求的地址；

  • toolbar：表示datagrid的顶部工具栏，即查询条件组件；

  • pagination: 是否启用分页功能；

  • pageSize：表示每页显示的记录数；

  • pageList：表示每页可以选择的记录数；

  • singleSelect：表示是否单选；

  • fit：表示datagrid的整体宽高是否自适应父容器；

  • columns：表示datagrid的列描述信息；

  • ...

3. 查询操作

3.1 普通查询

普通查询即针对一个或多个条件进行查询，查询结果以datagrid的形式展示出来。

首先，我们需要在HTML页面中添加相应的查询条件组件：


<div id="toolbar">
    <form>
        <input id="name" class="easyui-textbox" label="用户名：" labelPosition="left"/>
        <input id="state" class="easyui-combobox" label="状态：" labelPosition="left"
        data-options="valueField:'value',textField:'text',panelHeight:'auto',data:[{value:'0',text:'关闭'},{value:'1',text:'运行'}]"/>
        <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="datagridSearch()">查询</a>
    </form>
</div>

其中，easyui-textbox表示EasyUI的输入框，easyui-combobox表示EasyUI的下拉框，easyui-linkbutton表示EasyUI的按钮。

其次，我们需要编写相应的查询函数：

function datagridSearch(){
    var queryParams = $('#datagrid').datagrid('options').queryParams;
    var name = $('#name').textbox('getValue');
    var state = $('#state').combobox('getValue');
    $.extend(queryParams,{name:name,state:state});
    $('#datagrid').datagrid('reload');
}

其中，datagrid表示datagrid的ID，options.queryParams表示查询参数，textbox('getValue')表示获取输入框中的值，combobox('getValue')表示获取下拉框中的值，$.extend表示将新的查询条件合并到原有的查询参数中，datagrid('reload')表示重新加载datagrid。

最后，我们需要在服务端编写相应的查询接口，根据传入的查询条件参数进行相应的数据库查询并返回结果。

以下是一个Python Flask框架下的示例：

from flask import request
from flask import jsonify

@app.route('/demo')
def demo():
    page = request.args.get('page', 1, type=int)
    rows = request.args.get('rows', 10, type=int)
    name = request.args.get('name', '')
    state = request.args.get('state', '')

    # 执行数据库查询
    results = db.session.query(User).filter(User.name.like('%' + name + '%'))
    if state != '':
        results = results.filter(User.state == int(state))
    else:
        results = results.filter(User.state.in_([0, 1]))
    total = results.count()
    results = results.offset((page-1)*rows).limit(rows)
    data = []
    for r in results:
        data.append(r.to_dict())

    return jsonify({'total':total,'rows':data})

其中，request.args.get()表示获取相应的查询参数，db.session.query()表示执行SQL查询，like()表示模糊查询，filter()表示过滤条件，count()表示计算总共符合条件的记录数，offset()和limit()表示分页，to_dict()表示将结果转换成字典格式，最后通过jsonify函数返回查询结果。

3.2 高级查询

高级查询即针对多个条件进行组合查询，查询结果以datagrid的形式展示出来。

首先，我们需要在HTML页面中添加相应的高级查询条件组件：


<div id="searchDialog" class="easyui-dialog" closed="true" buttons="#searchButtons" title="高级查询" style="width:400px;height:auto;">
    <form id="searchForm">
        <table>
            <tr>
                <td>用户名：</td>
                <td><input id="s_name" class="easyui-textbox" data-options="width:180px"></td>
            </tr>
            <tr>
                <td>状态：</td>
                <td>
                    <select id="s_state" class="easyui-combobox" data-options="valueField:'value',textField:'text',panelHeight:'auto',data:[{value:'',text:'全部'},{value:'0',text:'关闭'},{value:'1',text:'运行'}]"></select>
                </td>
            </tr>
        </table>
    </form>
</div>

其中，easyui-dialog表示EasyUI的对话框，easyui-textbox和easyui-combobox表示EasyUI的输入框和下拉框。

其次，我们需要编写相应的高级查询函数：

function datagridAdvancedSearch(){
    $('#searchDialog').dialog('open');
}

function searchOK(){
    var queryParams = $('#datagrid').datagrid('options').queryParams;
    var name = $('#s_name').textbox('getValue');
    var state = $('#s_state').combobox('getValue');
    $.extend(queryParams,{name:name,state:state});
    $('#datagrid').datagrid('reload');
    $('#searchDialog').dialog('close');
}

function searchCancel(){
    $('#searchDialog').dialog('close');
}

其中，datagridAdvancedSearch()表示打开高级查询对话框，searchOK()表示提交查询条件并关闭对话框，searchCancel()表示取消查询并关闭对话框。

最后，我们需要在服务端编写相应的高级查询接口，根据传入的查询条件参数进行相应的数据库查询并返回结果。与普通查询类似，只是多了一些查询条件的组合。

以下是一个Python Flask框架下的示例：

@app.route('/demo/advancedsearch')
def demo_advancedsearch():
    page = request.args.get('page', 1, type=int)
    rows = request.args.get('rows', 10, type=int)
    name = request.args.get('name', '')
    state = request.args.get('state', '')

    # 执行数据库查询
    results = db.session.query(User).filter(User.name.like('%' + name + '%'))
    if state != '':
        results = results.filter(User.state == int(state))
    else:
        results = results.filter(User.state.in_([0, 1]))
    total = results.count()
    results = results.offset((page-1)*rows).limit(rows)
    data = []
    for r in results:
        data.append(r.to_dict())

    return jsonify({'total':total,'rows':data})

4. 示例

以下是两个完整的示例，分别是普通查询和高级查询。

4.1 普通查询示例

<!DOCTYPE html>
<html>
<head>
    <title>普通查询</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/static/css/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/css/icon.css">
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="tbar">
        <form>
            <input id="name" class="easyui-textbox" label="用户名：" labelPosition="left"/>
            <input id="state" class="easyui-combobox" label="状态：" labelPosition="left"
            data-options="valueField:'value',textField:'text',panelHeight:'auto',data:[{value:'',text:'全部'},{value:'0',text:'关闭'},{value:'1',text:'运行'}]"/>
            <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="datagridSearch()">查询</a>
        </form>
    </div>

    <table id="datagrid" style="width:100%;"></table>

    <script type="text/javascript">
        $(function(){
            $('#datagrid').datagrid({
                url:'/demo',
                toolbar:'#tbar',
                pagination:true,
                pageSize:20,
                pageList:[20,30,50],
                singleSelect:true,
                fit:true,
                columns:[[...]]
            });
        });

        function datagridSearch(){
            var queryParams = $('#datagrid').datagrid('options').queryParams;
            var name = $('#name').textbox('getValue');
            var state = $('#state').combobox('getValue');
            $.extend(queryParams,{name:name,state:state});
            $('#datagrid').datagrid('reload');
        }
    </script>
</body>
</html>

4.2 高级查询示例

<!DOCTYPE html>
<html>
<head>
    <title>高级查询</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/static/css/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/css/icon.css">
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="tbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="datagridAdvancedSearch()">高级查询</a>
    </div>

    <table id="datagrid" style="width:100%;"></table>

    <div id="searchDialog" class="easyui-dialog" closed="true" buttons="#searchButtons" title="高级查询" style="width:400px;height:auto;">
        <form id="searchForm">
            <table>
                <tr>
                    <td>用户名：</td>
                    <td><input id="s_name" class="easyui-textbox" data-options="width:180px"></td>
                </tr>
                <tr>
                    <td>状态：</td>
                    <td>
                        <select id="s_state" class="easyui-combobox" data-options="valueField:'value',textField:'text',panelHeight:'auto',data:[{value:'',text:'全部'},{value:'0',text:'关闭'},{value:'1',text:'运行'}]"></select>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div id="searchButtons">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="searchOK()">查询</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="searchCancel()">取消</a>
    </div>

    <script type="text/javascript">
        $(function(){
            $('#datagrid').datagrid({
                url:'/demo/advancedsearch',
                pagination:true,
                pageSize:20,
                pageList:[20,30,50],
                singleSelect:true,
                fit:true,
                columns:[[...]]
            });
        });

        function datagridAdvancedSearch(){
            $('#searchDialog').dialog('open');
        }

        function searchOK(){
            var queryParams = $('#datagrid').datagrid('options').queryParams;
            var name = $('#s_name').textbox('getValue');
            var state = $('#s_state').combobox('getValue');
            $.extend(queryParams,{name:name,state:state});
            $('#datagrid').datagrid('reload');
            $('#searchDialog').dialog('close');
        }

        function searchCancel(){
            $('#searchDialog').dialog('close');
        }
    </script>
</body>
</html>

5. 总结

本文详细讲解了jQuery EasyUI Datagrid的查询功能，包括普通查询和高级查询。同时，提供了两个示例供大家参考。

在实际项目中，查询功能是必不可少的，通过本文的讲解，相信大家对jQuery EasyUI Datagrid的查询功能有了更加深入的了解。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jquery之datagrid查询详解 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • JQuery 封装 Ajax 常用方法(推荐)

    JQuery 封装 Ajax 常用方法(推荐) 在web开发中，我们经常需要使用Ajax进行异步通信。但是，每次都写出完整的的Ajax代码（包括请求头、请求类型、成功回调函数等）比较麻烦，而且容易重复。因此，我们可以将其封装成方法，这样可以大大简化我们的代码，提高代码的复用性。 封装方法 下面我们就来介绍如何封装一个常用的Ajax方法： function a…

    jquery 2023年5月28日
    00

  • jQuery filter函数使用方法

    jQuery filter函数使用方法 什么是jQuery filter函数？ jQuery filter函数是jQuery中一个非常实用的函数，可以根据条件筛选出符合条件的元素。 filter函数的语法 $(selector).filter(filter) selector：表示需要筛选的元素，可以是任何CSS选择器或者jQuery对象。 filter：表…

    jquery 2023年5月27日
    00

  • jQuery contents()的例子

    以下是关于jQuery中contents()方法的完整攻略： 什么是contents()方法？ contents()方法是jQuery中的一个方法，用于选择匹配元素的所有子节点，包括文本节点和注释节点。 如何使用contents()方法？ 使用以下代码使用contents()方法： $(selector).contents() 其中，selector是要选择…

    jquery 2023年5月12日
    00

  • jQWidgets jqxTree easing属性

    以下是关于 jQWidgets jqxTree 组件中 easing 属性的详细攻略。 jQWidgets jqxTree easing 属性 easing 属性用于设置 jQWidgets jqxTree 组件的动画效果。它可以让节点的展开和折叠动作更加平滑和自然。 语法 $(‘#tree’).jqxTree({ easing: ‘easeInOutCir…

    jquery 2023年5月11日
    00

  • JQuery日期插件datepicker的使用方法

    JQuery日期插件datepicker是一款开源的日期选择组件，广泛应用于Web开发中，本文将详细介绍它的使用方法。 1. 引入JQuery日期插件 在使用JQuery日期插件之前，需要先引用此插件，可以通过以下两种方式实现： 1.1 通过CDN引入 推荐使用CDN的方式引入jQuery-UI的DatePicker组件，CDN地址：https://code…

    jquery 2023年5月28日
    00

  • 超级酷和最实用的jQuery实例收集(20个)

    以下是详细的攻略： 超级酷和最实用的jQuery实例收集(20个) 简介 本篇文章汇总了20个最实用和超酷的jQuery实例，这些实例涉及到的功能覆盖了各种常见的Web开发需求，比如动态效果、表单验证、网页排版等。这些实例既可以帮助初学者快速了解jQuery的基本使用方法，也可以供进阶用户参考和借鉴。 示例1：图片轮播效果 这个示例演示了如何使用jQuery…

    jquery 2023年5月28日
    00

  • 如何使用jQuery将选定的值重置为默认值

    当使用表单或者其他界面元素时，有时候需要重置选定的值为默认值。在这种情况下，jQuery提供了一个方便的方法来实现这一要求。下面是一个基本步骤以及两个示例来讲解如何使用jQuery将选定的值重置为默认值： 步骤一：确定选定元素 首先需要确定需要重置的元素。在jQuery中，可以使用$()方法或者其它选择器方法来选定需要重置的元素，例如： // 选定id为my…

    jquery 2023年5月12日
    00

  • jQuery函数map()和each()介绍及异同点分析

    jQuery函数map()和each()介绍及异同点分析 1. each()函数介绍 each()是 jQuery 最基本的迭代函数，它用于遍历 jQuery 对象的所有元素，对每个元素执行回调函数。 each()的语法如下： $(selector).each(function(index,element){ //do something }) select…

    jquery 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部