bootstrap-treeview 简单应用

链接: https://pan.baidu.com/s/1YgIu_xP9rBy_0gE0XiSvvQ 提取码: 4kr3 

//1、引用css、js
///
//src/css/bootstrap-treeview.css

//2、html代码:
//
//     所属部门
//
//
//    

//        
//        

//      

//
 

 

//3、JS代码-----begin
function loadtreeview() {

    if (_shopid == undefined || _shopid == null || _shopid == '') {
        window.location.href = "userlogin.html";
        return;
    }
    var _deptid = _shopid;
    if (_role == "超级管理员") {
        _deptid = '';
    }

    $.getJSON('/Dept/GettreeList', { sw: "", deptid: _deptid, token: '' }, function (r) {
        if (r.succeed) {
            var defaultData = eval(r.data);
            var options = {
                //color: "#428bca",
                //backColor: "black",背景色
                //borderColor:'green',
                collapseIcon: "icon-share",//可收缩的节点图标
                nodeIcon: "icon-drop",
                //emptyIcon: "glyphicon glyphicon-ban-circle",//设置列表树中没有子节点的节点的图标
                expandIcon: "icon-share",  //设置列表上中有子节点的图标
                highlightSearchResults: true,//是否高亮搜索结果 默认true
                highlightSelected: true,     //是否选中高亮显示
                onhoverColor: "#f5f5f5",    //鼠标滑过的颜色
                levels: 1,                 //设置初始化展开几级菜单 默认为2
                selectedIcon: 'icon-pointer',
                // selectedBackColor: 'black',  //设置被选中的节点背景颜色
                //selectedColor : 'red',      //设置被选择节点的字体、图标颜色
                showBorder: true,                //是否显示边框
                showCheckbox: false,              //是否显示多选框
                //uncheckedIcon:'',             //设置未选择节点的图标
                showTags: true,//显示徽章

                data: defaultData,
                onNodeSelected: function (event, data) {
                    //$("#MNDept").val(data.text);
                    //TypeVal
                    var _TypeVal = data.TypeVal;
                    var _deptid = data.deptid;
                    $("#MNDept").attr('data-type', _TypeVal);
                    var data_gw = "", data_bm = "", data_qy = "", data_qy_id = "";
                    if (_TypeVal == "岗位") {
                        data_gw = data.text;
                        var parent_node_bm = $('#dv_treeview').treeview('getParent', data.nodeId);
                        if (parent_node_bm != undefined) {
                            data_bm = parent_node_bm.text;
                            var parent_node_qy = $('#dv_treeview').treeview('getParent', parent_node_bm.nodeId);
                            if (parent_node_qy != undefined) {
                                data_qy = parent_node_qy.text;
                                data_qy_id = parent_node_qy.deptid;
                            }
                        }
                    }
                    else if (_TypeVal == "部门") {
                        data_bm = data.text;
                        var parent_node_qy = $('#dv_treeview').treeview('getParent', data.nodeId);
                        if (parent_node_qy != undefined) {

                            data_qy = parent_node_qy.text;
                            data_qy_id = parent_node_qy.deptid;
                        }
                    }
                    else {

                        data_qy = data.text;
                        data_qy_id = data.deptid;
                    }
                    $("#dv_treeview").hide();//选中树节点后隐藏树

                    $("#MNDept").attr('data-gw', data_gw);
                    $("#MNDept").attr('data-bm', data_bm);
                    $("#MNDept").attr('data-qy', data_qy);
                    $("#MNDept").attr('data-qy-id', data_qy_id);

                    $('input[name="MNDept"]').val(data_bm);
                    $('input[name="MNGangWei"]').val(data_gw);
                    $('input[name="ShopID"]').val(data_qy_id);
                    $('input[name="ShopName"]').val(data_qy);
                    $("#MNDept").val(data_bm);
                    //data.nodeId: 2
                    //data.parentId: 1

                    //getParent(node | nodeId)：返回给定节点的父节点，如果没有则返回undefined。
                    //$('#tree').treeview('getParent', node);
                }
            };
            $('#dv_treeview').treeview(options);

        }

    });

    var defaultData = [
     {

         text: 'Parent 1',
         href: '#parent1',
         name: 'abc',
         node_id: 'a001',
         tags: ['企'],
         nodes: [
             {
                 text: 'Child 1',
                 href: '#child1',
                 name: 'bc',
                 node_id: 'a002',
                 tags: ['部'],
                 nodes: [
                     {
                         text: 'Grandchild 1',
                         href: '#grandchild1',
                         name: 'c',
                         node_id: 'a003',
                         tags: ['岗']
                     },
                     {
                         text: 'Grandchild 2',
                         href: '#grandchild2',
                         node_id: 'a004',
                         tags: ['0']
                     }
                 ]
             },
             {
                 text: 'Child 2',
                 href: '#child2',
                 tags: ['0']
             }
         ]
     },
     {
         text: 'Parent 2',
         href: '#parent2',
         tags: ['2'],
         nodes: [
                     {
                         text: 'Grandchild 1',
                         href: '#grandchild1',
                         tags: ['0']
                     },
                     {
                         text: 'Grandchild 2',
                         href: '#grandchild2',
                         tags: ['0']
                     }
         ]
     },
     {
         text: 'Parent 3',
         href: '#parent3',
         tags: ['0']
     },
     {
         text: 'Parent 4',
         href: '#parent4',
         tags: ['0']
     },
     {
         text: 'Parent 5',
         href: '#parent5',
         tags: ['0']
     }
    ];

    //$('#dv_treeview').treeview({
    //    data: defaultData
    //})
    //$('#tree').on('nodeSelected', function (event, data) {
    //    // 事件代码...
    //});

    //selectNode(node | nodeId, options)：选择一个给定的树节点，接收节点或节点ID。
    //$('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);

    //checkNode(node | nodeId, options)：选择指定的节点，接收节点或节点ID。
    //$('#tree').treeview('checkNode', [ nodeId, { silent: true } ]);
};
//3、JS代码-----end

