JS CheckBox事件

最新推荐文章于 2022-08-09 09:14:46 发布

原创最新推荐文章于 2022-08-09 09:14:46 发布 · 1.1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #import #javascript #iterator #stylesheet #callback

本文介绍了一个基于Java的Web应用程序页面，该页面用于展示部门列表并实现用户与部门之间的关联。通过使用Java和JSP技术，实现了部门及其下属用户的动态加载，并提供了用户选择功能。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="tos.app.user.domain.service.UserService" %>
<%@ page import="tos.framework.service.ServiceMgr" %>
<%@ page import="tos.app.user.common.UserConstants" %>
<%@ page import="tos.app.system.dfiMST.domain.dto.DfiItemDataDTO" %>
<%@ page import="tos.app.user.domain.dto.UserDTO" %>
<%@ include file="../common/taglibs.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>部门列表                  </title>
    <SCRIPT src="<%=request.getContextPath()%>/views/common/scripts/common.js"></SCRIPT>
     <LINK rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/views/common/styles/style.css">
     <script src='<%=request.getContextPath()%>/views/common/scripts/common.js'></script>
     <%
       Map para = new HashMap();
       UserService userService = (UserService)ServiceMgr.getService(UserConstants.USERSERVICE_BEAN_KEY);
       String typ = "Department";
       List dfiItemData = userService.queryDfiItemDate(typ);
       List userList = userService.select4Group();
       request.setAttribute("dfiItemData",dfiItemData);
       request.setAttribute("userList",userList);
       request.setAttribute("fistQuery","fistQuery");
     %>
          <script type="text/javascript" language="Javascript">
         var winWidth=0;
         var winHeight=0;
         var data = "";
         function callback(){
            var defItem = document.getElementsByName("defItem1");

            var a=0;
          for(var i = 0;i<defItem.length;i++){
              if(defItem[i].checked){
                  ++a;
                  if(defItem[i].value=="undefined") defItem[i].value="";

               if(data=="" && defItem[i].value!=""){
                     data=defItem[i].value;
           }else if(defItem[i].value!=""){
              data+=","+defItem[i].value;
          }
        }

         }
            window.returnValue=data;
            window.document.clear();
            window.close();
       }

     </script>
<script language='javascript'>

var imgPath = '<%=request.getContextPath()%>/images/';
var imgBlank = imgPath + 'arrow_002.jpg';
var imgFolderClose = imgPath + 'plus.gif';
var imgFolderOpen = imgPath + 'minus.gif';
var imgText = imgPath + 'openMark.png';
var targetFrame = '_self';
var clSelected = '#DD0000';
var clUnSelected = '#999999';
var g_hasCheckbox = false;

var g_checkboxName = 'selItem';
var g_checkboxNameLevel = true; //如果有必要，可以不同层次的checkbox.name不同

var g_readonly = false;

var curNode;

function Node(aId, aText){
    this.nodeId = aId;
    this.isOpen = false;
    this.nodeText = aText;
    this.childNodes = new Array();
    this.childCount = 0;
    this.checked = false;
    this.level = 0;
    this.parent = null;
}

Node.prototype.addChild = function(aChildNode){
this.childNodes[this.childCount++] = aChildNode;
}

function dispNode(aNode){
   //var atxt = !aNode.link ? '<font style="cursor:hand" onclick="expand(this.previousSibling)">' + aNode.nodeText + '</font>' : '<a id="a' + aNode.nodeId + '" href="' + aNode.link + '" target="' + targetFrame + '" onclick="change(this);">' + aNode.nodeText + '</a>';
    var atxt = '<font style="cursor:hand" onclick="expand(this.previousSibling)">' + aNode.nodeText + '</font>';
    if (g_hasCheckbox) atxt = '<input type="checkbox" style="width:25px;" name="defItem1" value="' + aNode.link + '" onclick="return selectChanged(this)" ' + (aNode.checked ? 'checked' : '') + '>' + atxt;
    if (aNode.childCount > 0){
        var folderImg = aNode.isOpen ? imgFolderOpen : imgFolderClose;
        //document.write('<img id="' + aNode.nodeId + '" style="cursor:hand" onclick="expand(this)" src="<%=request.getContextPath()%>/images/system.gif">' + atxt);
        document.write('<img id="' + aNode.nodeId + '" style="cursor:hand" onclick="expand(this)" src="'+folderImg+'">' + atxt);
    } else
        document.write('<img src="' + imgText + '">' + atxt);
}

