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开发者更轻 ...
随机推荐
- Uva 10730 Antiarithmetic?
uva 10730 题意:给出一列数字,如果其中存在长度大于等于3的等差数列,输出no,不存在就输出yes 这道题标定了数列长度n,而且这n个数数据范围是从0到n-1,没有相同的数,这就给我们枚举提供 ...
- java使用JNA框架调用dll动态库
这两天了解了一下java调用dll动态库的方法,总的有三种:JNI.JNA.JNative.其中JNA调用DLL是最方便的. ·JNI ·JNA ·JNative java使用 JNI来调用dll动态 ...
- 转载 - Struts2拦截器配置
出处:http://blog.csdn.net/axin66ok/article/details/7321430 目录(?)[-] 理解拦截器 1 什么是拦截器 2 拦截器的实现原理 拦截器的配置 使 ...
- [K/3Cloud]调用动态表单时,传递自定义参数
插件中在调用动态表单时,通过DynamicFormShowParameter的CustomParams,增加自定义的参数. private void ShowMaterialStock() { obj ...
- 控制公司（codevs 2051）
题目描述 Description 有些公司是其他公司的部分拥有者,因为他们获得了其他公司发行的股票的一部分.例如,福特公司拥有马自达公司12%的股票.据说,如果至少满足了以下三个条件之一,公司A就可以 ...
- 20180705关于mysql binlog的解析方式
来自:https://blog.csdn.net/u012985132/article/details/74964366/ 关系型数据库和Hadoop生态的沟通越来越密集,时效要求也越来越高.本篇就来 ...
- 又见GCD
Problem Description 有三个正整数a,b,c(0<a,b,c<10^6),其中c不等于b.若a和c的最大公约数为b,现已知a和b,求满足条件的最小的c. Input ...
- [bzoj3289]Mato的文件管理_莫队_树状数组
Mato的文件管理 bzoj-3289 题目大意:给定一个n个数的序列.m次询问:一段区间中的逆序对个数. 注释:$1\le n\,mle 5\cdot 10^4$. 想法: 开始想这个题的大佬们,给 ...
- [poj1704]Georgia and Bob_博弈论
Georgia and Bob poj-1704 题目大意:题目链接 注释:略. 想法:我们从最后一个球开始,每两个凑成一对.如果有奇数个球,那就让第一个球和开始位置作为一对. 那么如果对手移动的是一 ...
- P3372 【模板】线段树 1 洛谷
https://www.luogu.org/problem/show?pid=3372 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.求出某区间每一个数的和 ...