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添加元素与实例

    jQuery的元素添加方法 jQuery是一种基于JavaScript的快速、小巧、特性丰富而且功能强大的JavaScript库，可以方便地操纵文档的HTML元素和CSS属性，并提供良好的交互体验。在jQuery中，我们可以使用以下方法实现元素添加： .append(): 向元素内容的末尾添加一个或多个子元素 .prepend(): 向元素内容的开头添加一个…

    jquery 2023年5月12日
    00

  • VS2008无法直接查看STL值的解决方法

    首先，需要明确一点，VS2008以及早期版本不支持直接查看STL容器内部值的功能。因此，需要通过一些手段来解决这个问题。以下是具体步骤： 1. 安装Visual Studio Service Pack 1（SP1） Visual Studio 2008的SP1提供了对STL容器的改进支持，以及对Lambda表达式和自动类型推导的支持。因此，首先需要安装SP1…

    jquery 2023年5月27日
    00

  • jquery 字符串切割函数substring的用法说明

    概述 substring() 函数是jQuery中的字符串片段抽取函数。该函数用于抽取一个字符串的一部分，并返回新的字符串作为结果。它可以传递两个参数，start和end两个参数分别指定的是子字符串的开始位置和结束位置（不包括结束位置）。如果不指定结束位置，则会取到字符串的末尾。 语法 $(selector).substring(start, end) 参数…

    jquery 2023年5月27日
    00

  • jQWidgets jqxTreeGrid exportSettings属性

    jQWidgets jqxTreeGrid exportSettings属性 jqxTreeGrid 是 jQWidgets 提供的一个树形表格组件，它可以展示层级结构的数据支持多种交互操作。jqxTreeGrid 提供了 exportSettings 属性，用于设置导出表格的相关设置。 exportSettings属性 exportSettings 属性用…

    jquery 2023年5月11日
    00

  • jQuery Mobile Filterable enhanced选项

    jQuery Mobile是一个基于HTML5的框架，用于快速搭建响应式移动端Web应用程序。其中，Filterable Widget是jQuery Mobile框架中的一个非常实用的组件，可以帮助用户筛选和搜索列表项目，提高了用户的体验感。其中，Filterable Widget还有一个加强（enhanced）选项，可以进一步强化筛选功能的交互体验。 下面…

    jquery 2023年5月12日
    00

  • jQuery图片拖动组件Dropzone用法示例

    下面就来详细讲解“jQuery图片拖动组件Dropzone用法示例”的完整攻略。 简介 Dropzone是一个开源的JavaScript库，用于处理文件上传和拖放。它支持文件的多类型上传，还可以自定义上传样式。而Dropzone以jQuery为基础，因此需要先引入jQuery。 安装 要使用Dropzone，首先需要下载并引入相关的文件： <!– j…

    jquery 2023年5月27日
    00

  • jQuery UI的Draggable cursor选项

    以下是关于 jQuery UI 的 Draggable cursor 选项的详细攻略： jQuery UI Draggable cursor 选项 cursor 选项用于设置拖动元素时鼠标针的样式。可以使用该选项来设置鼠标指针样式，例如“move”、“pointer”、“crosshair”等。 语法 $(selector).draggable({ curs…

    jquery 2023年5月11日
    00

  • angular js和jquery的区别

    AngularJS和jQuery都是流行的JavaScript框架，但它们的目标和用途不同。下面是它们之间的区别： 1. 框架的复杂度 AngularJS是一款完备的MVC框架，它的核心概念是双向数据绑定、依赖注入和模板指令。AngularJS包含了很多技术概念和构建应用程序所需的预设结构，因此在学习曲线上比较陡峭。 jQuery是一个轻量级的JavaScr…

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