使用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==========================

原文地址：https://www.cnblogs.com/zsnzsn/p/11369618.html