Use Jquery + EasyUI to explain the development case of a framework project-share employee management source code

 

Before proceeding, let's take a look at Jquery EasyUI? JQuery EasyUI is a set of jQuery-based UI plug-ins. The goal of jQuery EasyUI is to help web developers easily create a rich and beautiful UI interface. Developers do not need to write complex javascript or have a deep understanding of css styles. Developers only need to know some simple html tags. JQuery EasyUI provides us with most UI controls, such as accordion, combobox, menu, dialog, tabs, validatebox, datagrid, window, and tree. JQuery EasyUI is a front-end ui plug-in based on JQuery. Its functions are relatively less powerful than extjs, but the pages are quite nice. Some features are sufficient for developers to use, which is lighter than extjs. Compared with ExtJs, I prefer Easy UI, that is, functions that are not available. We can also use other alternative UI components.

For more information about EasyUI, visit its official website:

First, the aspx code of the employee management UI is as follows:

<% @ 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: C Ontent ID = "Content2" ContentPlaceHolderID = "ContentPlaceHolder1" runat = "server"> <div id = "layout"> <div region = "west" iconCls = "icon-chart_organisation" split =" true "title =" Organization "style =" width: 220px; padding: 5px "collapsible =" false "> <ul id =" organizeTree "> </ul> </div> <div region =" center "title =" Employee management "iconCls =" icon-users "style =" padding: 2px; overflow: hidden "> <div id =" toolbar "> <% = base. buildToolBar Buttons () %> </div> <table id = "staffGird" toolbar = "# toolbar"> </table> </div> <script type = "text/javascript "src = ".. /Scripts/Business/StaffAdmin. js? V = 5 "> </script> </asp: Content>

