jsTree checkbox plugin使用笔记

引入css文件
<link rel="stylesheet" type="text/css" href="js/assets/global/plugins/jstree/dist/themes/default/style.min.css" />
引入js文件
<script type="text/javascript" src="js/assets/global/plugins/jstree/dist/jstree.min.js"></script>

前端放一个div用来做为tree的容器
<div style="overflow-y: auto; overflow-x: auto; width: 100%; height: 534px;" id="jstree_bsbm_div"></div>

        //构造树型结构
    var handleTree = function() {

        getTreeData();
        $("#jstree_bsbm_div").on('select_node.jstree', function(node,selected,event) {
              //绑定选中事件处理函数
              id = selected.node.id;
              parent = selected.node.parent;
              jc = selected.node.original.jc;
//            jcMax = selected.node.original.jcMax;
//            gz = selected.node.original.gz;
              freshtable();
        }).on('refresh.jstree', function(node,selected,event) {
              //刷新事件处理函数
            getTreeData();
        });
    };
    
    //获取树形数据
    var getTreeData = function(){
        var aData = {
                type: "2",
                roledm: roledm,
        }
        $.ajax({
            type : "POST",
            url : "basic/getQxTree",
            dataType : "json",
            contentType : 'application/json', //定义格式
            data : JSON.stringify(aData), //把json转为String传递给后台
            success : function(data) {
//              var data = [
//                  { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" ,'state' : {'selected' : true}},
//                  { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" ,'state' : {'selected' : true}},
//                  { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" ,'state' : {'selected' : false}},
//                  { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" ,'state' : {'selected' : true}},
//              ];


                $('#jstree_bsbm_div').data('jstree', false).empty();
                $("#jstree_bsbm_div").jstree({
                    'core': {
                        'data': data,
                    },
                    plugins: [ "wholerow", "checkbox","types","themes"],
                    "checkbox": {
                        "keep_selected_style": false,//是否默认选中
                    },
                })
                
                // 获取树
                var menuTrees = $('#jstree_bsbm_div').jstree(true);
                // 清空级联关系
                var oldCascade = menuTrees.settings.checkbox.cascade;
                menuTrees.settings.checkbox.cascade = '';
                // 重置级联关系
                setTimeout(function () {
                    menuTrees.settings.checkbox.cascade = oldCascade;
                }, 500);

            },  
            error : function(e) {
                Metronic.alert({
                    type: 'danger',
                    icon: 'warning',
                    message: '树形数据获取失败!',
                    place: 'prepend',
                    closeInSeconds:5,
                    container:'#profileAlertsMsg',
                    focus:true
                });
            }
        });
    };

转载于:https://www.cnblogs.com/sunBinary/p/11083339.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值