jsp 权限树样式

<%@ page language = "java" contentType = "text/html; charset=utf-8"

    pageEncoding = "utf-8" %>

  <%@ taglib uri = " http://java.sun.com/jsp/jstl/core" ; prefix = "c" %>

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd" ; >

< html >

< head >

< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >

< script type = "text/javascript" src = "../script/jquery-1.11.1.js" ></ script >

< script type = "text/javascript" >

     document.οnclick= function (e){

       var event = e || window.event;

       var ele = event.srcElement || event.target;

       if (ele.id != "dept" ){ //鼠标点击的范围不在指定范围内

            //$("#d").val("");

            $( "#dept" ).next().hide();

       }

     };

     

      function showdept(obj) {

          console.log( "a" );

          $(obj).next().slideToggle();

     }

     $( function (){

          $( "#dept" ).next().hide();

           var dept = '${dept }' ;

           //console.log(dept);

          if (dept != "" ){

               var deptjson = eval( '(' +dept+ ')' );

               for ( var i = 0;i<deptjson.length;i++){

                   getNote(deptjson[i][ "bm_id" ],deptjson[i][ "s_id" ],deptjson[i][ "name" ]);

              }

          }

          

     });

     

     

     

      function getNote(bm_id,s_id,name){

           var temp= "<li id='tree_li" +bm_id+ "'>" ;

                   temp+= "<div οnclick='getInfo(this," +bm_id+ ")'>" +name;

                   temp+= "</div>" ;

              temp+= "</li>" ;

           if (s_id<=0){

              $( "#checkall" ).append(temp);

          } else {

                if ($( "#tree_li" +s_id).children( "ul" ).length>0){

                   $( "#tree_li" +s_id).children( "ul" ).append(temp);

              } else {

                   $( "#tree_li" +s_id).append( "<ul>" +temp+ "</ul>" );

              }

          }

          

          

     }

      function getInfo(obj,bm_id){

           //alert($(obj).html()+bm_id);  style='list-style: none;' 去除li标签的点。

          console.log($(obj).html()+bm_id);

          $( "#dept" ).empty();

          $( "#dept" ).val($(obj).html());

          $( "#bmId" ).val(bm_id);

     }

</ script >

< title > 角色权限部门 </ title >

</ head >

< body >

      < h1 > 角色部门 </ h1 >

      < form action = "addTBR.do" method = "post" >

          角色:

               < select name = "role" style =" width : 200px ; height : 30px ;" >

                    < c:forEach items = " ${role } " var = "r" >

                         < option value = " ${r.id } " > ${r.name } </ option >

                    </ c:forEach >

               </ select >< br >

          

               < div >

                    < input id = "bmId" name = "bm_id" type = "text" style =" display : none ;" />

                   部门: < input id = "dept" type = "text" onclick = "showdept(this)" style =" width : 300px ; height : 30px ; margin-top : 10px ;" >

                         < div style =' width : 330px ; height : 150px ; overflow : auto ; margin-left : 37px ; background-color : #D6D6FF ;' >

                              < ul id = "checkall" >

                                  

                              </ ul >

                         </ div >

               </ div >

               <%--<select name = " dept ">

                   <c:forEach items="${ dept }" var ="d">

                        <option value="${d.bm_id }">${d.name }</option>

                   </c:forEach>

              </select><br>--%>

          权限:     

               < select name = "right" style =" width : 200px ; height : 30px ; margin-top : 10px ;" >

                    < c:forEach items = " ${right } " var = "r" >

                         < option value = " ${r.id } " > ${r.name } </ option >

                    </ c:forEach >

               </ select >  

           < div >

            < input type = "submit" value = "保存" />

            < input type = "button" value = "取消" onclick = "history.back();" />

        </ div >

      </ form >

</ body >

</ html >