`
zeng_84_long
  • 浏览: 58133 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

JS CheckBox事件

阅读更多

 <%@ 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>部门列表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');

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

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

 <SCRIPT LANGUAGE="JavaScript">
                       g_readonly = false; //<!-- 控制checkbox的可编辑状态 %=isShowState% -->

g_hasCheckbox = true;

g_checkboxName = 'selItemB';

g_checkboxNameLevel = true;

 

//<!-- 从数据库获取数据,生成树 %=Tree.genTree()%-->

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>

分享到:
评论

相关推荐

    checkBox全选——jscheckBox全选——jscheckBox全选——js

    在JavaScript(JS)中,`checkBox`,也称为复选框,是网页表单中常见的一种元素,用于用户选择一个或多个选项。全选功能在处理多选项时非常实用,比如在一个列表中批量选择所有项目。这个标题和描述虽然重复,但明显...

    JS操作CheckBox控件

    JavaScript(简称JS)是一种轻量级的解释型编程语言,广泛应用于网页和互联网应用开发,包括操作DOM元素、处理用户交互、实现动态效果等。在本篇内容中,我们将探讨如何使用JavaScript操作ASP.NET中的CheckBox控件,...

    用JS修改checkbox的选中状态

    在JavaScript(JS)中,操作HTML元素,包括修改checkbox(复选框)的选中状态,是前端开发中常见的任务。复选框是用户界面中一种允许用户进行多项选择的控件,其状态通常有两种:选中(checked)和未选中。在本文中...

    jS checkbox 多选

    在网页开发中,JavaScript(简称JS)是一种常用的脚本语言,用于实现客户端的交互功能。在处理表单数据时,checkbox(复选框)经常被用作用户可以选择多个选项的元素。本文将深入探讨如何使用JavaScript实现checkbox...

    jstree_checkbox

    "jstree_checkbox"是一个专门用于创建具有复选框功能的权限树结构的JavaScript库。在Web开发中,这样的工具非常实用,特别是在处理用户角色、权限分配或组织结构等需要多级选择和层级关系的场景。它允许用户通过交互...

    JS控制checkboxJS控制checkboxJS控制checkbox

    本文将深入探讨如何使用JavaScript来控制checkbox的行为,包括选择、取消选择、检查状态以及处理与checkbox相关的事件。 一、获取checkbox 在JavaScript中,可以通过`document.getElementById`、`document....

    js实现checkbox级联选择

    使用javascript实现checkbox级联选择

    关于表格(table)中checkbox等相关事件操作(动态添加行+隔行换色等相关)(jquery)

    本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件操作,包括动态添加行、隔行换色、选中变色、全选与反选等功能。 首先,让我们了解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库,它简化了...

    JS实现CheckBox复选框全选、不选或全不选功能

    CheckBox复选框JS实现全选、不选、全不选功能,很简单,具体内容如下 思路: 1、获取元素 2、给全选 不选 反选添加点击事件 3、用for循环checkbox 4、把checkbox的checked设置为true即实现全选 5、把checkbox的...

    JS判断单个checkbox是否被选中

    在JavaScript中,处理HTML表单...以上就是关于“JS判断单个checkbox是否被选中”的详细解释。理解并熟练运用这些知识,可以帮助你在网页应用中实现更丰富的用户交互功能。记得在实践中不断尝试和优化,以提升用户体验。

    JS实现TreeView中Checkbox的控制

    `JS`(JavaScript)作为网页动态交互的主要语言,是实现`TreeView`中`Checkbox`功能的关键。本篇文章将深入探讨如何使用`JS`来实现`TreeView`中`Checkbox`的控制,包括点击父节点时全选子节点,以及点击子节点时保持...

    js checkbox全选 反选 取消全部设置表单html复选框勾选

    在网页开发中,JavaScript(简称JS)是一种广泛使用的客户端脚本语言,用于处理网页上的交互逻辑。当涉及到HTML表单中的复选框(checkbox)时,全选、反选和取消全部勾选的功能是非常常见的需求。这些功能可以提高...

    常用的js全选checkbox按钮的功能

    在JavaScript(JS)中,全选复选框(checkbox)是一项常见的功能,它允许用户一键选择页面上所有的可选项。这个功能广泛应用于数据表格、表单以及任何包含多个选择的界面中,提升用户体验,简化操作流程。在本篇讨论...

    js获得Gridview中选中checkbox行的信息

    在JavaScript环境下,处理GridView的数据交互尤为重要,特别是当需要获取用户通过Checkbox选择的行信息时。本文将详细介绍如何使用JavaScript获取GridView中选中Checkbox行的信息。 首先,理解基础概念: 1. **...

    js tree,checkbox tree

    3. **事件处理**:jstree触发多种事件,如`select_node`、`check_node`等,可以监听这些事件来执行相应的业务逻辑。例如,当用户勾选或取消一个节点时,你可以获取到选中的节点数据,或者更新服务器端的数据。 4. *...

    checkbox.js

    1. **自定义事件**:`checkbox.js`允许开发者监听Checkbox的状态变化,可以自定义相关事件,如`onChange`,在Checkbox状态改变时执行相应的逻辑。 2. **联动效果**:在多组Checkbox之间,`checkbox.js`可以通过编程...

    javascript实现checkbox多级选择

    在JavaScript编程中,实现Checkbox的...总的来说,JavaScript实现Checkbox的多级选择是一个涉及到DOM操作、事件处理、可能还有数据结构和算法的综合问题。理解并掌握这一技能,对于开发复杂的前端应用是非常重要的。

    js checkbox全选 反选 取消全部设置表单html复选框

    综上所述,实现"js checkbox全选 反选 取消全部设置表单html复选框"的功能,主要涉及到JavaScript对HTML元素的操控,特别是`addEventListener`用于添加事件监听,以及`querySelectorAll`和`forEach`用于遍历和操作...

    js checkbox全选 反选 取消全部设置表单checkbox复选框勾选

    在JavaScript编程中,`checkbox`元素是HTML表单中常用的一种控件,用户可以通过它来选择或取消选择某个选项。本篇文章将详细讲解如何...在项目中,你可以根据压缩包中的`js checkbox`文件进一步学习和实践这些功能。

    Jquery为单选框checkbox绑定单击click事件

    本文将详细解读如何使用Jquery为单选框checkbox绑定单击click事件,并在事件触发时执行相应的函数。 首先,我们需要了解HTML中单选框checkbox的定义。单选框是表单元素中的一个类型,它允许用户在一组选项中选择一...

Global site tag (gtag.js) - Google Analytics