The framework for using Jquery+easyui project development is a mid-rating---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 do not need to write complex JavaScript, nor do they need to have a deep understanding of CSS styles. 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 extjs powerful. But the page is also pretty good. Some features are also sufficient for developers to use. Light 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.

Learn 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 the staff of the current enterprises and institutions (such as security, cleaning staff, etc.). These employees do not necessarily have to log on to the system to do the corresponding business operations. The user is the system consumer who is able to log in to the system for operation. Assuming that an employee is also able to log in, we can no longer need to add a user information to it. Mapping the current employee (staff) to a user can be done directly by mapping it. 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. The entire interface, in addition to the left navigation, has two sections on the right side of the workspace. Tree-based 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>

attention. 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 features, 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 that can see a different icon bound to the current employee's validity, using the table conversion function "Formatter" of the DataGrid column. 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 Employee data column information is more. We used the Easyui Tabs for layout. Make the whole interface more 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. How to bind a ComboBox control because we have a lot of bindings for the ComboBox control here are the data dictionary parts that provide the rdiframework.net framework. So the binding function is better than a common 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);//Assume that the left side has a selected organizational structure. When joined, the department defaults to Staffadminmethod.initdata (depid),},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 the 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);}});}

The change interface code is similar to the code added, just to change the interface when it pops up. To bind data that is currently being changed, there are many binding methods. For example: The current user selected by the DataGrid is currently on the row returned. This is more appropriate for the field columns. But assuming that there are more fields, it is not possible to load all the fields into the interface. It is generally just to display some of the more frequently used fields to the user. At this point we are able to bind the data to be changed by the primary key value or uniqueness of the currently selected row, and the employee editing interface here is the latter way, as seen in the following code:

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);});

After the change. Click OK to save the currently changed data, as seen in 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 employee data that needs to be deleted. We were able to delete it (the deletion in the frame is all a tombstone, that is, the delete flag). Currently, the user is prompted before deletion, which is more friendly, such as the following:

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvy2hpbmfodxlvbmc=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/southeast "/>

The framework for using Jquery+easyui project development is a mid-rating---Employee Management source code sharing