Use Jquery+easyui for a framework project development case explanation one of the---employee Management source code sharing

Use Jquery+easyui Development of framework projects One of the cases explained

Employee Management source code sharing

Before we start the commentary, let's take a look at what is jquery Easyui? The jquery Easyui is a set of jquery-based UI plug-ins, and the goal of jquery Easyui is to make it easier for web developers to create a feature-rich and beautiful UI interface. Developers don't need to write complex JavaScript or have a deep understanding of CSS styles, and developers need to know just a few simple HTML tags. JQuery Easyui provides us with the use of most UI controls, such as Accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree, and so on. jquery Easyui is a plugin based on the UI interface of jquery, which is relatively not extjs powerful, but the page is also pretty good. Some features are also sufficient for developers to use, with a lighter weight relative to ExtJS. Relative to ExtJS, I prefer the easy UI, which is not a feature, and we can also replace it with other alternative UI components.

To know a lot of other information about Easyui, can go to its official website to see, the address is:

http://www.jeasyui.com/index.php

Part I: Employee Management source Code commentary

staff (staff) management is mainly for the group, enterprises and internal staff management. What is the relationship between having a user management in the later chapters? Employees include all staff of the current enterprises and institutions (such as security, cleaners, etc.), these employees do not necessarily have to log into the system to do the corresponding business operations, and users are able to log on to the system to operate the system users. Assuming an employee is also able to log in, then we can no longer need to add a user information, the ability to map directly to the current employee (staff) mapping to the user. Employee (staff) management includes actions such as adding, editing, deleting, leaving, exporting, and importing employee information. In the framework main interface navigation area, select "Employee Management" to enter the employee management main interface, for example, as seen in:

can see that the entire interface in addition to the left side of the navigation area, the right of the work area is divided into two parts, tree-type organization navigation and employee list display. function is divided into add, change delete and so on. Let's look at how to implement the above features.

The first is the employee-managed UI interface for ASPX code such as the following:

<%@ 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= "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. Buildtoolbarbuttons ()%> </div> <table id= "Staffgird" toolbar= "#to Olbar "></table> </div> </div> <script type=" Text/javascript "src=". /scripts/business/staffadmin.js?v=5 "></script></asp:Content>

Note that in the above code, we want to refer to the JS file of the interface business logic, for example the following:

<script type= "Text/javascript" src= ". /scripts/business/staffadmin.js?v=5 "></script>

the Employee-Managed feature button is dynamically provisioned for availability based on the permissions that the current user has, and can be set to either visible or invisible. For example, in the ASPX interface code above, there is the following piece of code:

<div id= "Toolbar" ><%=base. Buildtoolbarbuttons ()%>               </div>

The above code is the key to our binding button, the binding button, through the background service code to implement, according to the current login user has permissions, dynamically set its available functions, background code such as the following:

