使用PHP开发HR系统（5）

本节讲述如何拆分页面以及使用jquery和ajax实现局部刷新。

==================================================================================================

从我们的页面来看，左边的菜单是不变的，右边的内容区根据不同的菜单来变化，我们就想到是否可以只针对

右边做局部刷新呢，可以使用ajax技术来完成。

1 拆分主页

我们把页面结构分成四块区域：1、页面上端Top区域；2、页面左侧Menu区域；3、页面中部区域；4、页面底端footer区域；

根据这种划分，我们把main_list拆分成top，menu，footer，并把页面head也单独出来，具体参见以下步骤：

1）在view目录下创建container.php代替main_list.php文件

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

<!DOCTYPE html>

<?php $this->load->view('templates/header'); ?>

<?php $this->load->view('templates/top'); ?>

<?php $this->load->view('templates/menu'); ?>

<?php $this->load->view('main'); ?>

</div>

<?php $this->load->view('templates/footer'); ?>

</body>

</html>

通过改造，我们的主页代码看起来就很简洁了，其中用到了几个文件：

i)header.php（view->templates目录下），用来存放页面head块代码：

<head>

<title>Software Service Manager System</title>

</head>

ii)top.php（view->templates目录下），用来存放页面top区域的内容：

</div>

<img src="<?php echo base_url('assets/img/logo.png')?>" alt="Metro Lab" />

</a>

<!-- <a class="btn btn-navbar collapsed" id="main_menu_trigger" data-toggle="collapse" data-target=".nav-collapse">

</a>-->

</div>

</a>

</li>

</a>

</li>

</a>

<li>

<a href="#">Swing</a></li>

<li>

</ul>

</li>

</ul>

</div>

iii)menu.php（view->templates目录下），用来存放页面menu块代码：

</form>

</div>

</a>

</li>

<span>人力资源规划</span>

</a>

</li>

<span>招聘与配置</span>

</a>

</ul>

</li>

<span>培训与开发</span>

</a>

</li>

</a>

</li>

<span>薪酬福利管理</span>

</a>

</li>

<span>劳动关系管理</span>

</a>

</li>

</a>

</li>

</a>

</ul>

</li>

</div>

iV)footer.php（view->templates目录下），用来存放页面footer块代码：

2018 © MetroAdmin.

</div>

<!--[if lt IE 9]>

<![endif]-->

V)main.php（view目录下），用来存放页面主页面内容区代码：

</h3>

<li>

</li>

</div>

</form>

</li>

</ul>

</div>

<div class="status">在职人员总数</div>

</a>

</div>

<div class="status">待招聘人数</div>

</a>

</div>

<div class="status">本月入职人数</div>

</a>

</div>

<div class="status">本月离职人数</div>

</a>

</div>

<div class="status">本月待招聘人数</div>

</a>

</div>

<div class="status">本年薪酬福利</div>

</a>

</div>

<div class="status">本月薪酬福利</div>

</a>

</div>

</div>

</div>

2)目前我们的工程结构如下

