Jquery displays selected users, while jquery implements users

Jquery displays selected users, while jquery implements users

Selecting a user is a common function. It mainly includes two Function Points (save selected options and display selected users)

Functional requirements:

1. Select the user interface and display it in a pop-up box.

2. Dynamic Loading of page options (department and user)

3. The selected users are displayed in the check box.

Implementation Analysis:

First, because the window is a pop-up box, the content of the page is obtained asynchronously. Because the content is divided into two parts (1 to be selected and 2 to be selected), there are two solutions.

Method 1: the background generates complete html code based on the data (1 to be selected, 2 to be selected) and returns the Code through an asynchronous operation.

Method 2: The items to be selected, and the selected items are obtained through two asynchronous methods, and then the js items on the page are selected.

Because I do not like to write a lot of logic on the page, I like the first solution and it is also recommended.

Page

1. The select shared file dialog box is displayed.
Logic: 1. Call the showShareRange method asynchronously to obtain the complete html code.

// The select shared file dialog box is displayed. function show1_file () {disableFileArea (); if (! ChooseObj. isChoosed () {handleWarm ("select a file or directory first"); enableFileArea (); return ;}{('{sharerange'}.html (''); showflowcontent ('fxcontentflow'); $. ajax ({url :'.. /share/showShareRange. do ', // url:' $ {ctx}/index. jsp ', cache: false, type: 'post', ype: 'html', async: true, contentType: "application/x-www-form-urlencoded; charset = UTF-8 ", data: {'signid': chooseObj. id, 'objtype': chooseObj. type}, success: function (html) {detail ('{sharerange'}.html (html );}})}

2. Dialog Box code

<Div class = "flowcontent" id = "fxcontentflow"> <div id = "fxloadfile" class = "content"> <div class = "title"> <strong> file sharing </strong> <input type = "button" class = "closebtn gb" onClick = "hideflowcontent (this) "title =" close "/> <input type =" button "class =" hidebtn "/> </div> <div class =" body "> <div class =" file "id = 'sharerange '> <! -- Shared range --> </div> <! -- File --> <div class = "btns"> <input type = "button" class = "submitbtn" value = "" onClick = "Upload file () "/> <input type =" button "class =" cancelbtn gb "onClick =" closeflowcontent ('fxcontentflow ') "/> </div> <div class =" h30 "> </div>

Background code
Controller

/*** Display the sharing range of specified files and folders (shared Users) * @ param request specify the Object id selected by fileid specify folder id objtype operation object type selected by folderid (file, folder) * @ param response * @ throws Exception * @ * return 0 indicates no operation permission./1 indicates operation permission. **/public void showShareRange (HttpServletRequest request, HttpServletResponse response) {String signid = request. getParameter ("signid") = null? "": Request. getParameter ("signid"); String objtype = request. getParameter ("objtype") = null? "": Request. getParameter ("objtype"); // obtain the List of currently shared users <String> userIdList = fileShareManager. showShareRange (signid, objtype); try {// convert the sharing range to the html Format String str = fileShareManager. trunToShareRangeHtml (userIdList); response. setCharacterEncoding ("UTF-8"); PrintWriter pw = response. getWriter (); pw. write (str); pw. flush (); pw. close ();} catch (Exception e) {// TODO Auto-generated catch block logger.info (e); e. printStackTrace ();}}

Service

/*** Convert the shared range to html format * @ param userIdList List of people already shared * @ return * @ throws Exception */public String trunToShareRangeHtml (List <String> userIdList) throws Exception {IOrgServiceClient client = new IOrgServiceClient (); IOrgServicePortType service = client. getIOrgServiceHttpPort (); List <WebDeptment> deptlist = Ws_DeptCenter.getAllDepts (); Map map = new HashMap (); StringBuffer sb = new StringBuffer (); // cycle each department for (WebDeptment dept: deptlist) {log.info (dept. getDepId (); List <DmUser> userList = userManager. getUserListByDeptid (dept. getDepId (), dept. getActdepId (), service); sb. append ("<div class = \" fxtitle \ ">" + dept. getDepMiniName () + "</div>"); sb. append ("<ul class = \" fxxz \ ">"); // cycle each department user for (DmUser user: userList) {String userid = user. getUserId (); String username = user. getUserName (); sb. append ("<li>"); // whether the user belongs to a shared user if (userIdList. contains (userid) {log.info (userid); sb. append ("<input type = 'checkbox' checked = true name = 'your userid' value = '"). append (userid ). append ("'/> "). append (username ). append ("");} else {sb. append ("<input type = 'checkbox' name = 'your userid' value = '"). append (userid ). append ("'/> "). append (username ). append ("");} sb. append ("</li>");} sb. append ("</ul>");} return sb. toString ();}

Service-generated html reference (for reference only, no need to implement)

<Div class = "fxtitle"> school leader </div> <ul class = "fxxz"> <li> <input type = "checkbox" name = "shareUserId" value = "xiaolin "> Xiao Lin </li> <input type =" checkbox "name =" shareUserId "value =" wangshuotong "> Wang Shuo </li> <input type = "checkbox" name = "shareUserId" value = "wangshengyang"> Wang shengyang </li> <input type = "checkbox" name = "shareUserId" value = "qifeng "> Qi Feng </li> <input type =" checkbox "name =" shareUserId "value =" tangyiwen "> Tang Yiwen </li> <input type = "checkbox" name = "shareUserId" value = "zhanglisheng"> Zhang Lisheng </li> <input type = "checkbox" name = "shareUserId" value = "zhengshao "> Zheng </li> </ul> <div class =" fxtitle "> Office </div> <ul class =" fxxz "> <li> <input type = "checkbox" name = "shareUserId" value = "lujianping"> Lu Jianping </li> <input type = "checkbox" checked = "true" name = "shareUserId" value = "guoshunlan"> Guo shunlan </li> <input type = "checkbox" name = "shareUserId" value = "fangying"> Fang Ying </li> <li> <input type = "checkbox" name = "shareUserId" value = "jiaoxiaojun"> Jiao Xiaojun </li> <input type = "checkbox" checked = "true" name = "Your userid" value = "songweilei"> song weilei </li> <input type = "checkbox" name = "Your userid" value = "zhangxinmin"> Zhang Xinmin </li> <input type = "checkbox" checked = "true" name = "shareUserId" value = "lijing"> li Jing </li> <input type = "checkbox" name = "shareUserId" value = "wangkaiyu"> Wang Kaiyu </li> </ul>

Dynamic Display using jquery

The framset framework of html can be fully implemented according to your description.
<Frameset rows = "*, 18" frameborder = "NO" border = "0" framespacing = "0">
<Frameset rows = "68, *" frameborder = "NO" border = "0" framespacing = "0">
<Frame src = "web/head. jsp" name = "topFrame" scrolling = "NO" noresize>
<Frameset cols = "160, *" frameborder = "NO" border = "0" framespacing = "0">
<Frame src = "web/menu. jsp" name = "leftFrame" scrolling = "auto">
<Frame src = "web/bai. jsp" name = "mainFrame">
</Frameset>
</Frameset>
<Frame src = "web/foot. jsp" name = "bottomFrame" scrolling = "NO" noresize>
</Frameset>
<Noframes> <body>
</Body> </noframes>
Note that in the <a> label of leftFrame, specify target = "mainFrame", and the display content is on the right.

How does jquery display all attributes and values in a class selector?

--Press F12 directly on ie... and use tools at a glance
I have never used attr (). each (function (){
Alert (this );
}) Should not ...~ Either expand one...
What are you doing --??