当前位置: 乐呵网 > js学习网 > JavaScript教程 >

使用Jquery+EasyUI进行框架项目开发案例讲解之一

时间:2016-10-19 12:11来源:乐呵网提供 作者:乐呵网 点击:
使用Bomb云端服务器模拟简单的注册登录逻辑

首先是员工管理的UI界面aspx代码如下:

<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="StaffAdmin.aspx.cs" Inherits="RDIFramework.WebApp.Modules.StaffAdmin" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <style type="text/css"> div#navigation{background:white} div#wrapper{float:right;width:100%;margin-left:-185px} div#content{margin-left:185px} div#navigation{float:left;width:180px} </style> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <div id="layout"> <div region="west" iconCls="icon-chart_organisation" split="true" title="组织机构" style="width:220px;padding: 5px" collapsible="false"> <ul id="organizeTree"></ul> </div> <div region="center" title="员工管理" iconCls="icon-users" style="padding: 2px; overflow: hidden"> <div id="toolbar"> <%=base.BuildToolBarButtons()%> </div> <table id="staffGird" toolbar="#toolbar"></table> </div> </div> <script type="text/javascript" src="../Scripts/Business/StaffAdmin.js?v=5"></script> </asp:Content>

<div id="toolbar"> <%=base.BuildToolBarButtons()%> </div>

$('#organizeTree').tree({ lines: true, url: 'handler/OrganizeAdminHander.ashx?action=treedata', animate: true, onLoadSuccess:function(node,data) { $('body').data('depData', data); },onClick: function(node) { var selectedId = node.id; $('#staffGird').datagrid('load', { organizeId: selectedId }); } });
$('#organizeTree').tree({ onClick: function(node){ alert(node.text); // alert node text property when clicked } }); 在我们的组织机构事中,我们通过单击相应节点,加载相应的员工数据,代码如下:onClick: function(node) { var selectedId = node.id; $('#staffGird').datagrid('load', { organizeId: selectedId }); }绑定员工列表的代码如下:$('#staffGird').datagrid({ url: "handler/StaffAdminHandler.ashx", title: "员工(职员)列表", loadMsg: "正在加载员工(职员)数据,请稍等...", width: size.width, height: size.height, idField: 'Id', singleSelect: true, striped: true, rownumbers: true, columns: [[ { title: '主键', field: 'Id', hidden: true }, { title: '编号', field: 'Code', width: 100 }, { title: '姓名', field: 'RealName', width: 100 }, { title: '性别', field: 'Gender', width: 35, align: 'center' }, { title: '出生日期', field: 'Birthday', align: "center", width: 90 }, { title: '手机号码', field: 'Mobile', width: 120 }, { title: '办公电话', field: 'OfficePhone', width: 120 }, { title: '邮箱地址', field: 'Email', width: 150 }, { title: '有效', field: 'Enabled', width: 50, align: 'center', formatter: imgcheckbox }, { title: '描述', field: 'Description', width: 260 }, { title: 'UserId', field: 'UserId', hidden: true } ]], rowStyler: function (index, row, css) { if (row.UserId != "") { return 'font-weight:bold;'; } }, onLoadSuccess: function (data) { if (data.rows.length > 0) { $('#staffGird').datagrid("selectRow", 0); } } });在上面的列绑定代码中,我们有一个字段“有效”列,可以看到根据当前员工有效性,绑定了不同的图标,这儿使用了datagrid列的表格转换函数“formatter”。对于的imgcheckbox代码如下:var imgcheckbox = function (cellvalue, options, rowObject) { return cellvalue ? '<img src="/css/icon/ok.png" alt="正常" title="正常" />' : '<img src="/css/icon/stop.png" alt="禁用" title="禁用" />'; };上面的代码,我们就完成了员工管理主页面的加载绑定。下面我们来看一下,增删改相关UI逻辑代码。

1.3 新增员工信息

新增员工(职员)界面如下:

由于员工数据列信息较多,我们采用了easyUI Tabs进行布局,使得整个界面比较清晰整洁。同时还使用了combobox、datebox、validatebox等UI控件,如下所示:

 




(责任编辑:admin)
------分隔线----------------------------
栏目列表
推荐内容