In the Staffadmin.js code, the Employee Management workspace is first loaded into the left-hand list of organizations (using the easy UI's tree control) and the employee list on the right (the DataGrid control using the Easy UI).

1.1. Load the organization tree list.

$ (' #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 in the selected organization.

To load the employee list, we are loading it by selecting the appropriate organization, so that we do not load all the employee data in a row, affecting the loading efficiency of the page. Select an organization node that should be able to load the list of employees owned by the currently selected node and its child nodes. Of course, this can also be based on customer requirements for the corresponding adjustment, detailed real demand. We will be able to load the list of employees under the selected organization, either the onclick event or the Onselect event that binds the organization (the tree control), where we use the OnClick event, which uses the event ratio as follows:

$ (' #organizeTree '). Tree ({onclick:function (node) {alert (node.text);  Alert node Text property when Clicked}});

In our organization, we load the corresponding employee data by clicking on the corresponding node, code such as the following:

Onclick:function (node) {var selectedid = node.id;$ (' #staffGird '). DataGrid (' Load ', {organizeid:selectedid});}

The code that binds the employee list is as follows:

$ (' #staffGird '). DataGrid ({URL: "Handler/staffadminhandler.ashx", Title: "Employee (staff) List", Loadmsg: "Loading employee (staff) 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 ', Widt  h:100},{title: ' Gender ', field: ' Gender ', width:35, align: ' center '},{title: ' Date of birth ', field: ' Birthday ', align: ' center ', Width:90},{title: ' Mobile phone number ', field: ' Mobile ', width:120},{title: ' Office phone ', field: ' Officephone ', width:120},{title: ' Email address ', field: ' Email ', width:150},{title: ' Effective ', field: ' Enabled ', width:50, align: ' center ', Formatter:imgcheckbox}, {title: ' Descriptive Narrative ', field: ' Description ', width:260},{title: ' UserID ', field: ' UserID ', Hidden:true}]],rowstyler:functi On (index, row, CSS) {if (row. UserId = "") {return ' font-weight:bold; ';}},onloadsuccess:function (data) {if (Data.rows.length > 0) {$ (' #staffGird ' ). DataGrid ("SelectRow", 0);}}); 

In the column binding code above, we have a field "valid" column, we can see that according to the current employee validity, a different icon is bound, here using the DataGrid column Table conversion function "formatter". For the Imgcheckbox code such as the following:

var imgcheckbox = function (Cellvalue, options, Rowobject) {    return cellvalue? '  ': '  ‘;};

The above code, we're done. The onboarding bindings for the Employee Management home page. Let's take a look at this and change the UI logic code.

1.3 New Employee information

The new employee (staff) interface is as follows:

Because the Staff data column information more, we use the Easyui Tabs for layout, make the whole interface relatively clear and tidy. UI controls such as ComboBox, Datebox, Validatebox, and so on are also used at the same time, as seen in the following:

Detailed control usage enables you to view the corresponding resources provided at the end of the article. Let's take a look at how to bind the ComboBox control, because we have a lot of bindings for the ComboBox control here that provide the data dictionary portion of the rdiframework.net framework, so the binding function is better to make a public one, so it's convenient to call. These bindings are the page initialization operations that are performed in front of the onboarding bounds, such as the following code:

 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_JoinInDate '). 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 ');p ubmethod.bindcategory (' txt_education ', ' Education ');p ubmethod.bindcategory (' Txt_workingproperty ', ' Workingproperty ');p ubmethod.bindcategory (' Txt_Degree ', ' degree ');p ubmethod.bindcategory (' Txt_gender ', ' Gender ');p ubmethod.bindcategory (' txt_title ', ' Title '); Pubmethod.bindcategory (' Txt_titlelevel ', ' titlelevel ');p UBMETHOD.BINDCATegory (' txt_nationality ', ' nationality ');p ubmethod.bindcategory (' Txt_party ', ' Politicalstatus ') top.$ (' #staffTab ') ). Tabs ({onselect:function () {top.$ ('. Validatebox-tip '). Remove ();}}); top.$ (' #txt_passSalt '). Val (RandomString ());}

The code for the bound data dictionary is as follows:

Public method var Pubmethod = {    bindcategory:function (categorycontrol,categorycode) {        if (Categorycontrol = = "| | Categorycode = = ")        {            return;        }        top.$ (' # ' + Categorycontrol). ComboBox ({            URL: ' modules/handler/dataitemadminhandler.ashx?action=getcategory &categorycode= ' + Categorycode,            method: ' Get ',            Valuefield: ' Itemvalue ',            textField: ' ItemName ',            Editable:false,            panelheight: ' Auto '        });}    }

Newthe code for adding employees is as follows:

The public variable var actionurl = ' handler/staffadminhandler.ashx '; var formurl = "modules/html/staffform.htm"; Addstaff:function () {//Add employee (staff) if ($ (this). LinkButton (' Options '). Disabled = = true) {return;} Function code logic ... var adddialog = Top.$.hdialog ({href:formurl + '? v= ' + math.random (), Width:680,height:500,title: ' New Employee (staff) ', Iconcls: ' Icon-vcard_add ', onload:function () {var dep = $ (' #organizeTree '). Tree (' getselected '); var depid = 0;if (dep) {de PID = Dep.id | | 0;}; top.$ (' #chk_Enabled '). attr ("Checked", true);//If there is a selected organization on the left side, the department will select Staffadminmethod.initdata (depid) By default when joining, Closed:false,submit:function () {var tab = top.$ (' #staffTab '). Tabs (' getselected '); var index = 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 (' join success '); Mygrid.reload (); Adddialog.dialog (' Close ');} else {if (D.data = =-2) {Msg.error (' username already exists, please change username. The IF (Index > 0) top.$ (' #staffTab '). Tabs (' select ', 0); top.$ (' #txt_username '). Select (); else {messageorredirect (d);}});} else {if (Index > 0) top.$ (' #staffTab '). Tabs (' select ', 0);}});}

Change the interface code is similar to the added code, just to change the interface in the popup, to bind the current changes in the data, binding method has a very wide range, such as: through the user selection of the current user DataGrid current row returned, so for the field column is more suitable, but suppose the field is more, It is not possible to load all the fields into the interface, usually only to display some of the more frequently used fields to the user, when we are able to get the data to be changed by the primary key value or uniqueness of the currently selected row, the employee editing interface here is the latter way, the code as seen below:

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);/* Omit part of the code ... */top.$ (' #chk_Enabled '). attr (' checked ', data. Enabled = = "1"), top.$ (' #txt_Description '). Val (data. Description);});

Once you've changed, click OK to save the data you're currently changing, such as the following:

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 the selected employee

For the employee data that needs to be deleted, we can delete it (the deletion in the frame is all tombstone, that is, the deletion flag), at present, prompt the user before deleting, so it is more friendly, such as the following:

Use Jquery+easyui for a framework project development case explanation one of the---employee Management source code sharing