纯html页面怎样做成一个系统,怎样使用CCBPM做一个项目管理系统（八） - 新增Html页面和功能实现...

上述七篇文章，我们讲解了系统搭建和流程数据与业务数据的交互。

本篇文章，我们讲解一下系统页面的展示和功能实现。

需求：

通过流程新增的员工基本信息，在登录系统后可以查看详情和发起相应的流程。

新建Html页面

在web项目文件夹中，新建MyHome.htm页面，用于显示员工基础信息，并引用config.js文件。

在此级路径中新建一个处理程序，用于实现html和Handler的功能解析。

在新建的项目类库HttpHandler文件夹中，依照Html网页的路径新建一个处理类。

效果如下图所示

功能实现

页面加载时，需要展示当前登录人员的基本信息。

Html页面的js方法中，实现以下逻辑。

$(function () {

Handler_AjaxQueryData({ DoType: "Get_MyHome" }, function (data) {

if (data.indexOf("err@") != -1) {

$.messager.alert("错误", data, "icon-error");

return;

}

var ccdata = eval("(" + data + ")");

$("#sp_Name").html(ccdata[0].Name);

$("#sp_Dept").html(ccdata[0].FK_DeptText);

$("#sp_LoginNo").html(ccdata[0].LoginNo);

$("#sp_BRLXFS").html(ccdata[0].BRLXFS);

$("#sp_SFZH").html(ccdata[0].SFZH);

$("#sp_Birthday").html(ccdata[0].Birthday);

$("#sp_HJD").html(ccdata[0].HJD);

}, this);

});

JS方法中调用的Get_MyHome方法在HttpHandler/NewApp_pages.cs中实现。

///

/// 获取个人档案

///

///

public string Get_MyHome()

{

Employee ee = new Employee();

ee.RetrieveByAttr(EmployeeAttr.LoginNo, BP.Web.WebUser.No);

return BP.Tools.Json.ToJson(ee.ToDataTableField());

}

通过上述页面的搭建和功能实现，即满足了数据在前台的展示。