第五节 - easyUI的基本使用1. 列表组件 datagrid 2. 按钮组件 linkbutton3.右下角弹窗组件 $.messager

1. 列表组件 datagrid

1.1 创建一个grid.html

<html>
    
    <head>
        <meta charset="utf-8" />
        
    
    </head>
    
    <body>
    
    </body>


</html>

1.2 引入easyUI的资源文件

<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/validate.js"></script>

1.3 绘制表格组件

Html:

<table id='grid0' title="部门管理01"  class="easyui-datagrid" 
fitColumn="true" pagination="true" 
rownumbers="true" url="xxx.php" fit="false" toolbar="#toolbar">

 </table>

效果:

1.1 编写后台程序,查询部门数据

在当前文件夹,新建一个dept.php

进行数据库连接测试

查询部门表数据,json格式返回:

1.5 分页查询

如果我们想要做分页,就需要给datagrid传递两个参数,分别为total和rows,total代表这个表的查询总数,rows代表分页后查出来的数据。

分页规律:

现在,首先考虑如何在php文件中获取第几页和每页多少条? 在datagrid组件中,只要你设置了分页,就会给后台传递page和rows,分别对应第几页和每页多少条。

代码:

//查询部门表中的数据
    
    $resultset = mysql_query("select * from tm_dept where 1=1 limit $start,$rows") or die(mysql_error());
    
    
    
    $list = array();
    $count = 0;
    
    while($row = mysql_fetch_array($resultset)){
        
        $list[$count++] = $row;
    }
    
    
    $data = array();
    
    $data["rows"] = $list;
    
    
    $resultset = mysql_query("select count(*) as total from tm_dept") or die(mysql_error());
    
    while($row = mysql_fetch_array($resultset)){
        
        $data["total"] = $row["total"];
    }
    
    
    echo json_encode($data);

2. 按钮组件 linkbutton

渲染按钮的方法,给一个a标签加上class为easyui-linkbutton 即可。

例子:

<a href="javascript:openUserAddPage()" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增用户</a>

3.右下角弹窗组件 $.messager

下载地址:https://pan.baidu.com/s/1OXvqQwAmz7usgD4KqiUXLw

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黑泽君的专栏

day49_BOS项目_01

其余步骤参考如下链接: https://www.cnblogs.com/chenmingjun/p/9513143.html#_label0 右键项目 -->...

1052
来自专栏腾讯AlloyTeam的专栏

Node 直出理论与实践总结

直出是什么?到底是怎样的性能优化?本文将结合从在浏览器输入url,到展示最终页面的过程来对其进行一步步分析,并将在手Q web 中的实际应用实践进行总结。

8160
来自专栏jianhuicode

学问Chat UI(4)

前言 写这个组件是在几个月前,那时候是因为老大讲RN项目APP的通讯聊天部分后面有可能自己实现,让我那时候尝试着搞下Android通讯聊天UI实现的部分,在这...

2105
来自专栏蘑菇先生的技术笔记

Windows10自适应和交互式toast通知[1]

2726
来自专栏IMWeb前端团队

一个行为标准Popup组件(vue), 强大的过度动画支持

前言 之前看过很多的组件库, 但是它们的Popup行为和原生的界面差别不大, 但是行为上面却各种小细节不足, 所以有了这个强调行为标准的popup组件 特点 支...

2038
来自专栏ionic3+

【开发指南】(四)Ionic3快速上手并了解这些

Ionic这几个网站是需要经常看的,应该了解过才执行后面步骤,其中强烈要求至少先撸一遍官网的组件和API文档。

802
来自专栏DeveWork

WordPress 添加个性化的博客宠物(妹纸篇)

某日闲逛看到的某个博客上的一个博客宠物,准确来说不是宠物,人家可是萌妹纸啊!看看右侧这个图,就是这个萌妹纸了(后来用谷歌相似图片搜索才发现是死亡笔记的)。让我感...

2655
来自专栏九彩拼盘的叨叨叨

CSS hack总结

有时,我们为了让一些外观在不同浏览器中做保持一致。就不得不用css hack。下面是常用的css hack。

872
来自专栏iOS Developer

Bison教你3分钟集成支付宝好友分享

1472
来自专栏丑胖侠

Win10系统,Intellij IDEA快捷键冲突

前两天系统盘损坏,升级到了Win10系统,重新装了软件,导致Intellij IDEA的快捷键各种冲突。本篇博客记录一下发型冲突的地方及修改方法。 冲突一 Ct...

32210

扫码关注云+社区

领取腾讯云代金券