bootstrap-treeview 简单应用

本文链接：https://blog.csdn.net/wysdong/article/details/99454041

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

//1、引用css、js
/// <reference path="src/js/bootstrap-treeview.js" />
//src/css/bootstrap-treeview.css

//2、html代码:
//<td style="padding-left:20px">
// <label name="lab-EAddress" for="EAddress">所属部门</label>
// </td>
// <td style="width:195px;padding-left:10px;padding-top:16px" >
// <div class="">
// <input id="MNDept" name="MNDept" type="text" autocomplete="off" class="form-control" οnclick="$('#dv_treeview').show()" tabindex="2" style="margin-top:-14px" readonly="readonly">
// <div id="dv_treeview" style="display: none; position:absolute; z-index:1010; background-color:white; margin-left:0px; width: 250px"></div>
// </div>
// </td>

//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<treemode> returnlist = new List<treemode>();
// 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<string> list_tag = new List<string>();
// 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

/// <summary>
/ 循环
/ </summary>
/ <param name="parnode"></param>
/ <param name="ParentID"></param>
/ <param name="_table"></param>
/ <returns></returns>
//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<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<string> list_tag = new List<string>();
// 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<treemode>();
//}
// parnode.nodes.Add(addnode);

//}

//return parnode;
//}

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

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

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

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

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

// public List<string> 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<treemode> 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