Easyui 用datagrid 查询数据

来源:互联网 发布:网络赚钱项目有哪些 编辑:程序博客网 时间:2024/03/29 13:29

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

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

  最前前面,当然是引入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会自动帮你把tablediv的位置调整好。那么这个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" onclick="QueryData()">查询</a>     </div>


 

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

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

2 0
原创粉丝点击