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开发者更轻 ...
随机推荐
- 1007 Maximum Subsequence Sum (PAT(Advance))
1007 Maximum Subsequence Sum (25 分) Given a sequence of K integers { N1, N2, ..., NK }. A ...
- 入门系列(一) 微信小程序简介
一.简介 1.目录结构 首先,我们使用微信公众平台提供的开发者工具,创建一个简单的小程序项目,观察项目的目录结构 不难看出,一个典型的微信小程序,通常包含一个描述整体的主体部分,以及一个描述页面的 p ...
- LES on MCT
- IIS部署网站只有首页能访问，其他链接失效/运行.net+Access网站-可能原因：IIS未启用32位应用程序模式
在64位的机子上IIS运行32位的.NET程序 由于64位操作系统不支持Microsoft OLE DB Provider for Jet驱动程 也不支持更早的Microsoft Access Dri ...
- node-sass 安装失败
安装 npm install 时偶尔遇到报错:没有安装python或node-sass 安装失败的问题,百度之后发现是被墙了,但根据百度的方法换了淘宝镜像和用了vpn都安装失败, 原因可能是没有卸载之 ...
- String与StringBuffer,StringBuilder
在java中有3个类来负责字符的操作. 1.Character 是进行单个字符操作的, 2.String 对一串字符进行操作.不可变类. 3.StringBuffer 也是对一串字符进行操作,但是可变 ...
- vue.js嵌套路由-------由浅入深
嵌套路由就是路由里面嵌套他的子路由 子路由关键属性children 每一个子路由里面可以嵌套多个组件 子组件又有路由导航和路由容器 <router-link to="/父路由的地址名字 ...
- Jquery 实现表单提交按钮变灰，防止多次点击提交重复数据
表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交.要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾.jQuery很简单的就可以实现对表单提交按钮控制,下面就是相关的例子和代码 ...
- - > 贪心基础入门讲解三——活动安排问题二
有若干个活动,第i个开始时间和结束时间是[Si,fi),活动之间不能交叠,要把活动都安排完,至少需要几个教室? 分析:能否按照之一问题的解法,每个教室安排尽可能多的活动,即按结束时间排序,再贪心选 ...
- Ubuntu下的软件一般安装在哪个文件夹里
一般安装在/usr下,里面很多文件夹,根据文件的类型,分门别类,不是一个软件一个文件夹.以前老版本的Linux习惯放在/usr/local目录下. 部分软件放在/opt下,则是一个软件统一在一个文件夹 ...