• toolbar头部工具栏
<script type="text/javascript">
    $(function () {
        $("#datagrid").datagrid({
            url: "<%=homePage%>/testController/datagrid.ajax?type=list",
            title: "标题",
            iconCls: "icon-save",
            pagination: true,
            pageSize: 10,
            pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
            fit: true,
            fitColumns: true,//列少的时候,设置为true比较合适
            nowrap: false,//false - 单元格数据多的时候进行折行  true - 不管数据有多少,都在一行显示
            border: false,
            idField: "id",
            sortName: "id",
            sortOrder: "desc",
            columns: [
                [
                    {field: "id", title: "编号", width: 100}
                    , {field: "name", title: "姓名", width: 100, sortable: true, order: "desc"}
                    , {field: "password", title: "密码", width: 100}
                ]
            ],
            toolbar: [
                {
                    iconCls: "icon-add"
                    , text: "新增"
                    , handler: function () {
                    console.log("新增");
                }
                }, {
                    iconCls: "icon-remove"
                    , text: "删除"
                    , handler: function () {
                        console.log("删除");
                    }
                }, {
                    iconCls: "icon-edit"
                    , text: "编辑"
                    , handler: function () {
                        console.log("编辑");
                    }
                }, {
                    iconCls: "icon-search"
                    , text: "查询"
                    , handler: function () {
                        console.log("查询");
                    }
                }
            ]
        });    })

</script>

toolbar属性，用于设置头部工具栏，效果如下：

但是查询其实不应该做在toolbar上，因为toolbar只能添加按钮，而查询是需要查询提交的

有两种方式

1、在DataGrid组件的上方建立一个<div>,提供一个表单，用于发送查询参数

2、重写toolbar

toolbar: "#toolbar"

toolbar属性值不再是一个数组，而是一个选择器，在选择器指定的目标中，我们重写按钮如下

<div id="toolbar">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
    <a href="#" id="searchbtn" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查询</a>
    <form id="searchForm">
        <table>
            <tr>
                <th>姓名</th>
                <td>
                    <input name="username" type="text"/>
                </td>
            </tr>
        </table>
    </form>
</div>

效果图

实现查询功能

$("#searchbtn").click(function(){
    console.log("查询");
    var searchForm = $("#searchForm").serialize();
    console.log("查询条件:"+searchForm);//把这个参数用ajax发送,或者表单提交,然后刷新网格就能够实现查询
});

个人喜欢另一种方式：将数据表格和查询部分放在同一个layout中，一个是center，一个是north，north作为查询部分，一般默认会是隐藏状态的

完整的前端代码如下：


<body class="easyui-layout">
<div data-options="region:'north',title:'查询'" border="false" style="height: 100px" class="datagrid-toolbar">
    <form id="schForm" method="post">
        <table>
            <tr>
                <th>姓名</th>
                <td>
                    <input type="text" name="username"/>
                </td>
            </tr>
            <tr>
                <th>时间段</th>
                <td>
                    <input name="startTime" class="easyui-datetimebox" editable="false"/>
                    ---
                    <input name="endTime" class="easyui-datetimebox" editable="false"/>
                    <a href="#" id="schbt" class="easyui-linkbutton">查询</a>
                    <a href="#" id="rstbt" class="easyui-linkbutton">重置</a>
                </td>

            </tr>
        </table>
    </form>
</div>
<div data-options="region:'center'" fit="true" border="false">
    <table id="datagrid"></table>
</div>
</body>

//默认不显示查询条件
$("body").layout('collapse', 'north');


$("#schbt").click(function () {
    console.log("查询");

    //这个方法可以封装起来
    var v1 = $("#schForm").serialize();
    v1 = decodeURIComponent(v1, true);//解决序列化后的乱码问题
    console.log("v1:" + v1);
    var string = v1.split('&');
    var res = {};
    for (var i = 0; i < string.length; i++) {
        var str = string[i].split('=');
        console.log(str);
        res[str[0]] = str[1];
    }
    console.log(res);
    $("#datagrid").datagrid("load", res);
});

$("#rstbt").click(function () {
    console.log("重置");//将Form中的数据清空即可
})
  • 表单重置
$("#rstbt").click(function () {
    console.log("重置");//将Form中的数据清空即可

    $("#schForm :input")
        .not(':button, :submit, :reset, :hidden')
        .val('')
        .removeAttr('checked')
        .removeAttr('selected');

})

