easyui -tree的详细讲解
代码的具体实现
@{
ViewBag.Title = "人员查找";
ViewBag.LeftWidth = "200px";
ViewBag.MiddleWidth = "200px";
}
<html>
<head>
<link href="../../../Script/easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css" />
<link href="../../../Script/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="../../../Content/themes/base/Common/common.css" rel="stylesheet" type="text/css" />
<script src="../../../Script/easyui/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../../../Script/Common/json2.js" type="text/javascript"></script>
<script src="../../../Script/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../../../Script/easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="../../../Script/Common/Toolbar.js" type="text/javascript"></script>
<script src="../../../Script/easyui/plugins/JValidator.js" type="text/javascript"></script>
<script src="../../../Script/Common/Common.js" type="text/javascript"></script>
</head>
<body class="easyui-layout">
<div region="west" title="公司" id="leftDepTree" split="true" style="width: 300px;">
<div style="border: 1px;">
<ul id="ParentOrgTree" class="easyui-tree">
</ul>
</div>
</div>
<div data-options="region:'center',title:'选择部门'" >
<div style="border: 1px;">
<ul id="ChildrenTree" class="easyui-tree">
</ul>
</div>
</div>
<div data-options="region:'east',title:'部门',split:true , fit:true" style="width:300px;">
<table id="OrgList" class="easyui-datagrid" fitColumns="true" data-options="fit:true,border:false"
checkOnSelect:"true" singleselect="false">
<thead>
<tr>
<th field="ck" width="50" checkbox="true">
</th>
<th field="OrganizationId" hidden= "true" width="50">
</th>
<th field="FullName" width="50">
部门名称
</th>
</tr>
</thead>
</table>
</div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
</body>
</html>
<script type="text/javascript">
//页面加载按部门搜索部门树列表
var myOrg = {
//加载子公司
onloadParentOrgTree: function () { //部门树方法
$('#ParentOrgTree').tree({
checkbox: false,
url: '../SearchDep/getParentOrg',
onClick: function (node) {
//flag代表着开关， D表示加载部门信息
myOrg.onloadChildrenTree(node.id); //加载部门
}
});
},
//加载子公司下的部门
onloadChildrenTree: function (parentID) {
$('#ChildrenTree').tree({
checkbox: true,
multiple: true,
cascadeCheck: false,
url: '../SearchDep/getChildren?parentID=' + parentID,
onClick: function (node) {
//flag代表着开关， D表示加载部门信息
},
//列表加载成功后
onLoadSuccess: function (node, data) {
myOrg.SelectChildrenTree(node, data);
},
//点击点击不选中的时候
onSelect: function (node) {
//选择的时候就要让checkbox打钩
$('#ChildrenTree').tree("check", node.target); //不用选择的时候
},
onCheck: function (node, checked) { //选择的时候
if (checked == true) {
myOrg.addOrgList(node.id, node.text);
} else {
//去掉选择框的时候去掉右侧栏
myOrg.deleteSingleOrgLiset(node.id);
}
}
});
},
//同时去掉列表
unSelectChildrenTree: function (orgid) {
var nodes = $('#ChildrenTree').tree('getChecked');
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].id == orgid) {
$('#ChildrenTree').tree('uncheck', nodes[i].target);
}
}
},
//加载树列表执行回调打钩
SelectChildrenTree: function (node, data) {
var orgdata = $('#OrgList').datagrid('getData');
var arryList = []; //存放索引的值
for (var i = 0; i < orgdata.total; i++) {
for (var k = 0; k < data.length; k++) {
if (orgdata.rows[i].OrganizationId == data[k].id) {
var node = $('#ChildrenTree').tree('find', data[k].id);
arryList.push(node.target);
}
}
}
for (var i = 0; i < arryList.length; i++) {
$('#ChildrenTree').tree('check', arryList[i]);
}
},
onloadOrgList: function () {
$("#OrgList").datagrid({
onUnselect: function (rowIndex, rowData) {
$('#OrgList').datagrid('deleteRow', rowIndex); //删除当前行
myOrg.unSelectChildrenTree(rowData.OrganizationId); //同时也去除s树上的节点
},
onLoadSuccess: function (data) { //接收data
},
//全部不选中
onUnselectAll: function (rows) {
myOrg.deleteAllOrgList(rows); //删除所用的列表
}
});
$('#OrgList').datagrid('checkAll'); //默认全部选中
},
//加载选择之后的列表
addOrgList: function (OrganizationId, FullName) {
//增加时候判断如果有的话就不需要增加了
var contains = false;
var data = $('#OrgList').datagrid('getData');
if (data.total == 0) {
$('#OrgList').datagrid('insertRow', {
index: 1, // index start with 0
row: { "OrganizationId": OrganizationId, "FullName": FullName }
});
}
else {
for (var i = 0; i < data.total; i++) {
if (data.rows[i].OrganizationId == OrganizationId) {
contains = true;
break;
}
}
if (!contains) {
$('#OrgList').datagrid('insertRow', {
index: 1, // index start with 0
row: { "OrganizationId": OrganizationId, "FullName": FullName }
});
}
}
$('#OrgList').datagrid('checkAll'); //默认全部选中
},
//删除单条数据
deleteSingleOrgLiset: function (orgID) {
var data = $('#OrgList').datagrid('getData');
for (var i = 0; i < data.total; i++) {
if (data.rows[i].OrganizationId == orgID) {
$('#OrgList').datagrid('deleteRow', i);
}
}
myOrg.unSelectChildrenTree(orgID);
},
//去除OrgList的列表项
deleteAllOrgList: function (rows) {
var nodes = $('#ChildrenTree').tree('getChecked');
var arryList = [];
for (var i = (rows.length - 1); i >= 0; i--) {
for (var k = 0; k < nodes.length; k++) {
if (nodes[k].id == rows[i].OrganizationId) {
arryList.push(nodes[i].target);
}
}
$('#OrgList').datagrid('deleteRow', i); //删除list列表
}
for (var i = 0; i < arryList.length; i++) {
$('#ChildrenTree').tree('uncheck', arryList[i]);
}
},
//返回选择数据
retureOrgListData: function () { //返回提交EmpList表中的数据
var orgData = $('#OrgList').datagrid('getData');
return orgData.rows;
}
}
//页面初始化
$(function () {
myOrg.onloadParentOrgTree();
myOrg.onloadOrgList();
});
</script>
、、、、、
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections;
using System.Web.Mvc;
using System.Web;
using System.Data;
using GWork.Models;
using Newtonsoft.Json;
using GWork.DataAccess;
using GWork.Business;
using GWork.IBusiness;
using SysManager.Models;
using SysManager.Common.Utilities;
using Newtonsoft.Json.Converters;
namespace GWork.Controllers.OpenWindows.SearchEmployee
{
public class SearchDepController : Controller
{
private SYS_User userinfo = new SYS_User();
private SYS_Organization organizationinfo = new SYS_Organization(); //权限表中的组织部门
private SysManager.IBusiness.IOrganizationBLL organizationibll = SysManager.Business.BusinessFactory.Instance.CreateOrganization();//部门工厂
private SysManager.IBusiness.IRolesBLL rolesbll = SysManager.Business.BusinessFactory.Instance.CreateRoles();//角色工厂
private SysManager.IBusiness.IUserBLL userbll = SysManager.Business.BusinessFactory.Instance.CreateUser();// 获取员工用户方法
public ActionResult SearchDepList()
{
return View();
}
#region 加载父级节点子组织
/// <summary>
/// 加载子公司
/// </summary>
/// <returns></returns>
public string getParentOrg()
{
System.Collections.IList orgainList = organizationibll.GetList();//获取部门方法
IsoDateTimeConverter timeConverter = new IsoDateTimeConverter();
timeConverter.DateTimeFormat = "yyyy'-'MM'-'dd' 'HH':'mm':'ss";
List<SYS_Organization> listtree = SysManager.Common.Utilities.IListHelper.IListToList<SYS_Organization>(orgainList);//将IList 转化成List
SYS_Organization orgobj = listtree.Find(org => org.ParentId == "0");//构造顶级节点//（数据库中用的是O）//顶级节点
List<LEFTTREE> parentList = new List<LEFTTREE>();
LEFTTREE lefttree = new LEFTTREE();
List<LEFTTREE> CHILDRENLIST = new List<LEFTTREE>();
lefttree.ID = orgobj.OrganizationId; //树节点
lefttree.TEXT = orgobj.FullName; //公司名称
lefttree.EX1 = orgobj.Category;// （额外条件种类）
//得到分公司的父级节点
IEnumerable<SYS_Organization> FindTree = listtree.Where(new Func<SYS_Organization, bool>(d => d.ParentId == orgobj.OrganizationId));
foreach (SYS_Organization item in FindTree)
{
LEFTTREE childre = new LEFTTREE();
childre.ID = item.OrganizationId; //树节点
childre.TEXT = item.FullName; //公司名称
childre.EX1 = orgobj.Category;// （额外条件种类）
CHILDRENLIST.Add(childre);
}
lefttree.CHILDREN = CHILDRENLIST;
parentList.Add(lefttree);
return JsonConvert.SerializeObject(parentList).Replace("TEXT", "text").Replace("ID", "id").Replace("CHILDREN", "children");
}
#endregion
#region 加载子节点组织
/// <summary>
/// 加载子节点
/// </summary>
/// <returns></returns>
public string getChildren()
{
string parentID = Request["parentID"].ToString();
System.Collections.IList orgainList = organizationibll.GetList();//获取部门方法
IsoDateTimeConverter timeConverter = new IsoDateTimeConverter();
timeConverter.DateTimeFormat = "yyyy'-'MM'-'dd' 'HH':'mm':'ss";
List<SYS_Organization> listtree = SysManager.Common.Utilities.IListHelper.IListToList<SYS_Organization>(orgainList);//将IList 转化成List
LEFTTREE lefttree = new LEFTTREE();
lefttree.CHILDREN = new List<LEFTTREE>();
TreeDiGui(parentID, lefttree, listtree); //递归用法
return JsonConvert.SerializeObject(lefttree.CHILDREN).Replace("TEXT", "text").Replace("ID", "id").Replace("CHILDREN", "children");
}
#endregion
#region 共用递归
public LEFTTREE TreeDiGui(string ParentId, LEFTTREE LEFTTREE, IEnumerable<SYS_Organization> ALLTREE)
{
IEnumerable<SYS_Organization> FindTree = ALLTREE.Where(new Func<SYS_Organization, bool>(d => d.ParentId == ParentId));
foreach (SYS_Organization item in FindTree)
{
LEFTTREE ChildTree = new LEFTTREE();
ChildTree.ID = item.OrganizationId;
ChildTree.TEXT = item.FullName;
ChildTree.CHILDREN = new List<LEFTTREE>();
ChildTree.EX1 = item.Category;//种类
LEFTTREE.CHILDREN.Add(ChildTree);
TreeDiGui(ChildTree.ID, ChildTree, ALLTREE);
}
return LEFTTREE;
}
#endregion
}
}
| -- |
easyui -tree的详细讲解的更多相关文章
- head标签详细讲解
head标签详细讲解 head位于html网页的头部,后前的标签,并以开始以结束的一html标签. Head标签位置如图: head标签示意图 head包含标签 meta,title,link,bas ...
- 详细讲解nodejs中使用socket的私聊的方式
详细讲解nodejs中使用socket的私聊的方式 在上一次我使用nodejs+express+socketio+mysql搭建聊天室,这基本上就是从socket.io的官网上的一份教程式复制学习,然 ...
- iOS KVC详细讲解
iOS KVC详细讲解 什么是KVC? KVC即NSKeyValueCoding,就是键-值编码的意思.一个非正式的 Protocol,是一种间接访问对象的属性使用字符串来标识属性,而不是通过调用存取 ...
- Easyui Tree方法扩展 - getLevel(获取节点级别)
Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLe ...
- [转]easyui tree 模仿ztree 使用扁平化加载json
原文地址:http://my.oschina.net/acitiviti/blog/349377 参考文章:http://www.jeasyuicn.com/demo/treeloadfilter.h ...
- 【项目经验】EasyUI Tree
ITOO5.0开始了,我参加了伟大的基础系统,从整体上来说,基础系统有三个职能: 1.自己的核心职能--选课(公共选修课,专业选修课),课表: 2.为其他系统提供真实数据: 3.维护信息 而近两三天, ...
- Android webservice的用法详细讲解
Android webservice的用法详细讲解 看到有很多朋友对WebService还不是很了解,在此就详细的讲讲WebService,争取说得明白吧.此文章采用的项目是我毕业设计的webserv ...
- Jquery EasyUI Tree .net实例
图片: 针对tree: 数据库: CREATE TABLE [dbo].[SystemModel]( [Id] [,) NOT NULL, [Name] [nvarchar]() NULL, [Fat ...
- Jquery easyui Tree的简单使用
Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻 ...
随机推荐
- TensorFlow — 相关 API
TensorFlow — 相关 API TensorFlow 相关函数理解 任务时间:时间未知 tf.truncated_normal truncated_normal( shape, mean=0. ...
- ubuntu_linux自动补全出现问题
问题:输入: cd p,使用Tab补全,期望进入pub_work目录,虽然自动补全,成功进入目录:却给我打印一连串的字符,纠结: fly@Flyme:~$ cd p+ local cur prev w ...
- 782B The Meeting Place Cannot Be Changed（二分）
链接:http://codeforces.com/problemset/problem/782/B 题意: N个点,需要找到一个点使得每个点到这个点耗时最小,每个点都同时开始,且都拥有自己的速度 题解 ...
- idea结合git版本控制
IntelliJ-IDEA和Git.GitHub.Gitlab的使用(五)----https://blog.csdn.net/milsevol/article/details/72792468
- fetch api & response header
how to get fetch response header in js https://stackoverflow.com/questions/43344819/reading-response ...
- HDU 1234 简单模拟题
题目很简单不多说了,我只是觉得这题目的输入方式还是很有特点的 #include <cstdio> #include <cstring> #include <algorit ...
- [K/3Cloud]如何解决kdpkg无法部署到业务站点的问题
自从下载了sp1后,就迫不急待的试用下,看看反馈的几个关键bug是否修复,可惜sp1安装后发现业务站点下的组件一个都没有被更新,这指定是有问题了,这真是让哥百思不得其解,真后悔在研发时没仔细研究下部署 ...
- sharepoint第三方程序认证尝试失败记录
本来想用REST服务开发第三方的插件的,下面的文章说明REST API是非常好用的 https://technet.microsoft.com/zh-cn/library/jj164022(v=off ...
- Java获取系统环境变量（System Environment Variable）和系统属性（System Properties）以及启动参数的方法
系统环境变量(System Environment Variable): 在Linux下使用export $ENV=123指定的值.获取的方式如下: Map<String,String> ...
- JOS 不能进入lab2 问题的解决
JOS 不能进入lab2 问题的解决 这个鸟问题折腾了我好久! lab2是须要 kern/pmap.c的! 可是这里没有 首先要git checkout -b lab2 origin/lab2 (仅仅 ...