jquery實(shí)現(xiàn)顯示已選用戶
選擇用戶是一個(gè)比較常用的功能,主要包含2個(gè)功能點(diǎn)(保存已選選項(xiàng)、顯示已選用戶)
功能要求:
1 選擇用戶界面以彈出框方式顯示
2 頁(yè)面選項(xiàng)動(dòng)態(tài)加載(部門及用戶)
3 已選用戶以勾選方式顯示
實(shí)現(xiàn)分析:
首先因?yàn)榇翱谑莻€(gè)彈出框,所以頁(yè)面的內(nèi)容主要是以異步方式獲取。因?yàn)閮?nèi)容分為兩個(gè)部分(1待選項(xiàng)、2選中項(xiàng))所以就有兩種處理方法.
方法1:后臺(tái)根據(jù)數(shù)據(jù)(1待選項(xiàng)、2選中項(xiàng))生成完整的html代碼,通過一次異步操作返回
方法2:待選項(xiàng)、和選中項(xiàng)通過2次異步方法獲取,然后在頁(yè)面js事項(xiàng)選中效果。
因?yàn)椴幌矚g把很多邏輯寫在頁(yè)面上,所以比較喜歡第一種方案,也比較推薦。
頁(yè)面
1 彈出選擇共享文件的對(duì)話框
邏輯:1 異步調(diào)用 showShareRange 方法,獲得完整的html代碼。
//彈出選擇共享文件的對(duì)話框
function showShareFile(){
disableFileArea();
if(!chooseObj.isChoosed()){
handleWarm("請(qǐng)先選擇文件或者目錄");
enableFileArea();
return;
}
$('#shareRange').html('');
showflowcontent('fxcontentflow');
$.ajax({
url : '../share/showShareRange.do',
//url:'${ctx}/index.jsp',
cache : false,
type : 'post',
dataType : 'html',
async : true,
contentType : "application/x-www-form-urlencoded;charset=utf-8",
data : {
'signid' :chooseObj.id,
'objtype' :chooseObj.type
},
success : function(html) {
$('#shareRange').html(html);
}
})
}
2 彈出框界面代碼
<div class="flowcontent" id="fxcontentflow">
<div id="fxloadfile" class="content">
<div class="title"><strong>分享文件</strong><input type="button" class="closebtn gb" onClick="hideflowcontent(this)" title="關(guān)閉" /><input type="button" class="hidebtn" /></div>
<div class="body">
<div class="file" id='shareRange'><!-- 共享范圍 -->
</div><!-- file -->
<div class="btns"><input type="button" class="submitbtn" value="" onClick="shareFile()" /><input type="button" class="cancelbtn gb" onClick="closeflowcontent('fxcontentflow')" /></div>
<div class="h30"></div>
</div>
</div>
</div>
后臺(tái)代碼
controller
/**
* 顯示指定文件、文件夾的共享范圍(共享用戶)
* @param request
fileid 選中的文件id
folderid 選中的文件夾id
objtype 操作對(duì)象類型(file、folder)
* @param response
* @throws Exception
* @
* return 0表示無權(quán)限操作/1表示有權(quán)限操作
*
*/
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");
// 獲得當(dāng)前共享用戶
List<String> userIdList= fileShareManager.showShareRange(signid, objtype);
try {
// 把共享范圍轉(zhuǎn)換成html格式
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
/**
* 把共享范圍轉(zhuǎn)換成html格式
* @param userIdList 已經(jīng)共享的人員列表
* @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();
//循環(huán)每個(gè)的部門
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\">");
//循環(huán)每個(gè)的部門用戶
for(DmUser user:userList){
String userid = user.getUserId();
String username = user.getUserName();
sb.append("<li>");
// 用戶是否屬是共享用戶
if(userIdList.contains(userid)){
log.info(userid);
sb.append("<input type='checkbox' checked=true name='shareUserId' value ='").append(userid).append("'/>").append(username).append(" ");
}else{
sb.append("<input type='checkbox' name='shareUserId' value ='").append(userid).append("'/>").append(username).append(" ");
}
sb.append("</li>");
}
sb.append("</ul>");
}
return sb.toString();
}
service 生成的html參考(僅供參考,無需實(shí)現(xiàn))
<div class="fxtitle">院領(lǐng)導(dǎo)</div>
<ul class="fxxz">
<li><input type="checkbox" name="shareUserId" value="xiaolin">肖林 </li>
<li><input type="checkbox" name="shareUserId"
value="wangshuotong">王碩佟 </li>
<li><input type="checkbox" name="shareUserId"
value="wangshengyang">汪勝洋 </li>
<li><input type="checkbox" name="shareUserId" value="qifeng">齊峰 </li>
<li><input type="checkbox" name="shareUserId" value="tangyiwen">唐憶文 </li>
<li><input type="checkbox" name="shareUserId"
value="zhanglisheng">張利生 </li>
<li><input type="checkbox" name="shareUserId" value="zhengshao">鄭韶 </li>
</ul>
<div class="fxtitle">辦公室</div>
<ul class="fxxz">
<li><input type="checkbox" name="shareUserId" value="lujianping">陸建平 </li>
<li><input type="checkbox" checked="true" name="shareUserId"
value="guoshunlan">郭順蘭 </li>
<li><input type="checkbox" name="shareUserId" value="fangying">方穎 </li>
<li><input type="checkbox" name="shareUserId" value="jiaoxiaojun">焦曉君 </li>
<li><input type="checkbox" checked="true" name="shareUserId"
value="songweilei">宋維蕾 </li>
<li><input type="checkbox" name="shareUserId" value="zhangxinmin">張新民 </li>
<li><input type="checkbox" checked="true" name="shareUserId"
value="lijing">李靖 </li>
<li><input type="checkbox" name="shareUserId" value="wangkaiyu">王開宇 </li>
</ul>
- jQuery制作仿騰訊web qq用戶體驗(yàn)桌面
- 增強(qiáng)用戶體驗(yàn)友好性之jquery easyui window 窗口關(guān)閉時(shí)的提示
- 基于jquery ajax 用戶無刷新登錄方法詳解
- 使用Jquery打造最佳用戶體驗(yàn)的登錄頁(yè)面的實(shí)現(xiàn)代碼
- 基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼
- JQuery運(yùn)用ajax注冊(cè)用戶實(shí)例(后臺(tái)asp.net)
- jQuery+Ajax用戶登錄功能的實(shí)現(xiàn)
- asp.net jQuery Ajax用戶登錄功能的實(shí)現(xiàn)
- jquery ajax 檢測(cè)用戶注冊(cè)時(shí)用戶名是否存在
- jquery實(shí)現(xiàn)保存已選用戶
相關(guān)文章
JQuery.closest(),parent(),parents()尋找父結(jié)點(diǎn)
在50個(gè)必備的實(shí)用jQuery代碼段看到關(guān)于closest()方法的介紹,考慮到開發(fā)過程中經(jīng)常有找爹的需求,以前用的都是parent()/parents()方法(還經(jīng)常找不到?。?,所以就此研究對(duì)比一下!2012-02-02
jQuery實(shí)現(xiàn)的選擇商品飛入文本框動(dòng)畫效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的選擇商品飛入文本框動(dòng)畫效果,結(jié)合完整實(shí)例形式分析了jQuery動(dòng)態(tài)操作頁(yè)面元素屬性實(shí)現(xiàn)動(dòng)畫效果的方法,涉及jQuery的事件綁定、元素遍歷及屬性操作等相關(guān)技巧,需要的朋友可以參考下2016-08-08
jQuery新聞滾動(dòng)插件 jquery.roller.js
任務(wù)需要,就寫了一個(gè)jQuery新聞滾動(dòng)插件jquery.roller.js,功能相對(duì)比較簡(jiǎn)單,可能往后會(huì)加入ajax一段時(shí)間輪詢 動(dòng)態(tài)加載的功能.下面直接給出源代碼,如果需要可以直接下載2011-06-06