function selectChanged(obj){

if (g_readonly) return false;
if (obj.checked){ // 选择所有父节点，因此需要增加 Node.parent 属性

var objParent = obj.parentNode;
if (objParent || objParent.tagName == 'DIV'){

var nodeParent = eval(objParent.id.substring(3)); // div.id 是 'div' + aNode.nodeId

                      while (nodeParent){
                var objImg = document.getElementById(nodeParent.nodeId);
                objImg.nextSibling.checked = true;
                nodeParent = nodeParent.parent;
                      }
                  }
    }

var divId = 'div' + obj.previousSibling.id;
var divObj = document.getElementById(divId);

    if (!divObj) return;
    var childs = divObj.getElementsByTagName('INPUT');
    for (var i = 0; i < childs.length; i++) childs[i].checked = obj.checked;
}

function change(obj){
    if (curNode) curNode.style.color = clUnSelected;
    curNode = obj;
    obj.style.color = clSelected;
}

function expand(obj){
    while (obj.tagName != 'IMG') obj = obj.previousSibling;
    var divId = 'div' + obj.id;
    var divObj = document.getElementById(divId);

    if (divObj) with (divObj){
        if (style.display == 'none'){
            obj.src = imgFolderOpen;
            style.display = 'block';
        } else {
            obj.src = imgFolderClose;
            style.display = 'none';
        }
    }
}

function makeTree(aNode, aLevel){
if (aLevel == 0){
aNode.isOpen = true; //默认根节点展开

        dispNode(aNode);
    }
    var dispMode = aNode.isOpen ? 'block' : 'none';

    document.write('<div id="div' + aNode.nodeId + '" style="display:' + dispMode + '">');
    var tmpNode;
    for (var i=0; i < aNode.childCount; i++){
        tmpNode = aNode.childNodes[i];
        tmpNode.parent = aNode;
        tmpNode.level = aLevel + 1;

for (var j=0; j <= aLevel; j++)
document.write('     &nbsp');

dispNode(tmpNode);
document.write('<br>');

        if (tmpNode.childCount > 0) makeTree(tmpNode, aLevel+1);
    }
     document.write('</div>');
}
</script>

<SCRIPT LANGUAGE="JavaScript">
g_readonly = false; //

g_hasCheckbox = true;

g_checkboxName = 'selItemB';

g_checkboxNameLevel = true;

//

var node_root = new Node('node_root', '部门列表');

<%
int i=0;
int j=0;
for(Iterator iter = dfiItemData.iterator();iter.hasNext();){
    DfiItemDataDTO dataDTO = (DfiItemDataDTO)iter.next();
      %>
       var node_<%=i%> = new Node('node_<%=i%>', '<%=dataDTO.getDefItem1()%>');
       node_root.addChild(node_<%=i%>);
      <%
      for(Iterator iter1 = userList.iterator();iter1.hasNext();){
        UserDTO userDTO = (UserDTO)iter1.next();
        if(userDTO.getBelongPart().equals(dataDTO.getDefItem1())){
      %>
        var nodeCH_<%=j%>= new Node('nodeCH_<%=j%>', '<%=userDTO.getUname()%>');
        nodeCH_<%=j%>.link='<%=userDTO.getEMail()%>';
        node_<%=i%>.addChild(nodeCH_<%=j%>);
      <%
      }
      j++;
      }

      i++;
    }
%>
    makeTree(node_root , 0);
</SCRIPT>
     <script src='<%=request.getContextPath()%>/views/common/scripts/openWindow.js'></script>
</head>
<body>
<TABLE id="dataList" bgcolor="#638EA5" border="0" width="100%" cellspacing="1" cellpadding="0">
    <TR align="center">
        <TD><html:submit value=" OK " onclick="callback()" style="width: 50px;"/></TD>
     </TR>
</TABLE>

</body>
</html>