百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> ztree+Struts2异步检索数据例子
分享文章到:

ztree+Struts2异步检索数据例子

发布时间:01/15 来源: 浏览: 关键词:
ztree插件实现树形效果的例子小编整理过不少了,下面我们来看一篇关于ztree+Struts2异步检索数据例子,希望文章能够帮助到大家的哦。

今天分享一个ztree+Struts2异步检索数据demo。

首先效果图:

客户端html和js代码:

 代码如下

<script type="text/javascript">
var quickMsg = "输入关键字按回车键检索";
$(function(){
            $("#quickQuery").focus(
                function(){
                    if($.trim($("#quickQuery").val()) == quickMsg)
                    {
                        $("#quickQuery").val("");
                    }
            });       
    });
function checkBack (e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeForRole");
            nodes = zTree.getCheckedNodes(true);
            id = "";
            name = "";
            nodes.sort(function compare(a,b){return a.id-b.id;});
            for (var i=0, l=nodes.length; i&lt;l; i++)
{
                id += nodes[i].id + ",";
                name += nodes[i].name + ",";
            }
            if (name.length > 0 )
{
name = name.substring(0, name.length-1);
}
            if (id.length > 0 )
{
id = id.substring(0, id.length-1);
}
            var selObj = $("#userForRoleSel");
            selObj.attr("value", name);
            $("#selectRole").val(id);
            $("#userForRoleSel").focus();         
        }
//ajax回调 如果无记录则给予提示
    function asyncBack(event, treeId, treeNode, msg) {
var nodes = $.fn.zTree.getZTreeObj("treeForRole").getNodes();
            if(nodes.length==0)
            {
$("#treeForRole").html("<span style='color:#ff0000; margin-left:10px; margin-top:105px;'>未检索到匹配的记录</span>");
            }
        }
    function showMenu() {
                $(function(){
                    if($("#quickQuery").val() == "")
                    {
                        $("#quickQuery").val(quickMsg);
                    }
                    document.onkeydown=function(e)
                    {
                        //回车触发ajax查询   
                        if((e ? e.which :event.keyCode)==13)
                            {
                                 var setting = {
                                            check: {
                                                enable: true,
                                                chkStyle: "checkbox",
                                                chkboxType: { "Y":"s", "N":"s"  }
                                            },
                                            callback: {
                                                onCheck: checkBack,
                                                onAsyncSuccess :asyncBack
                                            },
                                            
                                            async: {
                                                enable: true,
                                                url:"User_ajaxRoles.action",
                                                otherParam:{ "nameKey" : $.trim($("#quickQuery").val())},
                                                dataType: "json",
                                                dataFilter: null
                                            },
                                            data: {
                                                simpleData: {
                                                    enable: true
                                                }
                                            }
                                            
                                        };
                                
                                $.fn.zTree.init($("#treeForRole"), setting);
                            }
                    };
                });
            var selObj = $("#userForRoleSel");
            var businessOffset = $("#userForRoleSel").offset();
            $("#menuContentForRole").css({left:businessOffset.left + "px", top:businessOffset.top + selObj.outerHeight() + "px"}).slideDown("fast");
            $("body").bind("mousedown", onBodyDown);
        }
function hideMenu() {
            $("#menuContentForRole").fadeOut("fast");         
        }
function onBodyDown(event) {
            if (!(event.target.id == "menuBtnForRole" || event.target.id == "menuContentForRole" || $(event.target).parents("#menuContentForRole").length>0)) {
                hideMenu();
            }
        }
</script>

<s:textfield id="userForRoleSel" name="userForRoleSel" readonly="true" size="18" />
<a id="menuBtnForRole" href=" javascript:showMenu();">选择</a>
<div id="menuContentForRole" class="menuContent"
            style=" border:1px solid #ccc;width:198px;height:160px;overflow:scroll;scroll-y;display:none;position: absolute; background-color:#fcfcfc;">
            <input class="quickText" id="quickQuery" type="text" />
            <ul id="treeForRole" class="ztree" style="margin-top: 0; width: 140px;">
</ul>
</div>
<s:hidden id="selectRole" name="role.roleId" />

后台使用Struts2,相关代码如下
Action代码:

 代码如下

public String ajaxRoles()
        throws Exception
{
        try
        {
            result = roleService.getAjaxRoles(nameKey);
        }
        catch(Exception e)
        {
            log.error(e.getMessage());
            throw e;
        }
        return "ajaxRoles";
}

Struts2-User.xml 代码:

 代码如下

<package name="rbac_user" namespace="/" extends="json">
    <action name="User_*" class="xx.UserAction" method="{1}">
        <result name="ajaxRoles" type="json">
            <param name="root">result</param>
        </result>
    </action>
</package>

Service代码:

 代码如下


public String getAjaxRoles(String nameKey)
{
        //Dao层是一个简单的根据name查询 不再赘述
        List<Role> results = roleDao.getAjaxRoles(nameKey);
        JSONArray json = new JSONArray();
        for (Role ro : results)
        {
            JSONObject jo = new JSONObject();
            jo.put("id", ro.getRoleId());
            jo.put("name", ro.getName());
            json.add(jo);
        }
        return json.toJSONString();
}

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有22人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板