Easyui 用datagrid 查询数据
来源:互联网 发布:网络赚钱项目有哪些 编辑:程序博客网 时间:2024/03/29 13:29
任何系统恐怕都离不开查询,在这里简单的说一说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" onclick="QueryData()">查询</a> </div>
这个位置实际上就是输入查询,然后点查询,请求数据,其中QueryData()就是把检测查询条件,请求后台数据,并把数据绑定到easyui-datagrid上。如果直接这么现实,页面不一定好看,具体的调整自己可以调整style
好了,一个查询基本上搞完了。个人觉得这个东西看看即可,真实现的时候还是蛮简单的。
- Easyui 用datagrid 查询数据
- easyui datagrid数据查询
- easyui datagrid数据模糊查询
- jQuery easyui datagrid动态查询数据
- easyui datagrid 数据的显示和查询
- 初学EasyUI datagrid:如何用datagrid进行数据的查询
- EasyUI datagrid分页查询
- easyUI datagrid 查询方法
- easyui datagrid 查询 分页
- struts2和Jquery EasyUI整合数据查询(DataGrid)
- struts2跟Jquery EasyUI整合数据查询(DataGrid) 1
- easyui-datagrid未查询到数据时控件扩展
- jQuery easyUi 数据表格DataGrid 分页查询及常见问题解析
- easyUI 数据表格-datagrid
- easyui datagrid 数据汇总
- easyUI-datagrid + 假数据
- EasyUI Datagrid 数据网格
- datagrid easyui列表数据
- oracle 聚簇表
- 隐藏在背后的交互设计
- herf js 提示
- Leetcode_Rotate Image
- rosserial_embeddedlinux编译
- Easyui 用datagrid 查询数据
- 链表《5》使用链表实现学生成绩管理系统
- javascript jquery基本用法 增删改查
- 测试类型和说明
- 怎么利用wireshark人为制造丢包情况
- 如何使用google的日志库(glog)
- 如何恢复工作中清除的照片
- Java 学习笔记之 ByteBuffer
- 浅析JAVA设计模式之代理模式(四)