zoukankan      html  css  js  c++  java
  • jeecg t:treeSelectTag 联动处理

    <%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@include file="/context/mytags.jsp" %>
    <!DOCTYPE html>
    <html>
    <head>
        <title>uitags</title>
        <t:base type="jquery,easyui,tools,autocomplete"></t:base>
        <style>
            <!--
            .ac_over {
                background: #E0ECFF;
                cursor: pointer;
                color: #416AA3;
            }
    
            .ac_results {
                border: 1px solid rgb(172, 216, 236);
            }
    
            -->
        </style>
    </head>
    <body>
    <t:formvalid formid="formobj" dialog="false" layout="div" callback="test" action="jeecgFormDemoController.do?testsubmit"
                 beforeSubmit="setContentc">
        <fieldset>
            <legend>字典示例 | t:dictSelect</legend>
            <table>
                <tr>
                    <td align="center" width="100px"><label class="Validform_label">radio:</label></td>
                    <td class="value"><t:dictSelect field="sex" type="radio" typeGroupCode="sex" hasLabel="false" title="性别"
                                                    defaultVal="1"></t:dictSelect>
                        <span class="Validform_checktip"></span>
                    </td>
                </tr>
    
                <tr>
                    <td align="center" width="100px"><label class="Validform_label">select:</label></td>
                    <td class="value"><t:dictSelect field="sex" type="select" typeGroupCode="sex" hasLabel="false"
                                                    title="性别" defaultVal="1"></t:dictSelect>
                        <span class="Validform_checktip"></span>
                    </td>
                </tr>
                <tr>
                    <td align="center" width="100px"><label class="Validform_label">checkbox:</label></td>
                    <td class="value"><t:dictSelect field="dbtype" type="checkbox" typeGroupCode="dbtype" hasLabel="false"
                                                    title="数据库类型" defaultVal="oracle,mysql"></t:dictSelect>
                        <span class="Validform_checktip"></span>
                    </td>
                </tr>
                <tr>
                    <td align="center" width="100px"><label class="Validform_label">数据表字典:</label></td>
                    <td class="value"><t:dictSelect field="name" defaultVal="1" dictTable="t_s_base_user"
                                                    dictCondition="where delete_flag=0" dictField="username"
                                                    dictText="realname" title="用户"></t:dictSelect>
                        <span class="Validform_checktip"></span>
                    </td>
                </tr>
            </table>
        </fieldset>
    
        <fieldset>
            <legend>树</legend>
            <table>
                <tr>
                    <td align="center" width="100px"><label class="Validform_label">comboTree:</label></td>
                    <td class="value"><t:comboTree url="jeecgFormDemoController.do?getComboTreeData"
                                                   value="402880e447e99cf10147e9a03b320003" name="depid" id="depid"
                                                   width="200"></t:comboTree>
                        <span class="Validform_checktip"></span></td>
                </tr>
    
                <tr>
                    <td align="center" width="100px"><label class="Validform_label">ztree 树控件:</label></td>
                    <td class="value"><t:selectZTree id="citySel" url="jeecgFormDemoController.do?getTreeData"
                                                     windowWidth="400px"></t:selectZTree> <span
                            class="Validform_checktip"></span></td>
                </tr>
    
    
            </table>
        </fieldset>
    
        <fieldset>
            <legend>自动补全 | t:autocomplete</legend>
            <table>
                <tr>
                    <td align="center" width="100px"><label class="Validform_label">autocomplete:</label></td>
                    <td class="value"><t:autocomplete entityName="TSUser" searchField="userName"
                                                      name="userName"></t:autocomplete>
                        <span class="Validform_checktip"></span>
                    </td>
                </tr>
            </table>
        </fieldset>
    
        <fieldset>
            <legend>选择控件 | t:choose</legend>
            <table>
                <tr>
                    <td align="center" width="100px"><label class="Validform_label">choose:</label></td>
                    <td class="value">
                        <input id="roleid" name="roleid" type="hidden" value=""/>
                        <input name="roleName" class="inputxt" value="" id="roleName" readonly="readonly" datatype="*"/>
                        <t:choose hiddenName="roleid" hiddenid="id" url="userController.do?roles" name="roleList"
                                  icon="icon-search" title="选择操作标签" textname="roleName" isclear="true"
                                  isInit="true"></t:choose>
                        <span class="Validform_checktip"></span>
                    </td>
                </tr>
            </table>
        </fieldset>
        <fieldset>
            <legend>国际化语言输出 | t:mutiLang</legend>
            <table>
                <tr>
                    <td align="center" width="100px"><label>国际化:</label></td>
                    <td class="value">
                        <c:out value="<t:mutiLang langKey='common.add' />"/> <br>
                        翻译结果:<t:mutiLang langKey='common.add'/><br>
                        <c:out value="<t:mutiLang langKey='common.rang' langArg='请输入,6,10' />"/> <br>
                        翻译结果: <t:mutiLang langKey='common.rang' langArg="请输入,6,10"/><br>
                    </td>
                </tr>
            </table>
        </fieldset>
    
        <fieldset>
            <legend>通用POPUP选择用户部门</legend>
            <table>
                <tr>
                    <td>选择部门:</td>
                    <td><t:departSelect selectedNamesInputId="orgNames" selectedIdsInputId="orgIds"
                                        departIdsDefalutVal="8a8ab0b246dc81120146dc8180ba0017,"
                                        departNamesDefalutVal="JEECG开源社区,"></t:departSelect></td>
                </tr>
                <tr>
                    <td>选择部门:</td>
                    <td><t:orgSelect selectedNamesInputId="orgName" selectedIdsInputId="orgId"
                                     departIdsDefalutVal="8a8ab0b246dc81120146dc8180ba0017,"
                                     departNamesDefalutVal="JEECG开源社区,"></t:orgSelect>(树列表)
                    </td>
                </tr>
                <tr>
                    <td>选择用户:</td>
                    <td><t:userSelect title="用户名称" selectedNamesInputId="userNames" selectedIdsInputId="userIds"
                                      windowWidth="1000px" windowHeight="600px"></t:userSelect></td>
                </tr>
            </table>
        </fieldset>
    
        <fieldset>
            <legend>文件上传 | t:webUploader</legend>
            <table>
                <tr>
                    <td>多文件上传:</td>
                    <!-- 文件路径对应的参数name为‘fileName1’、业务类型是‘photosucai’、自动上传、上传文件扩展名限制doc,txt,jpg、按钮风格:绿色大号按钮 -->
                    <td><t:webUploader name="fileName1" bizType="photosucai" auto="true" extensions="doc,txt,jpg"
                                       buttonStyle="btn-green btn-L"></t:webUploader></td>
                </tr>
                <tr>
                    <td>单文件上传:</td>
                    <!-- 文件路径对应的参数name为‘fileName2’、单个文件大小限制为500kb、按钮风格:绿色中号按钮、上传文件数量限制为1 -->
                    <td><t:webUploader name="fileName2" fileSingleSizeLimit="500" buttonStyle="btn-green btn-M mb20"
                                       fileNumLimit="1"></t:webUploader></td>
                </tr>
                <tr>
                    <td>图片上传:</td>
                    <!-- 文件路径对应的参数name为‘fileName3’、不显示上传文件列表、自动上传、上传按钮显示文字为‘选择图片’、按钮风格:蓝色小按钮、上传类型为图片上传、上传文件数量限制为3 -->
                    <td><t:webUploader name="fileName3" displayTxt="false" auto="true" buttonText="选择图片"
                                       buttonStyle="btn-blue btn-S" type="image" fileNumLimit="3"></t:webUploader></td>
                </tr>
            </table>
        </fieldset>
    
    	<!--
        <fieldset>
            <legend>分类树标签 | t:treeSelectTag(CODE对应系统管理->分类管理)</legend>
            <table>
                <tr>
                    <td>进口汽车分类:</td>
                    <td><t:treeSelectTag code="A03A02" field="sex"/></td>
                </tr>
            </table>
        </fieldset>
    	-->
    
        <fieldset>
            <legend>分类树标签 | t:treeSelectTag(CODE对应系统管理->分类管理)</legend>
            <table>
                <tr>
                    <td>进口汽车分类:</td>
                    <td>
    					<input type="text" class="inputxt" name="sexText" id="sexText" onclick="showSexTree();">
    					<input type="hidden" name="sex" id="sex">
    					<div id="showSexTreeContent" class="menuContent" style="display: none; position: absolute; border: 1px #CCC solid; background-color: #F0F6E4;z-index:9999;"> <ul id="showSexTree" class="ztree" style="margin-top:0;"></ul></div>
    				</td>
                </tr>
            </table>
        </fieldset>
    
    
        <t:dictSelect id="stbFirsttype" field="stbFirsttype" type="list" extendJson="{class:'form-control input-sm'}"
                      datatype="*" typeGroupCode="job_level" hasLabel="false" title="突发事件一级类别"></t:dictSelect>
    
    
    </t:formvalid>
    
    <script type="text/javascript">
    
    	var aaa = "A03A02";
        $("#stbFirsttype").change(
            function () {
    
    
    			 aaa = "A03A01";
                $("#sex").attr("code", aaa);
    
    
            });
    
    
        $(function () {
            $("#eventTypeText").attr("readonly", "readonly");
            $("#eventTypeText").click(
                function () {
                    $("#showEvEntTypETreeContent").attr("style", "position: absolute; 100%;border: 1px solid rgb(204, 204, 204);z-index: 9999;left: 0;top: 30px;background-color: rgb(240, 246, 228);")
                    $("#showEvEntTypETreeContent ul").attr("style", "margin-top: 0px; 100%;")
                })
        })
    
    
        $(function () {
            if (!$.fn.zTree) {
                $('head').append('<link rel="stylesheet" href="plug-in/ztree/css/zTreeStyle.css"/>');
                $('head').append('<script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.core-3.5.min.js"></script>');
                $('head').append('<script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>');
            }
            $("body").bind("mousedown", onBodyDownBySex);
        });
        var sexSetting = {
            check: {enable: true, chkStyle: 'checkbox', chkboxType: {'Y': '', 'N': ''}},
            view: {dblClickExpand: false},
            data: {simpleData: {enable: true}, key: {name: 'text'}},
            callback: {onClick: sexOnClick, onCheck: sexOnCheck}
        };
    
        function sexOnCheck(e, treeId, treeNode) {
            var myTree = $.fn.zTree.getZTreeObj("showSexTree");
            var nodes = myTree.getCheckedNodes(true);
            var tempId = '', tempText = '';
            if (nodes && nodes.length > 0) {
                for (var i = 0; i < nodes.length; i++) {
                    tempId += nodes[i].id + ',';
                    tempText += nodes[i].text + ',';
                }
            }
            if (tempId == '') {
                $('#sex').val('');
            } else {
                $('#sex').val(tempId.substring(0, tempId.length - 1));
            }
            if (tempText == '') {
                $('#sexText').val('');
            } else {
                $('#sexText').val(tempText.substring(0, tempText.length - 1));
            }
            e.stopPropagation();
        }
    
        function sexOnClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("showSexTree");
            zTree.checkNode(treeNode, !treeNode.checked, true, true);
            e.stopPropagation();
        }
    
        function showSexTree() {
            if ($("#showSexTreeContent").is(":hidden")) {
                $.ajax({
                    url: 'categoryController.do?tree',
                    type: 'POST',
                    dataType: 'JSON',
                    async: false,
                    //data: {selfCode: "A03A02"},
    				data: {selfCode: aaa},
                    success: function (res) {
                        var obj = res;
                        $.fn.zTree.init($("#showSexTree"), sexSetting, obj);
                        var deptObj = $("#sexText");
                        var deptOffset = $("#sexText").offset();
                        $("#showSexTreeContent").css({
                            left: deptOffset.left + 'px',
                            top: deptOffset.top + deptObj.outerHeight() + 'px'
                        }).slideDown("fast");
                        $('#showSexTree').css({ deptObj.outerWidth() - 12 + "px"});
                        var zTree = $.fn.zTree.getZTreeObj("showSexTree");
                        var idVal = $("#sex").val();
                        if (idVal != null && idVal != '') {
                            if (idVal.indexOf(",") > -1) {
                                var idArray = idVal.split(",");
                                for (var i = 0; i < idArray.length; i++) {
                                    var node = zTree.getNodeByParam("id", idArray[i], null);
                                    zTree.checkNode(node, true, true);
                                }
                            } else {
                                var node = zTree.getNodeByParam("id", idVal, null);
                                zTree.checkNode(node, true, true);
                            }
                        }
                    }
                });
            }
        }
    
        function onBodyDownBySex(event) {
            if (event.target.id == '' || (event.target.id.indexOf('switch') == -1 && event.target.id.indexOf('check') == -1 && event.target.id.indexOf('span') == -1 && event.target.id.indexOf('ico') == -1)) {
                $("#showSexTreeContent").fadeOut("fast");
            }
        }
    
    
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    OSGI .Net 框架学习
    ArcEngine开发过程中的空间关系
    ITOCControl添加鼠标右键菜单
    IHookHelper的使用
    ITopologicalOperator接口调用
    GeoProcessor的使用方法
    ArcEngine内置工具条
    OSGI.NET插件方式开发你的应用
    C#在linux上运行实现
    Linux 下随机启动自己的应用 -请使用while(true) 不要Console.ReadKey()
  • 原文地址:https://www.cnblogs.com/Jeely/p/12876313.html
Copyright © 2011-2022 走看看