使用JqueryEasyUI進行框架項目開發(fā)案例講解之一用戶管理源碼分享

1、在開始講解之前，我們先來看一下什么是jquery easyui? jquery easyui 是一組基于jquery的ui插件集合，而jquery easyui的冃標就是幫助web開 發(fā)者更輕松的打造出功能豐富并且美觀的ui界面。開發(fā)者不需要編寫復雜的 javascript,也不需要對css樣式有深入的了解，開發(fā)者需要了解的只有一些簡單 的html標簽ojquery easyui為我們提供了大多數(shù)ui控件的使用，如:accordion, combobox, menu, dialog, tabs, validatebox, datagrid, window, tree 等等ojquery eas

2、yui是基于jquery的一個前臺ui界面的插件，功能相對沒extjs 強大，但頁面也是相當好看的。一些功能也足夠開發(fā)者使用，相對于extjs更輕量。 相對extjs,我更喜歡easyui,即是沒有的功能，我們也可以使用其他替代的ui界面組件代替。員工（職員）管理主要是對集團、企事業(yè)內(nèi)部員工進行管理。在4.5章節(jié)可以 看到有一個用戶管理，這兩者有什么關(guān)系呢？員工包含當前企事業(yè)單位的所有職員 （如保安、保潔員等），這些員工不一定都需要登錄到系統(tǒng)屮做相應的業(yè)務操作， 而用戶則是可以登錄到系統(tǒng)中進行操作的系統(tǒng)使用者。如果某個職員也可以進行登 錄，那么我們可以不必耍再為其加一條用戶信息，可以直接做個映

3、射即可把當前員 工（職員）映射為用戶。員工（職員）管理包括員工的新增、編輯、刪除、離職處 理、導出、導入員工信息等操作。在框架主界面導航區(qū)選擇''員工管理進入員工管 理主界而，如下圖所示：firefox :. © .net趣信息化慈開發(fā)®g(rdifrx +rdiframework.netmt.net的快速信息化系統(tǒng)開發(fā).整合框架.rapid information system framework based on .net歡迎使用員工管埋員工営理用戶官理sk鬲色管理組織機枸管理橫塊管理：用戶權(quán)顒管理r角色權(quán)備管理曰曰華思科技 日臼上海分公司 回總裁辦公室

4、回仁j質(zhì)里管理本部 匡1質(zhì)輕謹即 國工程管連部 眉質(zhì)重榆則部 曰日系統(tǒng)開發(fā)部 園第一事業(yè)部 過第二事業(yè)祁 第三事業(yè)祁 回第四事業(yè)即 £技術(shù)開發(fā)部 曰曰管理本部-®部務管理部 二£財務部 日日廉那分公司曰信息中心信息技術(shù)開發(fā)部 £數(shù)16采集組 圉公告組 e基金俵券組護刷新蚌添加2愀嗨劇除爭*編號姓名性別1 gangli李剛2 huzh艇華男3 agw艾國文4 yonglei雷勇5 yiyang楊怡男6 shice鬼7 cdx陳大賢8 eg9 chenp10 chenxy陳阿11 chi陳每芳12 chy13 cj14 cjw陳善文15 clh陳禮和16 c

5、my陳孟云i 7,"7總員工管理員工（職員列表oric.net (.ne"!系統(tǒng)82蠱rdifra可以看到，整個界面除了左側(cè)的導航區(qū)，右邊的工作區(qū)分為兩部分，樹型組織 機構(gòu)導航與員工的列表展示。功能分為添加、修改刪除等。下面我們來看下如何實 現(xiàn)上面的功能。首先是員工管理的ui界面aspx代碼如下:<% page language=nc#" masterpagefi 1 e="-/site.masterh autoeventwireup=''tme” codebehind="staffadmin.aspx.cs"

6、inherits="rdiframework.webapp.modules.staffadmin" %> <asp:content id="contentl"contentplaceholderid=”head" runat=hserver"> <style type=ntext/cssn>div#navigation background:white div#wrapper float:right;width:l 00%;margin-left:-l 85px div# content! margin-

7、left: 185pxdiv# navigation float:left;width: 180px</style></asp:content><asp:content id="content2" contentplaceholderid=',contentplaceholderlh runat=',server"><div id="layout"><div region="west" iconcls=,icon-chart_organisation&qu

8、ot; split=,true" title二"組織機構(gòu)” style="width:220px;padding: 5px” collapsible="falsen><ul id=',organizetreenx/ul></div><div region="centeru title二”員工管理"iconcls="icousers" style=hpadding: 2px; overflow: hidden"><div id=,toolbarn>

9、;<%=base.buildtoolbarbuttons()%></div><table id="staffgirdn toolbar=,'#toolbar,x/table></div></div><script type=',text/javascript,' src="./scripts/business/staffadmin.js?v=5"x/script> </asp:content>注意，在上面的代碼屮，我們要引用界面業(yè)務邏輯的js文件，如下：&l

10、t;script type=ntext/javascriptn src="./scripts/business/staffadmin.js?v=5"></script> 員工管理的功能按鈕是根據(jù)當前用戶所擁有的權(quán)限進行動態(tài)設(shè)置其可用性的，也 可以設(shè)置為可見或不可見。女n,在上面的aspx界面代碼中有以下這樣一段代碼： <div id=,toolbar,><%=base.buildtoolbarbuttons()%></div>上面這段代碼就是我們綁定按鈕的關(guān)鍵，綁定的按鈕，通過后臺服務代碼來實 現(xiàn)，根據(jù)當前登錄用戶所擁有

11、的權(quán)限，動態(tài)設(shè)置其可用的功能，后臺代碼如下：ill < summary>/獲得權(quán)限iii </summary>private void getpernissionohis. permissionaddthis. permissionedit*his. permissionmovetohis. permissiondeletethis, permissionexport= this. isauthorizedcstaffadmin. add");=this isauthoirized 1 "siaffadmin edit*);=this. isauth

