jquery easyui tree控件复选框选择处理

------上级状态改变(勾选或取消勾选),所有下级状态跟着改变  ,在tree控件的onCheck事件中实现---------

  cascadeCheck: false,//默认为true表示上下级勾选联动,false表示取消联动
            onCheck: function (node, checked) {
                var childList = $(this).tree('getChildren', node.target);

                if (childList.length == 0) return;

                var checkedTrue = function () {
                    childList.map(function (currentValue) {
                        var objTrue = $("div[id='" + currentValue.domId + "']").find(".tree-checkbox");
                        if (objTrue != null && objTrue != undefined) {
                            var classTrue = objTrue.attr("class");
                            if (classTrue == "tree-checkbox tree-checkbox0")
                                objTrue.removeClass("tree-checkbox tree-checkbox0").addClass("tree-checkbox tree-checkbox1");
                        }
                    });
                };

                var checkedFalse = function () {
                    $.each(childList, function (index, currentValue) {
                        var objFalse = $("div[id='" + currentValue.domId + "']").find(".tree-checkbox");
                        if (objFalse != null && objFalse != undefined) {
                            var classTrue = objFalse.attr("class");
                            if (classTrue == "tree-checkbox tree-checkbox1")
                                objFalse.removeClass("tree-checkbox tree-checkbox1").addClass("tree-checkbox tree-checkbox0");
                        }
                    });
                };
                var checkChangeProperties = checked == true ? checkedTrue() : checkedFalse();
            }

--------------------------------------------------------------------------------------------------------


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>报表设置</title>
    <link href="Resource/Js/jquery-easyui-1.4.1/themes/default/easyui.css" rel="stylesheet" />
    <link href="Resource/Js/jquery-easyui-1.4.1/themes/icon.css" rel="stylesheet" />
    <script src="Resource/Js/jquery-easyui-1.4.1/jquery.min.js"></script>
    <script src="Resource/Js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <style type="text/css">
        a:focus {
            outline-style: none;
            -moz-outline-style: none;
        }
    </style>
</head>
<body>
    <div class="easyui-layout" style="width: 480px; height: 380px;">
        <div data-options="region:'south',split:true" style="height: 50px; padding: 8px; border: 0px solid #ccc; text-align: center;">
            <a id="save" class="easyui-linkbutton">保存</a>
        </div>
        <div data-options="region:'center',title:'选择区域',iconCls:'icon-save'">
            <ul id="classTree">
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript">
    var treeId = "classTree";
    $(function () {
         $('#' + treeId).tree({
            checkbox: true,
            url: 'ReportReportSet.aspx?action=inittree',
            cascadeCheck: false,//默认为true表示上下级勾选联动,false表示取消联动
            onCheck: function (node, checked) {
                var childList = $(this).tree('getChildren', node.target);

                if (childList.length == 0) return;

                var checkedTrue = function () {
                    childList.map(function (currentValue) {
                        var objTrue = $("div[id='" + currentValue.domId + "']").find(".tree-checkbox");
                        if (objTrue != null && objTrue != undefined) {
                            var classTrue = objTrue.attr("class");
                            if (classTrue == "tree-checkbox tree-checkbox0")
                                objTrue.removeClass("tree-checkbox tree-checkbox0").addClass("tree-checkbox tree-checkbox1");
                        }
                    });
                };

                var checkedFalse = function () {
                    $.each(childList, function (index, currentValue) {
                        var objFalse = $("div[id='" + currentValue.domId + "']").find(".tree-checkbox");
                        if (objFalse != null && objFalse != undefined) {
                            var classTrue = objFalse.attr("class");
                            if (classTrue == "tree-checkbox tree-checkbox1")
                                objFalse.removeClass("tree-checkbox tree-checkbox1").addClass("tree-checkbox tree-checkbox0");
                        }
                    });
                };
                var checkChangeProperties = checked == true ? checkedTrue() : checkedFalse();
            }

        });

        //保存
        $("#save").click(function () {
            var ids = getClassChecked(treeId);
            $.ajax({
                type: "get",
                url: "ReportReportSet.aspx?action=save&ids=" + ids,
                success: function (msg) {
                    layer.Invoke.Top.Alert(msg);
                }
            });
        });

    });

    //获取选中节点
    function getClassChecked(tvClassId) {
        var nodes = $('#' + tvClassId).tree('getChecked');
        var s = '';
        for (var i = 0; i < nodes.length; i++) {
            if (s != '') s += ',';
            s += nodes[i].id;
        }
        return s;
    }
    //获取url参数值: alert(GetQueryString("参数名1"));
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
</script>
</html>

猜你喜欢

转载自my.oschina.net/guanxinsui/blog/1816609