2、修改controllers->Main.php文件

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Main extends CI_Controller {

public function __construct(){

parent::__construct();

$this->load->helper('url_helper');

}

public function index()

{

$this->load->view('container');

}

3 ajax的应用

为了实现局部刷新，我们引入了ajax来实现；

1）在footer.php文件中增加以下内容

$(document).ready(function(){

$(".sub1").click(function(){

$.ajax({url:"<?php echo site_url('Employee/index')?>",success:function(result){

$("#main-content").html(result);

}});

});

</script>

其中，sub1是与menu.php中的"职员信息"菜单对应的。

3 运行测试

运行主页如下；

点"职员信息"菜单，页面如下

总结：

本文首先拆分了主页，使得模块更加独立，页面代码也更清晰，同时使用ajax技术，实现了页面的局部刷新；

====================================The End==========================

使用PHP开发HR系统（5）的更多相关文章

使用PHP开发HR系统（4）
本节我们讲述如何引入页面框架来建立漂亮的主页. ============================================================================ ...
使用PHP开发HR系统（3）
本节我们讲述如何创建主页. ====================================================================================== ...
使用PHP开发HR系统（6）
本节讲述如何连接Postgre数据库并查询与显示数据. ==================================================================== ...
使用PHP开发HR系统（1）
本文通过笔者的实践,讲述如何以PHP+CI+Postgres构建一套人力资源管理系统. ======================================================== ...
使用PHP开发HR系统（2）
本节讲述如何创建基于CI框架的PHP程序. ============================================================================== ...
利用微软Speech SDK 5.1开发语音识别系统主要步骤
利用微软Speech SDK 5.1开发语音识别系统主要步骤 2009-09-17 10:21:09| 分类: 知识点滴|字号订阅微软语音识别分两种模式:文本识别模式和命令识别模式.此两种模式的 ...
HR系统+人脸识别
近期一直在写一套HR系统,这套HR系统和人脸识别相结合.全然杜绝取代刷卡的情况产生.系统的灵活性比較强,开发简洁高速. 例如以下是一些功能上的截图考勤模块仅仅是列举当中一个请假申请的功能做为展示 ...
HR系统邮件审批功能总结
时至今日,来兰亭工作的第三个小任务算是暂时告一段落了.这个小任务是耗费时间最长的,因此在这里总结整理一下. 首先这个功能的出发点是方法领导进行手下员工的审批,包括加班申请,休假申请,和漏打卡申请.由于 ...
二十九、EFW框架开发的系统支持SaaS模式和实现思路
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...

随机推荐

【批处理】for命令
for 命令学习:https://www.cnblogs.com/Braveliu/p/5081087.html FOR这条命令基本上都被用来处理文本,但还有其他一些好用的功能! 看看他的基本格式( ...
Web前端鼠标悬停实现显示与隐藏效果
css定义,偏移量,相对定位,绝对定位显示与隐藏二维码相对于微信图标定位鼠标悬停微信图标上显示鼠标离开微信图标时隐藏什么是定位,就是定义网页标签在运行时显示的位置 css提供Position ...
CTF CMS（转）
CTF--CMS漏洞总结海洋CMS 6.28 海洋CMS6.28命令执行漏洞 6.45-6.54 漏洞预警 | 海洋CMS(SEACMS)0day漏洞预警 8.8(未验证) 海洋cms前台到后台的g ...
cesium常用设置【转】
https://blog.csdn.net/D_Walker/article/details/82188514 1.加载线上cesium代码<link href="http://ces ...
Unity3D特效入门教学视频教程合集
目录大小25GB,Mp4格式,语言:中文扫码时备注或说明中留下邮箱付款后如未回复请至https://shop135452397.taobao.com/ 联系店主
Calcite分析 - RelTrait
RelTrait 表示RelNode的物理属性由RelTraitDef代表RelTrait的类型 /** * RelTrait represents the manifestation of a r ...
搭建高可用rabbitmq集群及spring boot实现集群配置
java spring boot配置: //具体参看了配置的源码 org.springframework.boot.autoconfigure.amqp.RabbitProperties //Rabb ...
【NumPy】之常见运算（np.around、np.floor、np.ceil、np.where）
aroundnp.around 返回四舍五入后的值,可指定精度. around(a, decimals=0, out=None) a 输入数组 decimals 要舍入的小数位数. 默认值为0. 如果 ...
Angularjs 标签使用整理
持续更新..... 一.select setmealList为接收到的集合数据,sname 是要显示的字段,Object属性套餐类型:<select style="width: 15 ...
vue mpvue 上拉加载更多示例代码
vue 上拉加载更多示例代码可以比较简单的改为 mpvue , 去除滚动判断,直接放在 onReachBottom 周期即可. html <div id="app"> ...

使用PHP开发HR系统（5）

使用PHP开发HR系统（5）的更多相关文章

随机推荐

热门专题