JavaScriptマルチレベルチェックボックス選択effect_form特殊効果-jsチュートリアル-php.cn

JavaScriptマルチレベルチェックボックス選択effect_form特殊効果

WBOY

リリース： 2016-05-16 18:48:01

オリジナル

1010 人が閲覧しました

今日、部門の複数選択の効果をついに理解しました
画像を参照してください:

最初にコアコードを共有します:
1: js スクリプト

vartreeHTML = ""
var checkList = new Array(); *ここでは初期化のみ*/
var barString = " └";/*┝└*/
vardegreeString = " "
function makeTree(id,text,value,parentid,isCheck) {
this.id = id;
this.value = 値;
this.isCheck=isCheck; function dispCheck(option,degree) {
for (var i=1;itreeHTML =degreeString;
}
treeHTML = barString; ";
treeHTML = option.text "
";
}
function dispKidsByPid(pid,degree) {
for (var i =0;iif (pid==checkList[i].parentid) {
dispCheck(checkList[i],degree); >dispKidsByPid(checkList[i] .id,degree 1);
}
}
}
function checkOption(option)
{
var deptCheckList=document.getElementsByName("deptOption ");
/ /親要素を確認します
if(option.parentId!=0){
varparentChecked="0";
for(var i=0;iif (deptCheckList[i].parentId==option.parentId){
if(deptCheckList[i].checked){
parentChecked="1"; 🎜>}
}
}
if(parentChecked=="1")
document.getElementById("dept_" option.parentId).checked=true;
else
ドキュメント.getElementById("dept_" オプション.parentId).checked=false;
checkOption(document.getElementById("dept_" オプション.parentId));
}
}
関数 checkSubOption(オプション){
var deptCheckList=document.getElementsByName("deptOption");
//子要素をチェックします
for(var i=0;iif("dept_" deptCheckList[i].parentId== option.id){
deptCheckList[i].checked=option.checked;
checkSubOption(deptCheckList[i]);
}

2: ページ:

コードをコピー

コードは次のとおりです:

<%@ page contentType="text/html;charset=GBK"%>
<%@ page import="java.util.*"%>
<%@ page import="com.gzdec.eecn.web.school.vo.SchoolRoleVo"%>
<%@ page import="com.gzdec.common.web.base.BaseAction"%>
<%@ page import="com.gzdec.common.util.CodeFilter"%>
<%@ page import="com.gzdec.eecn.web.mas.vo.MasGradeVo" %>
<%@ page import="com.gzdec.eecn.web.mas.vo.MasSubjectVo" %>
<%@ page import="com.gzdec.edubase.web.organization.vo.*"%>
<%@ page import="com.gzdec.eecn.web.school.vo.SchoolRolePrismVo"%>
<%
SchoolRoleVo schoolRoleVo = (SchoolRoleVo) request.getAttribute("schoolRoleVo");
List subjecGgroupList = (リスト) request.getAttribute("subjecGgroupList");
リスト GradeGroupList = (リスト) request.getAttribute("gradeGroupList");
List deptList = (リスト) request.getAttribute("deptList");
リスト groupList = (リスト) request.getAttribute("groupList");
String roleType=request.getParameter("roleType");
SchoolRolePrismsVo schoolRolePrismVo=(SchoolRolePrismVo)request.getAttribute("schoolRolePrismVo");
%>

"/>

角色名称：	dataType="LimitB" min="1" max="50" msg="角色名称不能为空,且长度不能大于25个中文字符" class="input_style1" value="<%=schoolRoleVo!=null?CodeFilter.toHtml(schoolRoleVo.getRoleName()!=null?schoolRoleVo.getRoleName():""):""%>"/> *
角色描述：	rows="5" cols="50" require="false" datatype="Limit" msg="角色描述不大于128个中文字符" max="255"><%=schoolRoleVo!=null?CodeFilter.toHtml(schoolRoleVo.getRoleDesc()!=null?schoolRoleVo.getRoleDesc():""):""%>
配发短信数：	"/> 条现在还剩<%=schoolRolePrismsVo!=null&&schoolRolePrismsVo.getSmsTotalNum()!=null?schoolRolePrismsVo.getSmsTotalNum().longValue()-schoolRolePrismsVo.getSmsSendNum().longValue():"0"%>条可配送
可发范围：
	系统选项 >全校教师 >全校班主任 >全校学生 >全校教辅人员行政部门学科分组 <% if(subjecGgroupList!=null&&!subjecGgroupList.isEmpty()){ for(int i=0;iMasSubjectVo masSubjectVo = (MasSubjectVo)subjecGgroupList.get(i); %> > ;<%=masSubjectVo.getName() %> } } %> 年级分组 <% if(gradeGroupList!=null&&!gradeGroupList.isEmpty()){ for(int i=0;iMasGradeVo masGradeVo = (MasGradeVo)gradeGroupList.get(i); %> > ;<%=masGradeVo.getName() %> } } %> 校内分组 <% if(groupList!=null&&!groupList.isEmpty()){ for(int i=0;iOrgBgroupVo orgBgroupVo= (OrgBgroupVo)groupList.get(i); %> > ;<%=orgBgroupVo.getBName()%> } } %> 学生级 <% if(gradeGroupList!=null&&!gradeGroupList.isEmpty()){ for(int i=0;iMasGradeVo masGradeVo = (MasGradeVo)gradeGroupList.get(i); %> > ;<%=masGradeVo.getName() %> } } %>

3：css

复制代码代码如下:

 
 li { リストスタイルタイプ: なし; 
.basic {幅:20em; } 
.basic {
幅: 260px; 
フォントファミリー: verdana; 
ボーダー: 1 ピクセルの黒一色。 
} 
.basic div { 
背景色: #eee; 
} 
.basic p { 
margin-bottom : 10px; 
境界線: なし。 
テキスト装飾: なし。 
フォントの太さ: 太字; 
フォントサイズ: 10px; 
マージン: 0px; 
パディング: 10px; 
} 
.basic a { 
カーソル:ポインタ; 
表示:ブロック; 
パディング:5px; 
マージントップ: 0; 
テキスト装飾: なし。 
フォントの太さ: 太字; 
フォントサイズ: 12px; 
色: 黒; 
背景色: #00a0c6; 
ボーダートップ: 1px ソリッド #FFFFFF; 
border-bottom: 1px ソリッド #999; 
背景画像: url("AccordionTab0.gif"); 
} 
.basic a:hover { 
背景色: 白; 
背景画像: url("AccordionTab2.gif"); 
} 
.basic a.selected { 
色: 黒; 
背景色: #80cfe2; 
背景画像: url("AccordionTab2.gif"); 
} 