数据表格 - DataGrid - 查询的更多相关文章

  1. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  2. 向DataGrid数据表格增加查询搜索框

    向DataGrid数据表格增加查询搜索框 效果如下: js代码: $(function(){ var dg = $('#dg').datagrid({ url:"${pageContext. ...

  3. [转载]EasyUI中数据表格DataGrid添加排序功能

    我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...

  4. easyUI 数据表格datagrid的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. 解决：layUI数据表格+简单查询

    解决:layUI数据表格+简单查询 最近在用layui写项目,在做到用户查询时,发现在layui框架里只有数据表格,不能增加查询.于是自己摸索了一下,写个笔记记录一下. 我想要的效果: 1.定义查询栏 ...

  6. jquery easy ui 1.3.4 数据表格(DataGrid)（8）

    8.1.创建DataGrid html代码 <table id="dg"></table> $("#dg").datagrid({ // ...

  7. easyui框架--基础篇（一）-->数据表格datagrid（php与mysql交互）

      前  言  php  easyui框架--本篇学习主要是 easyui中的datagrid(数据表格)框架. 本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属 ...

  8. 数据表格datagrid内容整理

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. 数据表格 - DataGrid - 列表显示

    <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding=& ...

随机推荐

  1. UDS(ISO14229-2006) 汉译(No.7 应用层协议)【未完，待续】

    7.1定义 应用层协议通常作为确认消息的传输,意味着从客户端发送的每一个请求都将有由服务器端产生的与之相对的响应. 唯一的例外在于:例如使用了功能寻址方式,或者该请求/指示没有指定生成响应/确定的少数 ...

  2. Could not publish server configuration for Tomcat v6.0 Server at localhost.

    经常在使用tomcat服务器的时候 总会发生一些莫名其妙的错误. 就像下面这个错误: 在配置文件中存在多个/MyWeb的配置,导致不能发布服务. 错误信息: Could not publish ser ...

  3. 【工匠大道】markdown使用技巧

    本文地址 提纲: 1. 概述 2. 常见技巧 3. 参考文档 1. 概述 常见的markdown的技巧,这里不再谈了,主要是自己感觉比较少见但有用的技巧. 2. 常见技巧   1)[空格]生成空格的效 ...

  4. Java程序员应该知道的10个调试技巧

    试可以帮助识别和解决应用程序缺陷,在本文中,作者将使用大家常用的的开发工具Eclipse来调试Java应用程序.但这里介绍的调试方法基本都是通用的,也适用于NetBeans IDE,我们会把重点放在运 ...

  5. Lind.DDD.Repositories.Redis层介绍

    回到目录 之前已经发生了 大叔之前介绍过关于redis的文章,有缓存,队列,分布式pub/sub,数据集缓存以及仓储redis的实现等等,而今天在Lind.DDD的持久化组件里,redis当然也有一席 ...

  6. wampserver安装配置

    按步骤安装--选择指定浏览器-安装成功后显示绿色图标: 打开浏览器:将文件夹移入wampserver安装路径的www文件夹中:找到电脑IP 在手机端访问 IP/文件夹/demo.html即可

  7. Linux系统NFS网络文件系统

    Linux系统NFS网络文件系统 NFS(network file system)网络文件系统,就是通过网络让不同的主机系统之间可以共享文件或目录,此种方法NFS客户端使用挂载的方式让共享文件或目录到 ...

  8. IOS开发基础知识--碎片24

    1:兼容字体大小6plue跟它以下的区别 #define FONT_COMPATIBLE_SCREEN_OFFSET(_fontSize_) [UIFont systemFontOfSize:(_fo ...

  9. 蚂蚁金服寒泉子：JVM源码分析之临门一脚的OutOfMemoryError完全解读

    ➠更多技术干货请戳:听云博客 概述 OutOfMemoryError,说的是java.lang.OutOfMemoryError,是JDK里自带的异常,顾名思义,说的就是内存溢出,当我们的系统内存严重 ...

  10. select、poll、epoll区别总结

    1 本质上都是同步I/O 三者都是I/O复用,本质上都属于同步I/O.因为三者只是负责通知应用程序什么时候数据准备好了,实际的I/O操作还是在由应用程序处理:如果是异步I/O的话,实际I/O由内核处理 ...