首页 > 作文

使用PHP开发HR系统（5）

更新时间:2023-04-07 12:54:29 阅读：评论：0

本节讲述如何拆分页面以及使用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(‘bapath’) or exit(‘no direct script access allowed’);

<!doctype html>

<!–[if ie 8]> <html lang=”en” class=”ie8″> <![endif]–>

<!–[if ie 9]> <html lang=”en” class=”ie9″> <![endif]–>

<!–[if !ie]><!–>

<?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 rvice manager system</title>

<!–<link rel=”stylesheet” href=”http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css”/>–>

<!–<link href=”https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css” rel=”stylesheet”>–>

</head>

<!–end head–>

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

<!– begin top –>

<!– begin top navigation bar –>

</div>

<!–end sidebar toggle–>

<!– begin logo –>

<img src=”<?php echo ba_url(‘asts/img/logo.png’)?>” alt=”metro lab” />

</a>

<!– begin responsive menu toggler –>

<!– <a class=”btn btn-navbar collapd” id=”main_menu_trigger” data-toggle=”collap” data-target=”.nav-collap”>

</a>–>

<!– begin notification –>

</div>

<!– begin support –>

</a>

</li>

</a>

</li>

<!– end support –>

<!– begin ur login dropdown –>

</a>

<li>

<a href=”#”>swing</a></li>

<li>

</ul>

</li>

<!– end ur login dropdown –>

</ul>

<!– end top navigation menu –>

</div>

<!– end top –>

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

<!– begin responsive quick arch form –>

</form>

</div>

<!– end responsive quick arch form –>

<!– begin sidebar menu –>

</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>

<!– end sidebar menu –>

</div>

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

<!– begin footer –>

2018 © metroadmin.

</div>

<!– begin javascripts –>

<!– load javascripts at bottom, this will reduce page load time –>

<!–<script src=”https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js”></script>–>

<!– ie8 fixes –>

<!–[if lt ie 9]>

<![endif]–>

<!–common script for all pages–>

<!–script for this page only–>

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

<!– begin page header–>

<!– begin page title & breadcrumb–>

</h3>

<li>

</li>

</div>

</form>

</li>

</ul>

<!– end page title & breadcrumb–>

</div>

<!– end page header–>

<!– begin page content–>

<!–begin metro states–>

<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>

<!–end metro states–>

</div>

<!– end page content–>

</div>

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

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

<?php

defined(‘bapath’) 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==========================

本文发布于:2023-04-07 12:54:23，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/401887e12ea038eebda181c9eba10031.html

本文word下载地址：使用PHP开发HR系统（5）.doc

本文 PDF 下载地址：使用PHP开发HR系统（5）.pdf

上一篇：河北公布开学时间小学幼儿园特殊教育学校开学时间另行安排

下一篇：返回列表

标签：微软页面区域代码

留言与评论（共有 0 条评论）