关于zTree插件的使用

12 篇文章 0 订阅

页面中一个输入框后方有个选择按钮,点击选择按钮弹出一个树形框选择

以下是部分代码:

A页面:

<td height="26" align="left" nowrap><font color="red">*</font>所属部门: </td>
<td  align="left">
                <input type="hidden" name="unid" id=" unid" style="width:70%" readonly value="${dept.unid}"/>
                <input type="text" name="deptName" id=" deptName" style="width:70%" readonly value="${ dept.Name}"/>
                <input type="button" class="btn" style="height:23px;" value="选择" onClick="selectIndustry();">
</td>

<script type="text/javascript">

function selectIndustry() {
    var url = "${path}/was/tree/xxx_select.jsp?type=radio&unid="+$("# unid").val();
    var returnValue  =window.showModalDialog(url,0, "dialogHeight=480px;dialogWidth=500px;center=y;resizable=1;status=0;scroll=1;");
    if(null != returnValue){
        var arry =returnValue.split("|");
           $("# unid").val(arry[3]);
           $("# deptName").val(arry[2]);
       }
}

</script>

B页面 xxx_select.jsp(暂时写在jsp中)



<%
    String unite = request.getParameter("unite");//级联标志
    String chkboxType = "N".equals(unite) ? " {'Y':'', 'N':''}" : "{'Y':'ps', 'N':'ps'}";
    String type = StrUtil.formatNull(request.getParameter("type"),"radio");//返回树形的类型(radio:单选框   checkbox:复选框)
    String unid= request.getParameter("unid");//获取页面传过来的行业编码值

    request.setAttribute("data",new DeptManager().getDataForZTree());
    request.setAttribute("path",request.getContextPath());
%>

<HTML>
 <HEAD>
  <TITLE>树</TITLE>
    ${import_jquery}
    ${import_ztree}
    ${import_validation}
    ${import_theme}
    <script type="text/javascript" src="${path}/core/js/lw-ui/globalvar.js"></script>
 </HEAD>
<BODY>
    <TABLE width="100%" height="95%" class="form_table_ext">
        <col>
        <col width="100" align="center">
        <tr bgcolor="#FFFFFF">
            <td valign="top">
                <ul id="tree" class="ztree" style="height:100%;overflow-y:auto"></ul>
            </td>
            <td valign="top" style="height:100%"> 
                <br>
                <input type="button" id="btnConfirm" value="确 定">
                <br><br>
                <input type="button" id="btnClose" value="关 闭">
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        var zTree;
        var allSelectedID="";
        var zNodes = ${data};
        var setting = {
            check: {
                enable: true,
                chkStyle: "<%=type%>",
                chkboxType: <%=chkboxType%>,
                radioType: "all"
            },
            callback: {
                onClick: onClick
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        $(function(){
            $("#btnClose").bind("click",doClose);
            $("#btnConfirm").bind("click",doConfirm);
            //初始化节点数据
            zTree = $.fn.zTree.init($("#tree"), setting, zNodes);

            //默认选中指定节点
            var node = zTree.getNodeByParam("unid", '<%= unid%>');
            zTree.selectNode(node);
        });

        //关闭窗口
        function doClose(){
            window.close();
        }

        function doConfirm(){
            var checkedNodes = zTree.getCheckedNodes(true);
            for (i=0;i<checkedNodes.length;i++) {
                var treeNode = checkedNodes[i];
                allSelectedID += (allSelectedID == "" ? "" : ",") + treeNode.pId+"|"+treeNode.id+"|"+treeNode.name+"|"+treeNode.unid;
            }
            window.returnValue = allSelectedID;  
            window.close();
        }

        function hideMenu() {
            $("#menu").fadeOut("fast");
        }

        function onClick(e, treeId, treeNode) {
            if(treeNode.checked){
                hideMenu();
            }else{
                zTree.checkNode(treeNode, true, null, true);
            }
            return false;
        }
    </script>
</BODY>
</HTML>

后台:
    /**
     * 获取全部数据并转成JSON字符串
     */
    public String getDataForZTree(){
        JSONArray array = new JSONArray();
        try{
            String sql = "SELECT UNID,DEPTNAME,PARENTID,HASCHILDREN FROM dept";
            String[][] list = JDBCTool.doSQLQuery(sql);
            if(industryList.length>1)
            for(int i=1;i<list.length;i++){
                JSONObject json = new JSONObject();
                json.put("id", list[i][0]);
                json.put("name", list[i][1]);
                json.put("pId", list[i][2]);
              
                if("Y".equals(industryList[i][3])){
                    json.put("nocheck",true);
                }
                if("".equals(industryList[i][2])){
                    json.put("open",true);
                }
                array.add(json);
            }
        }catch(Exception e){
            e.printStackTrace();
            log.error(e.getMessage(),e);
        }
        //System.out.println(array.toString());
        return array.toString();
    }



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值