//4、Controller代码----begin--------

//     #region GettreeList 
//public ActionResult GettreeList(string sw,string deptid, string token)
//{
//            bool succeed = true;
//try
//{
//    int reCount = 0;
//    //条件请重新写动修改 
//    var da = bll.GetList(sw, 0);

//    if (da.Tables.Count == 0)
//    {
//        reCount = da.Tables[0].Rows.Count;
//        return this.Json(new { succeed = false, data = JsonConvert.SerializeObject(new DataTable(), new DataTableConverter()), method = "Dept_GetListByiType", totalRecordCount = reCount }, JsonRequestBehavior.AllowGet);
//    }
//    List returnlist = new List();
//    try
//    {
//        //zcjg001==企业根节点编号
//        string _filter = "ParentID='zcjg001'";
//        if(deptid!=null && deptid.Trim()!= "undefined" &&  deptid.Trim()!="")
//        {
//            _filter = "DeptID='"+ deptid + "'";
//        }
//        DataView dv = new DataView(da.Tables[0]);
//        dv.RowFilter = _filter;// "ParentID='zcjg001'";
//        DataTable tb_dv = dv.ToTable();
//        for (int i = 0; i < tb_dv.Rows.Count; i++)
//        {
//            treemode new_node = new treemode();
//            new_node.text = tb_dv.Rows[i]["DeptName"].ToString().Trim();
//            new_node.href = "#" + tb_dv.Rows[i]["DeptName"].ToString().Trim();
//            List list_tag = new List();
//            list_tag.Add(tb_dv.Rows[i]["TypeVal"].ToString().Trim().Substring(0, 1));
//            new_node.tags = list_tag;

//            new_node.TypeVal = tb_dv.Rows[i]["TypeVal"].ToString().Trim();
//            new_node.ParentID = tb_dv.Rows[i]["ParentID"].ToString().Trim();
//            new_node.deptid = tb_dv.Rows[i]["DeptID"].ToString().Trim();
                       
//            treemode addnode = loadtree(ref new_node, new_node.deptid, da.Tables[0]);
//            returnlist.Add(addnode);
//        }

//}
//catch (Exception ex)
//{
//    return this.Json(new { succeed = false, data = "加载企业结构信息出错：\n"+Ex.ex(ex), method = "Dept_GetListByiType", totalRecordCount = 0 }, JsonRequestBehavior.AllowGet);
//}

//var res_chk = new { succeed = succeed, data = JsonConvert.SerializeObject(returnlist), method = "Dept_GetListByiType", totalRecordCount = reCount, msg = bll.GetDataSetSelectSQL };
//return Json(res_chk, JsonRequestBehavior.AllowGet);
//}
//            catch (Exception ex)
//{
//                return this.Json(new { succeed = false, data = Ex.ex(ex), method = "Dept_GetListByiType", totalRecordCount = 0 }, JsonRequestBehavior.AllowGet);
//}
//}
//        #endregion

///

/ 循环
/

/
/
/
/
//private treemode loadtree(ref treemode parnode, string ParentID,DataTable _table)
//{
//            DataView dv = new DataView(_table);
//dv.RowFilter = "ParentID='" + ParentID + "'";
//DataTable tb_dv = dv.ToTable();
//for(int i=0;i //{
//    treemode new_node = new treemode();
//    new_node.text = tb_dv.Rows[i]["DeptName"].ToString().Trim();
//    new_node.href="#"+ tb_dv.Rows[i]["DeptName"].ToString().Trim();
//    List list_tag = new List();
//    list_tag.Add(tb_dv.Rows[i]["TypeVal"].ToString().Trim().Substring(0, 1));
//    new_node.tags = list_tag;

