用jstree作权限 CheckBox 控制选择

最新推荐文章于 2023-03-14 15:40:10 发布

xushichang

最新推荐文章于 2023-03-14 15:40:10 发布

阅读量2.2w

点赞数

分类专栏： Jquery 文章标签： attributes function input stylesheet menu button

Jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

参考：http://lipeng88213.javaeye.com/blog/727264

：http://junchao.javaeye.com/blog/698823
前台代码：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>角色管理</title>
       <link type="text/css" rel="stylesheet" href="../js/jstree/js0.9/themes/default/style.css"/>
    <script src="../lib/jquery-1.3.2.js"type="text/javascript"></script>
    <script src="../js/jstree/js0.9/jquery.tree.js"type="text/javascript"></script>
    <script type="text/javascript" src="../js/jstree/js0.9/jquery.tree.checkbox.js"></script>
<style type="text/css">

</style>
<script type="text/javascript">

$(function(){
    $.ajaxSetup({cache:false});//ajax调用不使用缓存
    //树
    $("#menuTree").tree({
        //主题
        ui : {
            theme_name : "checkbox"
        } ,
        data : {
          type : "json",
          async : false,
          opts : {
            method: "POST",
            url : "json.aspx"
          }
        },
        types :{
            "default" : {
                draggable : false //设置节点不可拖拽
            }
        },
        plugins : {
            //插件
            checkbox : {}
        }
      }).bind('click.jstree', function(event) {
            var eventNodeName = event.target.nodeName;
     if (eventNodeName == 'INS') {
      return;
     } else if (eventNodeName == 'A') {
      var $subject = $(event.target).parent();
      if ($subject.find('ul').length > 0)
      {
       //$('#show').html("<font color='red' size='2em'>请选择叶子节点</font>");
      }
      else
      {
       alert( $subject.text());
       alert($subject.attr("id"));//获取ID的值。。
      }
     }
});

   //初始化原有菜单权限
    $("#menuTree").ajaxStop(function(){
        /*
        //得到服务器传过来的原有权限id的字符串，格式自定义，我的格式为"0001;0002;xxx;"
        var checkMenu = $('#checkedMenu').val();
        //分割字符串成数组
        var array = checkMenu.split(";");
        for(var i=0;i<array.length;i++){
        //设置原有权限菜单处于选中状态，其中$("#0001")为id为0001的节点。
            jQuery.tree.plugins.checkbox.check($("#"+array[i]+""));
            }
            */
        jQuery.tree.plugins.checkbox.check($("#12"));
    });

});

//取得选中的菜单id
function getMenuIds(){
    //取得所有选中的节点，返回节点对象的集合
    var menu = jQuery.tree.plugins.checkbox.get_checked();
    //得到节点的id，拼接成字符串
    var ids="";
    for(i=0;i<menu.size();i++){
        ids += menu[i].id+";";
    }
    //写回表单
    $('#menuIds2').val(ids);
}
//重置
function reset1(){
    /**
    //得到所有选中的节点集合
    var menu = jQuery.tree.plugins.checkbox.get_checked();
    for(i=0;i<menu.size();i++){
    //去掉其选中状态
    jQuery.tree.plugins.checkbox.uncheck($("#"+menu[i].id+""));
    }
    */
    jQuery.tree.plugins.checkbox.uncheck($("#1"));
}

</script>
</head>
<body>
    <input type="hidden" name="checkedMenu" id="checkedMenu" value="" />
       <input type="button" οnclick="getMenuIds()" value="得到选中id"/>
    <input type="button" οnclick="reset1()" value="取消选中" />
    <input type="text" id="menuIds2" />
      <br />
    <input type="hidden" name="menuIds" id="menuIds" />
    <div id="menuTree" style="height:500px"></div>



</body>
</html>

后台代码：json.aspx

public partial class json : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.ContentType = "application/json";
            //string test = "{/"attr/":{/"id/":/"11/",/"rel/":/"folder/"}, /"children/" : [ { /"data/" : /"彭涛test1/", /"state/" : /"closed/" },{ /"data/" : /"彭涛test2/", /"state/" : /"closed/" } ], /"data/":/"彭涛/",/"state/":/"closed/"}";
            string test = "[{/"data/":/"系统基础/",/"state/":/"open/",/"attributes/":{/"id/":/"1/"},/"children/" : [ { /"data/" : /"彭涛test1/", /"state/" : /"closed/",/"attributes/":{/"id/":/"11/"} },{ /"data/" : /"彭涛test2/", /"state/" : /"closed/" ,/"attributes/":{/"id/":/"12/"}} ]},{/"data/":/"业务逻辑/",/"state/":/"closed/",/"attributes/":{/"id/":/"2/"}}]";
            //string test = "[ { attributes: {id: /"1/"},data : /"A node/", children : [ { attributes: {id: /"2/"},data : /"Only child/" } ,{ attributes: {id: /"4/"},data : /"Only child/" }], state : /"open/" },{ attributes: {id: /"3/"},data : /"Some other node/" }]";
            Response.Write(test);

}
}

xushichang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用jstree作权限 CheckBox 控制选择

参考：http://lipeng88213.javaeye.com/blog/727264：http://junchao.javaeye.com/blog/698823前台代码：角色管理
复制链接

扫一扫