-------------------------------------------------------
//使用json格式傳遞到前臺去
List<String> list = service.loadProvince();
StringBuffer s = new StringBuffer("[");
for(int i = 0 ; i < list.size(); i++){
s.append("\"").append(list.get(i)).append("\"");
if(i<list.size()-1){
s.append(",");
}
}
s.append("]");
//相當於 ["北京","湖南"]
response.setContentType("text/json;charset=UTF-8");
response.getWriter().println(s.toString());
response.getWriter().close();
前臺：
<select id="province" onchange="loadCity(this.value);"></select>
var ret = eval("("+responseText+")");
var s = "<option value=''>請選擇</option>";
for(var i = 0; i < ret.length;i++){
s +="<option>"+ret[i]+"</option>";
}
document.getElementById("province").innerHTML = s;
前臺也可以使用對象方式
var pro = document.getElementById("province");
//先清空
pro.options.length=0;
for(var i = 0; i < ret.length;i++){
var opt = new Option(ret[i]);
pro.options[pro.options.length] = opt;
}
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
var obj=document.getElementById('mySelect');
obj.options.add(new Option("text","value")); //這個兼容IE與firefox
var index=obj.selectedIndex; //序號，取當前選中選項的序號
var val = obj.options[index].value;//讀取選定值
var val = obj.options[index].text; //讀取選定文本
var val = obj.options[index]=new Option("新文本","新值");//設定新文本
obj.options.remove(index);//刪除選中的option
obj.options.length=0;//清除所有option
################################################################################
function ad_changed(obj)
{
id = obj.value;
Ajax.call('adv_auto.php?act=get_id&is_ajax=1', 'parent_id='+id, re_ad_changed, "GET", "JSON");
}
function re_ad_changed(result)
{
child = document.getElementById('ad_id');
child.options.length=0;
for(i = 0; i < result.content.length; i++)
{
child.options.add(new Option());
child.options[i].value = result.content[i].ad_id;
child.options[i].text = result.content[i].ad_name;
}
child.style.display = "";
return ;
}
############################################################################
var text = "test";
var params_select = document.getElementById("params_select");
//創建標籤
var opt = document.createElement("option");
//創建文本
var _text = document.createTextNode(text);
//把文本賦給標籤
opt.appendChild(_text);
//屬性賦值
opt.setAttribute("value",objs[m].keyid);
opt.setAttribute("selected","selected");
//添加
params_select.appendChild(opt);
###########################################################################
javascript動態創建Option選項，選擇月份後動態創建日期。
<html>
<head>
<title>javascripttest</title>
<script type="text/javascript">
function setDay()
{
var themonth=document.getElementById("month");
var themaxmonthday=31;
if(themonth.value=="2")
{
themaxmonthday=28;
}
var theday=document.getElementById("day");
var tempdaylength=theday.options.length;
for(var j=tempdaylength;j>0;j--)
{
theday.options.remove(j);
}
for(var i=1;i<=themaxmonthday;i++)
{
var theOption=document.createElement("option");
theOption.innerHTML=i+"日";
theOption.value=i;
theday.appendChild(theOption);
}
}
</script>
</head>
<body>
<select id="month" onchange="setDay()">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="12">12月</option>
</select>
<select id="day">
</select>
</body>
</html>
###########################################################
//1.動態創建select
function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
//2.添加選項option
function addOption(){
//根據id查找對象，
var obj=document.getElementById('mySelect');
//添加一個選項
obj.add(new Option("文本","值")); //這個只能在IE中有效
obj.options.add(new Option("text","value")); //這個兼容IE與firefox
}
//3.刪除所有選項option
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
//4.刪除一個選項option
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要刪除選項的序號，這裏取當前選中選項的序號
var index=obj.selectedIndex;
obj.options.remove(index);
}
//5.獲得選項option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序號，取當前選中選項的序號
var val = obj.options[index].value;
//6.獲得選項option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序號，取當前選中選項的序號
var val = obj.options[index].text;
//7.修改選項option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序號，取當前選中選項的序號
var val = obj.options[index]=new Option("新文本","新值");
//8.刪除select
function removeSelect(){
var mySelect = document.getElementById
}
[color=red]2.Jquery前臺轉一個數組到後臺,後臺取數問題及通過json傳集合到前臺問題[/color]
#################################################################
下面是頁面代碼：
1. ztfw.jsp
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/commons/taglibs.jsp" %>
<style>
<!--
#zdfwPage{
width:640px;
margin:0px auto;
padding:0px 20px 0px;
border-width: thin;
border-style:solid;
border-left-color:#99BBE8;
border-right-color:#99BBE8;
border-bottom-style:none;
border-top-style:none;
background:#E9F0F2;
line-height:30px;
overflow: hidden;
}
.tabsPage .tabsPageContent{ overflow:auto;}
-->
</style><script type="text/javascript">
<!--
//處理左右表相互移動
function moveDepartment(flag){
//當點擊 添加部門 或者 人員時
if(flag=='addDept' || flag=='addUser'){
//左邊select
var left="";
//右邊select
var right="";
if(flag=='addDept'){
left = $("#leftDept")[0];
right = $("#rightDept")[0];
}else{
left = $("#leftUser")[0];
right = $("#rightUser")[0];
}
//取得當前選中的select的位置
var index = left.selectedIndex;
if(index < 0){
alert("您沒有選擇任何部門！");
}
var id = left.options[index].value;
var name = left.options[index].text;
//給右邊的select添加一個option
right.options.add(new Option(name,id));
//刪除選中的左邊的option
left.options.remove(index);
}
//當點擊 添加全部部門 或 全部人員 時
if(flag=='addAllDept' || flag=='addAllUser'){
//左邊select
var left="";
//右邊select
var right="";
//當是添加全部部門時
if(flag=='addAllDept'){
left = $("#leftDept")[0];
right = $("#rightDept")[0];
}//當 添加全部人員時
else{
left = $("#leftUser")[0];
right = $("#rightUser")[0];
}
var leftLength = left.options.length;
var id;
var name;
//循環遍歷左邊的select，添加到右邊，刪除左邊所有
for(var i = 0 ; i < leftLength; i++){
id = left.options[0].value;
name = left.options[0].text;
//給右邊的select添加一個option
right.options.add(new Option(name,id));
//刪除選中的左邊的option
left.options.remove(index);
}
}
//當點擊 刪除部門 或 刪除人員 時
if(flag=='deleteDept' || flag=='deleteUser'){
var right;
var left;
if(flag=='deleteDept'){
right = $("#rightDept")[0];
left = $("#leftDept")[0];
}else{
right = $("#rightUser")[0];
left = $("#leftUser")[0];
}
var index = right.selectedIndex;
if(index < 0){
alert("您沒有選擇任何部門！");
}
var id = right.options[index].value;
var name = right.options[index].text;
left.options.add(new Option(name,id));
right.options.remove(index);
}
//當點擊 刪除全部部門時
if(flag=='deleteAllDept' || flag=='deleteAllUser'){
var right;
var left;
if(flag=='deleteAllDept'){
right = $("#rightDept")[0];
left = $("#leftDept")[0];
}else{
right = $("#rightUser")[0];
left = $("#leftUser")[0];
}
var rightLength = right.options.length;
var id;
var name;
for(var i = 0 ; i < rightLength; i++){
id = right.options[0].value;
name = right.options[0].text;
left.options.add(new Option(name,id));
right.options.remove(index);
}
}
}
//當選擇了部門時，去後臺查詢出該部門下的人員
function getAllUserByDeptId(selectDept){
var deptid = selectDept.value;
var leftUser = $("#leftUser")[0];
leftUser.options.length=0;
if(deptid){
var parameters = new Object();
parameters["deptid"]=deptid;
parameters["roleid"]=$("#zdfwRoleId").val();
$.post("${ctx}/role/getUserByDeptIdAndRoleId.json",parameters,function(data){
for(var i=0;i<data.length;i++){
var id = data[i].id;
var realName = data[i].realname;
leftUser.options.add(new Option(realName,id));
}
},"json");
}
}
function saveZdfw(){
var parameters = new Object();
var rightDept = $("#rightDept")[0];
var rightDeptLength = rightDept.options.length;
//取得右邊的所有 已選部門的ID
for(var i = 0 ; i < rightDeptLength; i++){
parameters["deptId"+(i+1)] = rightDept.options[i].value;
}
var rightUser = $("#rightUser")[0];
var rightUserLength = rightUser.options.length;
//取得右邊的所有 已選人員的ID
for(var i = 0 ; i < rightUserLength; i++){
parameters["userId"+(i+1)] = rightUser.options[i].value;
}
parameters["roleId"] = $("#zdfwRoleId").val();
$.post("${ctx}/role/saveZdfw.json",parameters,function(data) {
if(data["message"]=="success"){
alert("保存成功");
}
}, "json");
}
//-->
</script>
<div id="zdfwPage">
<input id="zdfwRoleId" name="zdfwRoleId" type="hidden" value="${role.id }">
<table border="0" align="center" id="zdfwTable" style="text-align: center;width: 640px;height: 100%;">
<tr>
<td colspan="3" style="text-align: center;line-height: 30px;background: #99BBE8;">
<b>角色名稱：</b>${role.name }
</td>
</tr>
<tr>
<td width="280px" height="30px" style="background: #CCE8CF;">
<div style="text-align: center;"><b>可選部門</b></div>
</td>
<td width="80px">
</td>
<td width="280px" height="30px" style="background: #CCE8CF;">
<div style="text-align: center;"><b>已選部門</b></div>
</td>
</tr>
<tr>
<td width="280px" height="200px">
<select id="leftDept" style="width:280px;overflow:auto;height: 100%" size="13">
<c:forEach items="${leftDept}" var="depart">
<option value="${depart.id}"><c:out value="${depart.name }"/></option>
</c:forEach>
</select>
</td>
<td width="80px">
<div align="center">
<span style="cursor: pointer;" onclick="moveDepartment('addDept');"><font color="red">添 加</font><br><br></span>
<span style="cursor: pointer;" onclick="moveDepartment('addAllDept');"><font color="red">全部添加</font><br><br></span>
<span style="cursor: pointer;" onclick="moveDepartment('deleteDept');"><font color="red">刪 除</font><br><br></span>
<span style="cursor: pointer;" onclick="moveDepartment('deleteAllDept');"><font color="red">全部刪除</font><br></span>
</div>
</td>
<td width="280px">
<select id="rightDept" style="width:280px;overflow:auto;height: 100%" size="13">
<c:forEach items="${rightDept}" var="depart">
<option value="${depart.id}"><c:out value="${depart.name }"/></option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td width="280px" height="30px" style="background: #CCE8CF;">
<div style="text-align: center;"><b>可選人員</b><span>
所在部門：
<select id="deptid" name="deptid" onchange="getAllUserByDeptId(this);">
<option value="">請選擇</option>
<c:forEach items="${allDept}" var="temp">
<option value="${temp.id}">${temp.name}</option>
</c:forEach>
</select>
</span>
</div>
</td>
<td width="80px">
</td>
<td width="280px" height="30px" style="background: #CCE8CF;">
<div style="text-align: center;"><b>已選人員</b></div>
</td>
</tr>
<tr>
<td width="280px" height="200px">
<select id="leftUser" style="width:280px;overflow:auto;height: 100%" size="13">
<c:forEach items="${leftUser}" var="user">
<option value="${user.id}"><c:out value="${user.realname }"/></option>
</c:forEach>
</select>
</td>
<td width="80px">
<div align="center">
<span style="cursor: pointer;" onclick="moveDepartment('addUser');"><font color="red">添 加</font><br><br></span>
<span style="cursor: pointer;" onclick="moveDepartment('addAllUser');"><font color="red">全部添加</font><br><br></span>
<span style="cursor: pointer;" onclick="moveDepartment('deleteUser');"><font color="red">刪 除</font><br><br></span>
<span style="cursor: pointer;" onclick="moveDepartment('deleteAllUser');"><font color="red">全部刪除</font><br></span>
</div>
</td>
<td width="280px">
<select id="rightUser" style="width:280px;overflow:auto;height: 100%" size="13">
<c:forEach items="${rightUser}" var="user">
<option value="${user.id}"><c:out value="${user.realname }"/></option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td colspan="3" height="80px">
<div align="center">
<input type="button" onclick="saveZdfw();" style="line-height: 18px;" value="保存">
<input type="button" class="close" style="line-height: 18px;" value="取消">
</div>
</td>
</tr>
</table>
</div>
2.後臺處理類
RoleController
@Controller
@RequestMapping("/role")
public class RoleController extends BaseRestSpringController<Role,java.lang.String>{
private RoleManager roleManager;
private DepartmentManager departmentManager;
private UserinfoManager userinfoManager;
private MenuManager menuManager;
private final String LIST_ACTION = "redirect:/role";/**
* 增加setXXXX()方法,spring就可以通過autowire自動設置對象屬性,注意大小寫
**/
public void setRoleManager(RoleManager manager) {
this.roleManager = manager;
}
public void setMenuManager(MenuManager menuManager) {
this.menuManager = menuManager;
}
public void setUserinfoManager(UserinfoManager userinfoManager) {
this.userinfoManager = userinfoManager;
}
public void setDepartmentManager(DepartmentManager departmentManager) {
this.departmentManager = departmentManager;
}
/** binder用於bean屬性的設置 */
@InitBinder
public void initBinder(WebDataBinder binder) {
binder.registerCustomEditor(Date.class, new CustomDateEditor(new SimpleDateFormat("yyyy-MM-dd"), true));
}
/**
* 增加了@ModelAttribute的方法可以在本controller方法調用前執行,可以存放一些共享變量,如枚舉值,或是一些初始化操作
*/
@ModelAttribute
public void init(ModelMap model) {
model.put("now", new java.sql.Timestamp(System.currentTimeMillis()));
/**
* 讀入靜態字典
*/
StaticDict.fillMapAll(model);
}//根據部門ID，角色ID 取得該部門下面的所有沒有選擇該角色的人員(啓用狀態的)
@RequestMapping(value="/getUserByDeptIdAndRoleId")
public String getUserByDeptIdAndRoleId(HttpServletRequest request,HttpServletResponse response) throws Exception {
String deptid = request.getParameter("deptid");
String roleid = request.getParameter("roleid");
List<Userinfo> userList = userinfoManager.getUserByDeptIdAndRoleId(deptid, roleid);
List<UserinfoQuery> userQuery = new ArrayList<UserinfoQuery>();
for(Userinfo user:userList){
UserinfoQuery query = new UserinfoQuery();
query.setId(user.getId());
query.setRealname(user.getRealname());
userQuery.add(query);
}
JSONArray jsonArray = new JSONArray();
jsonArray.addAll(userQuery);
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.write(jsonArray.toString());
out.flush();
out.close();
return null;
}
/**角色與部門及人員關係維護 進入指定範圍頁面 */
@RequestMapping(value="/{id}/zdfw")
public String zdfw(ModelMap model,@PathVariable java.lang.String id) throws Exception {
Role role = (Role)roleManager.getById(id);
//該角色ID 沒有選擇的 所有啓用狀態的部門
List<Department> leftDept = departmentManager.getNoSelectedDeptsByRoleId(id);
//該 角色ID 已經選擇的 所有部門
List<Department> rightDept = departmentManager.getSelectedDeptsByRoleId(id);
//該角色ID已經選擇的所有人員
List<Userinfo> rightUser = userinfoManager.getSelectedUsersByRoleId(id);
//取得所有部門，用於選擇部門下的人員
List<Department> allDept = departmentManager.getAllDepts();
model.addAttribute("leftDept",leftDept);
model.addAttribute("allDept",allDept);
model.addAttribute("rightDept",rightDept);
model.addAttribute("rightUser",rightUser);
model.addAttribute("role",role);
initAddAndUpdate(model);
return "/role/zdfw";
}
/** 保存指定範圍結果 */
@RequestMapping(value="/saveZdfw")
public String saveZdfw(HttpServletRequest request,HttpServletResponse response) throws Exception {
List<String> deptIdList = new ArrayList<String>();
int deptIndex = 1;
String deptid = ServletRequestUtils.getStringParameter(request, "deptId"+deptIndex);
while(deptid != null){
if(!deptIdList.contains(deptid)){
deptIdList.add(deptid);
}
deptIndex++;
deptid = ServletRequestUtils.getStringParameter(request, "deptId"+deptIndex);
}
List<String> userIdList = new ArrayList<String>();
int userIndex = 1;
String userid = ServletRequestUtils.getStringParameter(request, "userId"+userIndex);
while(userid != null){
if(!userIdList.contains(userid)){
userIdList.add(userid);
}
userIndex++;
userid = ServletRequestUtils.getStringParameter(request, "userId"+userIndex);
}
String roleid = request.getParameter("roleId");
List<Roledetail> roleDetailList = new ArrayList<Roledetail>();
for(String dept:deptIdList){
Roledetail detail = new Roledetail();
detail.setDeptid(dept);
detail.setRoleid(roleid);
roleDetailList.add(detail);
}
for(String user:userIdList){
Roledetail detail = new Roledetail();
detail.setUserid(user);
detail.setRoleid(roleid);
roleDetailList.add(detail);
}
roleManager.updateForZdfw(roleid, roleDetailList);
JSONObject json = new JSONObject();
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
json.put("message", "success");
out.write(json.toString());
out.flush();
out.close();
return null;
}
｝
頁面顯示效果：
[img]http://dl.iteye.com/upload/attachment/571829/3924db89-bd20-3d93-a381-da8d6866e13e.jpg[/img]