php增删改查实例第五节 - easyUI的基本使用

Posted 分享创造快乐,技术成就梦想

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了php增删改查实例第五节 - easyUI的基本使用相关的知识,希望对你有一定的参考价值。

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







以上是关于php增删改查实例第五节 - easyUI的基本使用的主要内容,如果未能解决你的问题,请参考以下文章

php增删改查实例第七节 - 部门管理模块(画一个datagrid表格)

php增删改查实例第二十节 - 把用户管理页面集成到main.php中

php增删改查实例第十七节 - 用户登录

php增删改查实例第一节 - PHP开发环境配置

php增删改查实例第十八节 - login.php编写

php增删改查实例第二十三节 - PHP文件上传