12、orized(sraffadmin. move");= this. isauthorizedfstaffadmin- delete "); = this. isauthorized(s*affadmin. export );/ summary/加載工具欄/ </summary>/1 <retums>工具欄html</returns>public override string buiidtoolbarbuttons ()stringbdilder sb = stringeuilder();siring 1 inkbtn_template

13、= ' sl id=,/ btn0 1 class= easyui-linkbuttonx* style二v'flor : left sb append (<a id=*btnrefresh " c 1 sss=/zeasyuilinkbutton* style="f lost: left7 plain=" sb. append(/z<div class=' datagrid"btn-separatcr? ></div>sb. append( siring. format(linkbtn_templa

14、xe? "adds二aff ", "icon"vcard_add". permissionadd ?sb. append(siring format(linkbtn_templare? 'edits*affz "icon"vcard_editpermissicnedit 7 sb. append(string. format(linkbtn_template. deletestaff"icvcard_de1ete< permissicnde sb. appendc<div class=? dat

15、agrid"btn-separatcr? >< div> ;sb. append (string. format (linkbtn_templaxe? "hcvieto", " icon-arrowsew' permissionmoveto ?sb. append (/r<div class=? dat agri d-b t n* s epar at cr? ></div>sb. append1； siring. format (linkbtn_template? "export",

16、"icon-export', permissionexpcrx ?:return sb.tostring 3;在staffadmin.is代碼中,員工管理工作區(qū)我們首先要加載左側(cè)的組織機構(gòu) 列表（使用easy ui的tree控件）與右側(cè)的員工列表（使用easy ui的datagrid 控件）。加載組織機構(gòu)樹列表。lines: true,url: andler/organizeadminhander.ashx?action二treedata； animate: true,onloadsuccess:function(node,data) scbody.datacdepdata&

17、#39;, data);,onclick: function(node) var selectedld = node.id;$('#staffgird').datagrid('load, organizeld: selectedld );)；加載所選組織機構(gòu)下的員工列表。加載員工列表，我們是通過選擇相應的組織機構(gòu)來進行加載，這樣不至于一下 子把所有的員工數(shù)據(jù)全部加載進來，影響頁面的加載效率。選擇一個組織機構(gòu)節(jié)點, 應該可以加載當前所選節(jié)點及其子節(jié)點所擁有的員工列表才對。當然，這也可以根 據(jù)客戶要求進行相應的調(diào)整，具體實需求而定。我們要加載所選組織機構(gòu)下的員工 列表，就需

18、要綁定組織機構(gòu)(tree控件)的onclick事件或onselect事件都可以, 這兒我們使用onclick事件，事件使用事例如下：$('#organizetree').tree( onclick: function(node)alert(node.text); / alert node text property when clicked)；在我們的組織機構(gòu)事中，我們通過單擊相應節(jié)點，加載相應的員工數(shù)據(jù)，代碼 如下：onclick: function(node) var selectedld 二 node.id;$('#staffgird').datagrid

19、('load, organizeld: selectedld );綁定員工列表的代碼如下：$('#staffgird').datagrid(url: "handler/staffadminhandler.ashx",title:”員工(職員)列表”,loadmsg: n正在加載員工(職員)數(shù)據(jù)，請稍等width: size.width,height: size.height,idfield: tct,singleselect: true,striped: true,rownumbers: true,columns: title:，主鍵field: &

20、#39;id', hidden: true , title:編號;field: 'code', width: 100 , title:，姓名；field: 'realname*, width: 100 , title:"性別t, field: 'gender', width: 35, align: 'center' , title:'出生口期'，field: 'birthday', align: "center", width: 90 , title:，手機號碼 fie

21、ld: 'mobile； width: 120 , title:'辦公電話；field: ,officephone, width: 120 , title:邯箱地址；field: 'email； width: 150 , title:'有效'，field: 'enabled', width: 50, align: 'center', formatter: imgcheckbox , title:，描述;field: 'description1, width: 260 , title: "userid； f

22、ield: 'userid', hidden: true 11,rowstyler: function (index, row, css) if(row.userid!=,h,) return 'font-weightrbold;1;,onloadsuccess: function (data) if (data.rows.length > 0) $('#staffgird').datagrid(,selectrown, 0);)；在上面的列綁定代碼中，我們有一個字段''有效列，可以看到根據(jù)當前員工有 效性，綁定了不同的圖標，這兒使

23、用了 datagrid列的表格轉(zhuǎn)換函數(shù)''formatter"。 對于的imgcheckbox代碼如下：var imgcheckbox = function (cellvalue, options, rowobject) return cellvalue ? r<img src="/css/icon/ok.pngh ait=".te常"title二”正?！?/>': '<img src=u/css/icon/stop.pngn alt=”禁用“ title=n禁用” />*;；上面的代碼，我們就完成

24、了員工管理主頁面的加載綁定。下面我們來看一下，增刪 改相關(guān)ui邏輯代碼。1.3新增員工信息新增員工（職員）界面如下:由于員工數(shù)據(jù)列信息較多，我們采用了 easyuitabs進行布局，使得整個界面 比較清晰整潔。同時還使用t combobox> datebox、validatebox等ui控件， 如下所示：最高學位:1v恕稱等級:博士碩士-有效：學士專業(yè):最高學歷:職稱:職稱評期:4九月1988日二三四五六293031123456789101112131415161718192021222324252627282930今黃關(guān)ifl描述:具體的控件使用方法可以查看文章結(jié)尾提供的相應資源。我們

25、來看一下，如何 綁定combobox控件，由于我們這兒有很多combobox控件的綁定都是提供了 rdiframework.net框架的數(shù)據(jù)字典部分，因此綁定函數(shù)做成一個公共的比較好, 這樣方便調(diào)用。這些綁定都是在加載界面前進行的頁面初始化操作，代碼如卞：initdata: function (organizeld) top.$c#txt_education,#txt_degree,#txt_title,#txt_titlelevel,#txt_workingproperty,# txt_party,#txt_gender').combobox( panelheight: 'a

26、uto' );top.$('#txt_birthday,#txt_titledate,#txt_woi*kingdate,#txt_dimissiondate,#txt_joini ndate')datebox(formatter: function (date) return date.getfullyear() + (date.getmonth() + 1) + ''+date.getdate();，arser: function (date) return new date(date.parse(date.replace(/-/g,n/"

27、);)；var _organizeld = organizeld | 0;top.$('#txt_organizeid,).combotree(data: organizetree.data(),valuefield: 'id；textfield: 'text；value: _organizeld)；綁定各數(shù)據(jù)字典pubmethod.bindcategory(,txt_gender lender1); pubmethod.bindcategorycxceducation1, 'education'); pubmethod<bindcategory(

28、,txt_workingproperty orkingproperty1); pubmethod.bindcategory(,txt_degree degree'); pubmethod.bindcategory(,txt_gender lender1); pubmethod.bindcategory(*txt_title, 'title'); pubmethod.bindcategory('txt_titlelever, 'titlelevef); pubmethod<bindcategory(,txt_nationality nationali

29、ty'); pubmethod.bindcategoryctxcparty*, 'politicalstatus') top.$(,#stafftab').tabs( onselect: function () top-$(validatebox-tip,)eremove();); top.$('#txt_passsalt').val(randomstring();綁定數(shù)據(jù)字典的代碼如下：公共方法var pubmethod = bindcategory: function (categorycontrol.categorycode) if (ca

30、tegorycontrol = n| categorycode = n)return;top.$(#+ categorycontrol).combobox( url:fmoduies/ha ndiei7dataitemadminhandler.ashx?action 二 getcategory &categorycode= + categorycode,method: 'get；valuefield: itemvalue1,textfield: itemname1,editable: false,panelheight: uto1);新增員工的代碼如下:公共變量var acti

31、onurl = 'handler/staffadminhandler.ashx*; var formurl = nmodules/html/staffform.htmn;addstaff: function () 增加員工(職員)if ($(this).linkbutton('options').disabled = true) return;功能代碼邏輯var adddialog = top.$.hdialog(href: formurl + *?v=' + math.random(),width: 680,height: 500,title:，新增員工(職員

32、)iconcls: 'icon-vcard_addonload: function () var dep = $('#oi*ganizetree')tree('getselected);var depid = 0;if(dep) depid = dep.id | 0;； top.$(,#chk_enabled,).attr(,'checkedh, true);如果左側(cè)著選中組織機構(gòu)，則添加的時候，部門默認選中staffadminmethod.initdata(depid);，closed: false,submit: function () var ta

33、b = top.$(,#stafftab,).tabs(,getselected,);var index = top.$(,#stafftab,).tabs(,gettabindex', tab);if (top.$(,#uiform').form('validate,) /var query 二 createparamcadd1, 0) + *&roles- + top.$(,#txt_role,).combo(,getvalues,);var vorganizeld = top.$(,#txt_organizeid,).combobox(,getvalue&

34、#39;); var query = 'action=addstaff&vorganizeid=' + vorganizeld +4- top.$('#uifbrm')serialize();$.ajaxjson(actionurl, query, function (d) if (d.success) msg.ok('添加成功')； mygrid.reload(); adddialog.dialog('close,); else if (d.data = -2) msg.error(用戶名已存在，請更改用戶名。); 訐(inde

35、x > 0)top.$('#stafftab').tabs('select', 0); top.$('#txt_usemame')select(); else messageorredirect(d);)； else 訐(index > 0) top.$(,#stafftab').tabs(,select', 0);)；修改界面代碼與增加的代碼類似，只不過修改界面在彈出時，要綁定當前修改 的數(shù)據(jù)，綁定方法有很多種，女山通過用戶選擇的當前用戶datagrid當前行返回, 這種對于字段列不多時比較適合，但如果字段比較多，我

36、們不可能把所有字段都加 載到界面上來，一般只是顯示一些比較常用的字段給用戶，這時我們可以通過當前 所選的行的生鍵值或唯一性來得到待修改的數(shù)據(jù)進行綁定，我們這兒的員工編輯界 面就是采用的后一種方式，代碼如下所示：var parm = *action=getentity&keyid二'+ row.id;$.ajaxjson(actionurl, parm, function (data) if (data) /organizeldtop.$('#txt_code*).val(data.code); top.$('#txt_realname')val(data

37、.realname); top.$('#txt_biilhday').datebox('setvalue； data.birthday); top.$(r#txt_genclef).coitibobox('setvalue； data.gender); top.$(,#txt_age,).val(data.age);top.$('#txt_major').val(data.major); top.$c#txt_schoor).val(data.school); top.$('#txt_education').combobox(&#

38、39;setvdlue； data.education); top.$(,#txt_degree').combobox('setvalue data.degree); top.$(,#txt_title,).combobox(,setvalue, data.title); top.sctxctitlelboboxcsetvalue', data.titlelevel); top.$(,#txt_titledate').datebox('setvalue data.titledate);/*省略部召代碼*/top.$('#chk_e

39、nabled,).attr(,checked,data.enabled = "1");top.$(' #txt_desci*iption')val(data.description);修改后，單擊確定，即可保存當前修改的數(shù)據(jù)，如下所示:if (top.$(f#uiforml).validate().form() var vorganizeld = top$c#txt_organizeid')comboboxcgetvalue);var query = ,action=editstaff&vorganizeid=, + vorganizeld

40、+ '&keyld=, + row.id + & + top.$('#uifonrf)sefialize();$.ajaxjson(actionurl, query, function (d) if (d.success) msg.ok(d.message);editdailog.dialog(,close,); mygrid.reload(); else messageorredirect(d););刪除所選員工對于需耍刪除的員工數(shù)據(jù)，我們可以對其進行刪除（框架中的刪除全是邏輯刪 除，即打刪除標志），當前，刪除前提示一下用戶，這樣比較友好一些，如下：洵問提示確定要刪除選中的員工（職員）嗎？cancel、ok代碼如下：var row = mygrid.selectrow(); if (row != null) var query = 'action=deletestaff&keyid=' + row.id;$.messager.confirm(,詢