MVC 表格按树状形式显示 jstree jqgrid
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的更多相关文章
- Linux命令之pstree - 以树状图显示进程间的关系
pstree命令以树状图显示进程间的关系(display a tree of processes).ps命令可以显示当前正在运行的那些进程的信息,但是对于它们之间的关系却显示得不够清晰.在Linux系 ...
- [Linux] Linux命令之pstree - 以树状图显示进程间的关系
转载自: http://codingstandards.iteye.com/blog/842156 pstree命令以树状图显示进程间的关系(display a tree of processes). ...
- Tkinter 之TreeView表格与树状标签
一.TreeView介绍 TreeView组件是一个树状结构和表格的结合体.第一列是树状结构,后几列是列表.每一行表示一个item,树的item可以分级,每个item有子item,名称对应text标签 ...
- GridView树状结构显示
下面的树形结构代码需要GridVIew中的数据要求是按照上下级关系已经排列好的顺序,比如: GridView ID ParentID Name 1 0 父1 2 1 父1子1 3 1 父1子2 4 3 ...
- C#使用Jquery zTree实现树状结构显示_异步数据加载
JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面: http://www.treejs.cn/v3/dem ...
- pstree - 树状显示进程信息
pstree - display a tree of processes(树状结构显示进程关系) 格式: pstree [option] option: -a --arguments:显示每个程序的完 ...
- Android一个炫酷的树状图组织架构图开源控件实现过程
Android一个炫酷的树状图组织架构图开源控件 文章目录 [1 简介] [2 效果展示] [3 使用步骤] [4 实现基本布局流程] [5 实现自由放缩及拖动] [6 实现添加删除及节点动画] [7 ...
- jquery-treegrid树状表格的使用(.Net平台)
上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...
- EasyUI + ajax + treegrid/datagrid 接收 json 数据,显示树状/网状表结构
最后一更了,时间间隔有点久了~~ EasyUI作为一个成熟的前端框架,封装了ajax,对于数据的处理配合datagrid组件的使用,使其非常适合后台管理界面的开发(目前来说界面有点过时了). 通过aj ...
随机推荐
- 致Python初学者的六点建议
Python是最容易学习的编程语言之一,其语法近似英语.通常,初学者只会遇到一些小麻烦,如强制缩进.在函数中使用self等. 然而,当开始阅读.复制和编辑他人代码时,麻烦就接踵而至了. 这里,我将解释 ...
- 高效取余运算(n-1)&hash原理探讨
Java的HashMap源码中用到的(n-1)&hash这样的运算,查找发现这是一种高效的求余数的办法,但其中的原理是什么呢为什么可以这么做呢? 先上结论:假设被除数是x,对于除数是2n的取余 ...
- l浏览器执行JS
浏览器执行JS 浏览器分成两部分:渲染引擎和JS引擎 渲染引擎:用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit JS引擎:俗称JS解析器.用来读取网页中的 ...
- 重启电脑 wamp图标是橙色(未变绿)
记录一个错误: 修复系统漏洞后,重启电脑,wamp没有开机自启动,手动启动后发现,图标是大红色变成了橙色,也就是服务未完全启动(1/2)状态. ??? 但是我其实也不知道是哪个服务(Apache/My ...
- linux权限管理-基本权限
目录 linux权限管理-基本权限 权限修改命令chmod linux权限管理-基本权限 权限 针对某些文件和进程,对用户进行限制 权限与用户的关系 rwx rwx r-x User Group Ot ...
- Windows Cluster失败后,AlwaysOn在残存Server节点上快速恢复DB的详细步骤
AlwaysOn是一种集合了高可用和灾难恢复两种功能的技术,它支持一个或多个数据库整体的发生故障转移,它实现了一定程度上的负载均衡,减轻了主服务器的压力,是目前最好的一种选择.那么当极端情况发生时,集 ...
- fastdfs-nginx-module安装和配置
fastdfs-nginx-module安装和配置 为什么要在fastdfs的storage端,安装fastdfs-nginx-module? 答案:https://www.cnblogs.com/l ...
- WebUI自动化测试框架
基于Python+Selenium+Unittest+Ddt+HTMLReport 框架结构: Business:业务相关公共模块,如登录 Common:业务无关公共模块,如读取文件 PageObje ...
- itestpdf
itestpdf jar pdf
- 201871010111-刘佳华《面向对象程序设计(java)》第十二周学习总结
201871010111-刘佳华<面向对象程序设计(java)>第十二周学习总结 实验十 集合与GUI初步 实验时间 2019-11-14 第一部分:基础知识总结 第九章知识总结 1. ...