1. 界面顯示

2.前端 jqgrid 代码

 //加载表格
function GetGrid() {
var selectedRowIndex = 0;
var $gridTable = $('#gridTable');
$gridTable.jqGrid({
url: "../../BaseManager/Organize/GetTreeListJson",
datatype: "json",
height: $(window).height() - 108.5,
colModel: [
{ label: '主键', name: 'OrganizeId', hidden: true },
{ label: "公司名称", name: "FullName", width: 300, align: "left", sortable: false },
{ label: "外文名称", name: "EnCode", width: 150, align: "left", sortable: false },
{ label: "中文名称", name: "ShortName", width: 150, align: "left", sortable: false },
{ label: "公司性质", name: "Nature", width: 100, align: "left", sortable: false },
{
label: "成立时间", name: "FoundedTime", width: 100, align: "left", sortable: false,
formatter: function (cellvalue, options, rowObject) {
return formatDate(cellvalue, 'yyyy-MM-dd');
}
},
{ label: "负责人", name: "Manager", width: 100, align: "left", sortable: false },
{ label: "经营范围", name: "Businessscope", width: 200, align: "left", sortable: false },
{ label: "备注", name: "Description", width: 200, align: "left", sortable: false }
],
treeGrid: true,
treeGridModel: "nested",
ExpandColumn: "EnCode",
rowNum: "all",
rownumbers: true,
onSelectRow: function () {
selectedRowIndex = $("#" + this.id).getGridParam('selrow');
},
gridComplete: function () {
$("#" + this.id).setSelection(selectedRowIndex, false);
}
});

3.后端controllers

/// <summary>
/// 机构列表
/// </summary>
/// <param name="condition">查询条件</param>
/// <param name="keyword">关键字</param>
/// <returns>返回树形列表Json</returns>
[HttpGet]
public ActionResult GetTreeListJson(string condition, string keyword)
{
var data = NewObject<OrganizeLogic>().GetListByCache().datas;
if (!string.IsNullOrEmpty(condition) && !string.IsNullOrEmpty(keyword))
{
#region 多条件查询
switch (condition)
{
case "FullName": //公司名称
data = data.TreeWhere(t => t.FullName.Contains(keyword), "OrganizeId");
break;
case "EnCode": //外文名称
data = data.TreeWhere(t => t.EnCode.Contains(keyword), "OrganizeId");
break;
case "ShortName": //中文名称
data = data.TreeWhere(t => t.ShortName.Contains(keyword), "OrganizeId");
break;
case "Manager": //负责人
data = data.TreeWhere(t => t.Manager.Contains(keyword), "OrganizeId");
break;
default:
break;
}
#endregion
}
var treeList = new List<TreeGridEntity>();
foreach (OrganizeEntity item in data)
{
TreeGridEntity tree = new TreeGridEntity();
bool hasChildren = data.Count(t => t.ParentId == item.OrganizeId) == ? false : true;
tree.id = item.OrganizeId.ToConvertString();
tree.hasChildren = hasChildren;
tree.parentId = item.ParentId.ToString();
tree.expanded = false;
tree.entityJson = JsonHelper.ToJson(item);
treeList.Add(tree);
}
return Content(treeList.TreeJson());
}

4.Json 数据

MVC 表格按树状形式显示 jstree jqgrid的更多相关文章

  1. Linux命令之pstree - 以树状图显示进程间的关系

    pstree命令以树状图显示进程间的关系(display a tree of processes).ps命令可以显示当前正在运行的那些进程的信息,但是对于它们之间的关系却显示得不够清晰.在Linux系 ...

  2. [Linux] Linux命令之pstree - 以树状图显示进程间的关系

    转载自: http://codingstandards.iteye.com/blog/842156 pstree命令以树状图显示进程间的关系(display a tree of processes). ...

  3. Tkinter 之TreeView表格与树状标签

    一.TreeView介绍 TreeView组件是一个树状结构和表格的结合体.第一列是树状结构,后几列是列表.每一行表示一个item,树的item可以分级,每个item有子item,名称对应text标签 ...

  4. GridView树状结构显示

    下面的树形结构代码需要GridVIew中的数据要求是按照上下级关系已经排列好的顺序,比如: GridView ID ParentID Name 1 0 父1 2 1 父1子1 3 1 父1子2 4 3 ...

  5. C#使用Jquery zTree实现树状结构显示_异步数据加载

    JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/dem ...

  6. pstree - 树状显示进程信息

    pstree - display a tree of processes(树状结构显示进程关系) 格式: pstree [option] option: -a --arguments:显示每个程序的完 ...

  7. Android一个炫酷的树状图组织架构图开源控件实现过程

    Android一个炫酷的树状图组织架构图开源控件 文章目录 [1 简介] [2 效果展示] [3 使用步骤] [4 实现基本布局流程] [5 实现自由放缩及拖动] [6 实现添加删除及节点动画] [7 ...

  8. jquery-treegrid树状表格的使用(.Net平台)

    上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...

  9. EasyUI + ajax + treegrid/datagrid 接收 json 数据,显示树状/网状表结构

    最后一更了,时间间隔有点久了~~ EasyUI作为一个成熟的前端框架,封装了ajax,对于数据的处理配合datagrid组件的使用,使其非常适合后台管理界面的开发(目前来说界面有点过时了). 通过aj ...

随机推荐

  1. awk 输出前 N 列的最简单方法

    最近遇到一种场景,需要输出一个文本信息的前 N 列. 众所周知 cut 可以指定分隔符并指定列的范围,如 cut -d' ' -f-4 就是以空格为分隔符输出前 4 列.但是 cut 的分隔符只能是一 ...

  2. 交互式shell脚本web console

    官网:http://web-console.org/ 这个脚本可以实现web下交互,也就是有了这玩意后可以不用反弹shell了. <?php // Web Console v0.9.7 (201 ...

  3. CTF 入门笔记

    站点:http://www.moctf.com/ web1:水题非常简单的题目,直接F12查看元素即可,在HTML代码中,flag被注释了. web2:水题 该题的核心 就是通过HTML代码对输入框进 ...

  4. Android框架Volley使用:Get请求实现

    首先我们在项目中导入这个框架: implementation 'com.mcxiaoke.volley:library:1.0.19' 在AndroidManifest文件当中添加网络权限: < ...

  5. CODING 2.0:如何通过设计给品牌创造价值?

    升级背景 伴随着 CODING 理念的全面升级,CODING 正构建起覆盖构想到交付的全覆盖工具链,用户注册即可实践敏捷开发与 DevOps,提升软件交付质量与速度. 一直以来,CODING 作为软件 ...

  6. 概要设计文档(final)

    1. 引言部分 引言部分主要说明编写目的.系统的范围和参考资料等. 1.1目的 该文档的目的是描述“自习吧”微信小程序的概要设计,主要内容包括系统功能简介.系统结构设计.模块设计和界面设计等. 本文档 ...

  7. 微信小程序之 catalog 切换

    组件名称:catalog 组件属性:catalogData,type:String 组件描述:这是一个子组件,数据从父组件中传递 效果图: catalog 目录为多个,使用 scroll-view 容 ...

  8. Linux与windows的应急响应重点检查项

    Linux应急响应重点检查项 用户账号审计: cat /etc/passwd & cat /etc/shadow 在线账户审计: w 登录状况审计: last 空口令账户审计: awk -F: ...

  9. [日常] 安装windows+deepin双系统

    我的测试电脑上安装了三个系统,分别是win7 , ubuntu16.04 ,deepin15.11下面的步骤是安装deepin系统的过程 1.制作启动u盘,直接使用官方工具制作就可以了,我的已经制作好 ...

  10. [PHP] 近期接手現有的企邮前端框架业务所遇困难

    1.邮箱前端有三大产品线,包括免费邮箱,VIP邮箱,企业邮箱,使用的一套代码,在代码中进行的逻辑判断处理,根据不同的配置进行不同的业务操作.有很多逻辑是各产品线是不同的,需要仔细开发和判断才能不会影响 ...