//    new_node.TypeVal = tb_dv.Rows[i]["TypeVal"].ToString().Trim();
//    new_node.ParentID = tb_dv.Rows[i]["ParentID"].ToString().Trim();
//    new_node.deptid = tb_dv.Rows[i]["DeptID"].ToString().Trim();
              
//    treemode addnode= loadtree(ref new_node,new_node.deptid, _table);
//    if(parnode.nodes==null)
//{
//        parnode.nodes = new List();
//}
//    parnode.nodes.Add(addnode);

//}

//return parnode;
//}

//public class treemode
//{
//    private string _deptid = "";
//    private string _text = "";
//    private string _href = "";
//    private List _tags ;
//    private string _TypeVal = "";
//    private string _ParentID = "";
//    private List _nodes = null;

//    public string text
//    {
//    get
//    {
//            return _text;
//    }

//    set
//    {
//            _text = value;
//    }
//    }

//    public string href
//    {
//    get
//    {
//            return _href;
//    }

//    set
//    {
//            _href = value;
//    }
//    }

//    public List tags
//    {
//    get
//    {
//            return _tags;
//    }

//    set
//    {
//            _tags = value;
//    }
//    }

//    public string TypeVal
//    {
//    get
//    {
//            return _TypeVal;
//    }

//    set
//    {
//            _TypeVal = value;
//    }
//    }

//    public string ParentID
//    {
//    get
//    {
//            return _ParentID;
//    }

//    set
//    {
//            _ParentID = value;
//    }
//    }

//    public List nodes
//    {
//    get
//    {
//            return _nodes;
//    }

//    set
//    {
//            _nodes = value;
//    }
//    }

//    public string deptid
//    {
//    get
//    {
//            return _deptid;
//    }

//    set
//    {
//            _deptid = value;
//    }
//    }
//    }

//4、Controller代码----end--------

 

//5、SQL语句
//select * FROM T_Dept

//6、建表SQL语句----begin
//GO

//CREATE TABLE [dbo].[T_Dept](
//    [DeptIndex] [numeric](18, 0) IDENTITY(1,1) NOT NULL,
//    [DeptID] [nvarchar](30) NOT NULL,
//    [DeptName] [nvarchar](20) NULL,
//    [ParentID] [nvarchar](30) NULL,
//    [Remark] [nvarchar](250) NULL,
//    [TypeVal] [nvarchar](10) NULL,
//    [DeptType] [nvarchar](10) NULL,
//    [MenuName] [ntext] NULL,
//    [MenuText] [ntext] NULL,
//    [EName] [nvarchar](10) NULL,
//    [EmployeeID] [nvarchar](30) NULL,
//    [Stamp] [timestamp] NOT NULL,
// CONSTRAINT [PK_T_X_Dept] PRIMARY KEY CLUSTERED 
//(
//    [DeptID] ASC
//)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
//) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

//GO

//ALTER TABLE [dbo].[T_Dept] ADD  CONSTRAINT [DF_T_X_Dept_TypeVal]  DEFAULT (N'部门') FOR [TypeVal]
//GO

//EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'组织结构' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'T_Dept', @level2type=N'COLUMN',@level2name=N'DeptIndex'
//GO

//EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'部门编号' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'T_Dept', @level2type=N'COLUMN',@level2name=N'DeptID'
//GO

//EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'部门名称,岗位名称,虚拟主键,查询,chkepy' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'T_Dept', @level2type=N'COLUMN',@level2name=N'DeptName'
//GO

//EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'父节点' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'T_Dept', @level2type=N'COLUMN',@level2name=N'ParentID'
//GO

//EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'备注' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'T_Dept', @level2type=N'COLUMN',@level2name=N'Remark'
//GO

//EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'节点类型,企业、部门、岗位' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'T_Dept', @level2type=N'COLUMN',@level2name=N'TypeVal'
//GO

//EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'父节点名称' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'T_Dept', @level2type=N'COLUMN',@level2name=N'DeptType'
//GO

//EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'权限菜单' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'T_Dept', @level2type=N'COLUMN',@level2name=N'MenuName'
//GO

//EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'操作权限' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'T_Dept', @level2type=N'COLUMN',@level2name=N'MenuText'
//GO

//EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'企业名称,hrl' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'T_Dept', @level2type=N'COLUMN',@level2name=N'EName'
//GO

//EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'企业编号,hrl' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'T_Dept', @level2type=N'COLUMN',@level2name=N'EmployeeID'
//GO
//6、建表SQL语句----end