Easyui 用datagrid 查询数据

最新推荐文章于 2023-05-18 09:05:18 发布

凋零的老树

最新推荐文章于 2023-05-18 09:05:18 发布

阅读量2.3w

点赞数 2

分类专栏：技术

本文链接：https://blog.csdn.net/kongxiangli/article/details/25058377

版权

技术专栏收录该内容

74 篇文章 9 订阅

订阅专栏

任何系统恐怕都离不开查询，在这里简单的说一说easyui查询页面，对于高手和老鸟们可以绕开走哦哦。刚开始接触和学习的朋友，也许能有点小帮助哦。

首先整一个a.htm 没有页面哪里去写代码，当然你也可以做一个aspx页面，甚至jsp、php，效果都是一样一样的。大家没必要纠结。这里只展示前台页面的具体搞法，至于后台怎么从数据查询数据，那是另外一件事。不同的平台不同的搞法，这里不说了。

最前前面，当然是引入jquery easyui库文件

<link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css"/>  

<link rel="stylesheet" type="text/css" href="../js/themes/icon.css"/>  

<link rel="stylesheet" type="text/css" href="../js/themes/demo.css"/>

<script type="text/javascript" src="../js/EasyUI/jquery-1.8.0.min.js"></script>  

<script type="text/javascript" src="../js/EasyUI/jquery.easyui.min.js"></script>  

<script type="text/javascript" src="../js/EasyUI/easyui-lang-zh_CN.js"></script>

这个什么意思就不说了，但是也是必要的。

然后在页面的<body></body>之间加入展示数据的，也就是我们要学习使用的Easyui-datagrid

<table id="dt" class="easyui-datagrid"  data-options="title:'信息系统管理',rownumbers:true,toolbar:'#tb',fit:true,fitColumns:true,pagination:true,singleSelect:true “>  

        <thead>  

            <tr>  

                <th data-options="field:'Id',hidden:true">编号</th>  

                <th data-options="field:'mDesc',width:120">描述</th>

                <th data-options="field:'mN',width:120">数量</th> 

                <th data-options="field:'mD',width:100">日期</th>

            </tr>  

        </thead>  

    </table>

这个就是表格的四个列，其实Id这一列给隐藏了，看看估计就能明白。再怎么笨也不会比我笨。我都能看明白。表格整好了，没有数据是白扯。怎么加载数据了？

<script type="text/javascript">

    $(document).ready(function () { 

QueryData(); 

});

   

 function QueryData(){

         var p1 = $(“#q1”).val();

         var p2 = $(“#q2”). combox(‘getValue’);

         //var ajax = $.ajax({ url: “../d.ashx”,data: jQuery.param({ "p1": p1,”p2”:p2})} 

         //AJAX请求数据的过程，这里就不搞了，就是通过jquery发生AJAX请求，后台直接返回json。没有任何特殊的。

         var data ={rows:[{“Id”:1,” mDesc” :”数据测试1”,”'mN”:321,”mD”:”2013-02-12”},{“Id”:2,” mDesc” :”数据测试2”,”'mN”:221,”mD”:”2013-02-13”}],total:2};

             if (data) { $("#dt").datagrid('loadData', data); };     

};

</script>

当然，这里的data也可以通过ajax方法到后台请求数据库来查询。

这里就是表格的 data-options 的各个项分别代表，easyui 的属性基本都这样，也没什么道理，easyui就这个规则

title:表格标题

rownumbers:true 行号

toolbar:'#tb',工具条

fit:true,表格是否自适用页面大小，不太理解自己可以试一下

fitColumns:true,适用列

pagination:true,否要分页

singleSelect:true 单行选择

这个似乎太简单，easyui嘛就是这个样子，但是要把一个复杂查询页面做出来，还有很多工作可以做，后台就不说了，前端还可以增加很多查询条件

怎么增加？上面的options不是有一个这个嘛toolbar:'#tb',工具条。意思就是我们在页面再增加一个<div> 并把id设置为tb,这样easyui会自动帮你把table和div 的位置调整好。那么这个toolbar什么样了？

<div id="tb" style="padding:2px;height:auto">

                  描述:<input id="Q1" class="easyui-validatebox" style="width:80px"/> 

             bum部门:<input id="Q2" class="easyui-combobox" data-options="valueField:'Id',textField:'DeptName'" style="width:150px"/>

            <a id="btnQuery" href="#" class="easyui-linkbutton" iconCls="icon-search" οnclick="QueryData()">查询</a>  

   </div>

这个位置实际上就是输入查询，然后点查询，请求数据，其中QueryData()就是把检测查询条件，请求后台数据，并把数据绑定到easyui-datagrid 上。如果直接这么现实，页面不一定好看，具体的调整自己可以调整style

好了，一个查询基本上搞完了。个人觉得这个东西看看即可，真实现的时候还是蛮简单的。

凋零的老树

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Easyui 用datagrid 查询数据

任何系统恐怕都离不开查询，在这里简单的说一说easyui查询页面，对于高手和老鸟们可以绕开走哦哦。刚开始接触和学习的朋友，也许能有点小帮助哦。首先整一个a.htm 没有页面哪里去写代码，当然你也可以做一个aspx页面，甚至jsp、php，效果都是一样一样的。大家没必要纠结。这里只展示前台页面的具体搞法，至于后台怎么从数据查询数据，那是另外一件事。不同的平台不同的搞法，这里不说了。最
复制链接

扫一扫