<div id="toolbar"><%=base.BuildToolBarButtons()%>               </div>
The above code is the key to binding the button. The bound button is implemented through the background service code. The available functions are dynamically set based on the permissions of the current login user, the background code is as follows:
$('#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 });}});

1.2 load the list of employees under the selected organization.
To load the employee list, we select an organizational unit to load the employee list. This will not load all employee data at once, affecting the page loading efficiency. Select an organizational unit node. you can load the list of employees of the selected node and Its subnodes. Of course, this can also be adjusted according to the customer's requirements, depending on the specific needs. To load the list of employees under the selected organization, you need to bind the onClick event or onSelect event of the organization (Tree control). Here we use the onClick event. The event usage example is as follows:
$('#organizeTree').tree({onClick: function(node){alert(node.text);  // alert node text property when clicked}});
In our Organization, we load employee data by clicking the corresponding node. The Code is as follows:
onClick: function(node) {var selectedId = node.id;$('#staffGird').datagrid('load', { organizeId: selectedId });}
The code for binding the employee list is as follows:
$ ('# Staffgird '). datagrid ({url: "handler/StaffAdminHandler. ashx ", title:" employee (employee) list ", loadMsg:" loading employee (employee) data. Please wait... ", width: size. width, height: size. height, idField: 'id', singleSelect: true, striped: true, rownumbers: true, columns: [{title: 'Primary key', field: 'id', hidden: true },{ title: 'number', field: 'code', width: 100 },{ title: 'name', field: 'realname', width: 100 }, {title: 'gender', field: 'gender', width: 35, Align: 'center'}, {title: 'birthdate ', field: 'birthday', align: "center", width: 90}, {title: 'mobile phone number ', field: 'mobile', width: 120}, {title: 'Office telephony ', field: 'officephone', width: 120}, {title: 'email address', field: 'email ', width: 150}, {title: 'payby', field: 'enabled', width: 50, align: 'center', formatter: imgcheckbox}, {title: 'description', 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 );}}});
In the code bound to the above column, we have a field "valid", and we can see that different icons are bound according to the current employee's validity, the table conversion function "formatter" in the datagrid column is used here ". The imgcheckbox code is as follows:
Var imgcheckbox = function (cellvalue, options, rowObject) {return cellvalue? ' ': ' ';};
The above code completes the loading and binding of the employee Management Homepage. Next, let's take a look at the added, deleted, and modified UI logic code.
1.3 add employee information
The new employee (employee) interface is as follows:
We useEasyUI TabsTo make the entire interface clear and tidy. The UI controls such as combobox, datebox, and validatebox are also used, as shown below:
You can view the resources provided at the end of the article. Let's take a look at how to bind the combobox control, because many of the combobox controls are bound with RDIFramework. NET framework data dictionary, so it is better to bind a function to a public, so that it is convenient to call. These bindings are all page initialization operations before loading the interface. The Code is as follows:
InitData: function (organizeId) {top. $ ('# txt_Education, # txt_Degree, # txt_Title, # txt_TitleLevel, # txt_WorkingProperty, # txt_Party, # txt_Gender '). combobox ({panelHeight: 'auto'}); top. $ ('# txt_Birthday, # txt_TitleDate, # txt_WorkingDate, # txt_DimissionDate, # txt_joindate '). datebox ({formatter: function (date) {return date. getFullYear () + '-' + (date. getMonth () + 1) + '-' + date. getDate () ;}, arser: function (date) {return new Date (Date. parse (date. replace (/-/g, "/") ;}}; var _ organizeId = organizeId | 0; top. $ ('# txt_OrganizeId '). combotree ({data: organizeTree. data (), valueField: 'id', textField: 'text', value: _ organizeId}); // bind each data dictionary pubMethod. bindCategory ('txt _ Gender', 'gender'); pubMethod. bindCategory ('txt _ Education ', 'education'); pubMethod. bindCategory ('txt _ workingproperties', 'workingproperties'); pubMethod. bindCategory ('txt _ Degree ', 'destgree'); pubMethod. bindCategory ('txt _ Gender', 'gender'); pubMethod. bindCategory ('txt _ title', 'title'); pubMethod. bindCategory ('txt _ TitleLevel ', 'titlelevel'); pubMethod. bindCategory ('txt _ Nationality ', 'nationality'); pubMethod. bindCategory ('txt _ Party ', 'politicalstatus') top. $ ('# staffTab '). tabs ({onSelect: function () {top. $ ('. validatebox-tip '). remove () ;}}); top. $ ('# txt_passSalt '). val (randomString ());}
The code for binding a data dictionary is as follows:
// Public method var pubMethod = {bindCategory: function (categoryControl, categoryCode) {if (categoryControl = ''| categoryCode ='') {return;} top. $ ('#' + categoryControl ). combobox ({url: 'Les les/handler/DataItemAdminHandler. ashx? Action = GetCategory & categorycode = '+ categoryCode, method: 'get', valueField: 'itemvalue', textField: 'itemname', editable: false, panelHeight: 'auto '});}}
New
// Public variable var actionUrl = 'handler/StaffAdminHandler. ashx'; var formUrl = "Modules/html/StaffForm.htm"; AddStaff: function () {// Add employee (employee) if ($ (this ). linkbutton ('options '). disabled = true) {return;} // Function Code logic... var addDialog = top. $. hDialog ({href: formUrl + '? V = '+ Math. random (), width: 680, height: 500, title: 'add employee (employee) ', iconCls: 'icon-vcard_add', onLoad: function () {var dep = $ ('# organizeTree '). tree ('getselected'); var depID = 0; if (dep) {depID = dep. id | 0 ;}; top. $ ('# chk_Enabled '). attr ("checked", true); // If an organizational unit is selected on the left, StaffAdminMethod is selected by default for the Department. initData (depID) ;}, closed: false, submit: function () {var tab = top. $ ('# staffTab '). tabs ('getselected'); var inde X = top. $ ('# staffTab '). tabs ('gettabindex', tab); if (top. $ ('# uiform '). form ('validate') {// var query = createParam ('add', 0) + '& roles =' + top. $ ('# txt_role '). combo ('getvalues'); var vOrganizeId = top. $ ('# txt_OrganizeId '). combobox ('getvalue'); var query = 'Action = AddStaff & vOrganizeId = '+ vOrganizeId +' & '+ top. $ ('# uiform '). serialize (); $. ajaxjson (actionUrl, query, function (d) {if (d. success) {msg. OK ('Added successfully'); mygrid. reload (); addDialog. dialog ('close');} else {if (d. data =-2) {msg. error ('user name already exists. Please change the user name. '); If (index> 0) top. $ ('# staffTab '). tabs ('select', 0); top. $ ('# txt_username '). select () ;}else {MessageOrRedirect (d) ;}}) ;}else {if (index> 0) top. $ ('# staffTab '). tabs ('select', 0 );}}});}
The modification interface code is similar to the added code, except that when the modification interface is displayed, You need to bind the currently modified data. There are many binding methods, such: returned by the current row of the user's datagrid selected by the user. This is suitable for a small number of field columns. However, if there are many fields, we cannot load all the fields to the interface, generally, only some commonly used fields are displayed to the user. At this time, we can obtain the data to be modified through the primary key value or uniqueness of the selected row for binding, the staff editing interface here is the last method. The Code is as follows:
Var parm = 'Action = GetEntity & KeyId = '+ row. id; $. ajaxjson (actionUrl, parm, function (data) {if (data) {// OrganizeIdtop. $ ('# txt_Code '). val (data. code); top. $ ('# txt_RealName '). val (data. realName); top. $ ('# txt_Birthday '). datebox ('setvalue', data. birthday); top. $ ('# txt_Gender '). combobox ('setvalue', data. gender); top. $ ('# txt_Age '). val (data. age); top. $ ('# txt_Major '). val (data. major); top. $ ('# txt_School '). val (data. school); top. $ ('# txt_Education '). combobox ('setvalue', data. education); top. $ ('# txt_Degree '). combobox ('setvalue', data. degree); top. $ ('# txt_Title '). combobox ('setvalue', data. title); top. $ ('# txt_TitleLevel '). combobox ('setvalue', data. titleLevel); top. $ ('# txt_TitleDate '). datebox ('setvalue', data. titleDate);/* omitting some code... */top. $ ('# chk_Enabled '). attr ('checked', data. enabled = "1"); top. $ ('# txt_Description '). val (data. description );}});
After the modification, click OK to save the modified data, as shown below:
if (top.$('#uiform').validate().form()) {var vOrganizeId = top.$('#txt_OrganizeId').combobox('getValue');var query = 'action=EditStaff&vOrganizeId=' + vOrganizeId + '&KeyId=' + row.Id + '&' + top.$('#uiform').serialize();$.ajaxjson(actionUrl, query, function (d) {if (d.Success) {msg.ok(d.Message);editDailog.dialog('close');mygrid.reload();} else {MessageOrRedirect(d);}});}

1.4 Delete selected employees
For employee data to be deleted, we can delete it (all the deletion in the framework is logical deletion, that is, the delete mark). Currently, users are prompted before deletion, which is more friendly, as follows:
The Code is as follows:
Var row = mygrid. selectRow (); if (row! = Null) {var query = 'Action = DeleteStaff & KeyId = '+ row. id; $. messager. confirm ('inquiry prompt ', 'Are you sure you want to delete the selected employee (employee? ', Function (data) {if (data) {$. ajaxjson (actionUrl, query, function (d) {if (d. success) {msg. OK (d. message); mygrid. reload () ;}else {MessageOrRedirect (d) ;}} else {return false ;}}) ;}else {msg. warning ('select the operation permission to delete! '); Return false ;}
The general process of the employee management background is as follows:

Use RDIFramework. the Staff Management Service Interface provided by. NET can not only add, modify, delete, and move employees, but also obtain employee data by PAGE and employee list by organization, you can also set the ing between employees and users and directly call the corresponding service interface, which is very convenient.
Part 2: Related Resource Sharing
 
1. A. NET-based integrated framework for rapid information system development-RDIFramework. NET-system directory
2. Official Jquery EasyUI website
3. Jquery learning Official Website
4. Jquery EasyUI local instance file (if the official website is too slow, you can download this file)
5. Download Jquery's authoritative guide
6. Jquery authoritative guide for source code download
7. Download the Chinese text. chm File of Jquery EasyUI 1.3
8. JavaScript authoritative guide (Sixth Edition) Chinese version (strongly recommended) online viewing

Part 3: Discussion
Recommendation