1、前端

    <script src="@Url.Content("~/Scripts/jquery/jquery-1.9.0.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/jqgrid/css/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/jqgrid/js/i18n/grid.locale-cn.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/jqgrid/js/jquery.jqGrid.min.js")" type="text/javascript"></script> <link href="../../Content/jqui/jquery.ui.css" rel="stylesheet" type="text/css" />
<script src="../../Content/jqui/jquery.ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#list').jqGrid({
url: '/JGrid/TreeGridGet',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
datatype: 'json',
mtype: 'GET', //这里使用GET方法才能展开层级,不然接受的nodeid、n_level参数均为null
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'Name',
colModel: [
{ label: 'ID', name: 'ID', index: 'ID', hidden: true, width: 1, key: true },
{ label: '名称', name: 'Name', index: 'Name', width: 200, fixed: true },
{ label: '时间', name: 'Age', index: 'Age', width: 200, fixed: true },
{ label: '主管', name: 'Director', index: 'Director', width: 100 },
{ label: 'ParentID', name: 'ParentID', index: 'ParentID', hidden: true, width: 1 }
],
loadComplete: function (data) {
consoleLog("loadComplete_data=" + data);
},
autowidth: true,
height: 'auto',
shrinkToFit: true
}); $("#list").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{
startColumnName: 'Name',
numberOfColumns: 2,
titleText: '所有信息'
}
]
}); //输出日志
function consoleLog(msg) {
if (navigator.userAgent.indexOf("Firefox") > 0) {
console.log(msg)
}
}
});
</script>
<div id="QryResultGrid">
<table id="list">
</table>
</div>

2、后台

  public JsonResult TreeGridGet()
{
var depts = Department.GetDemoData();
var nodeid = Request["nodeid"];
var n_level = Request["n_level"];
Guid? deptID = nodeid != null ? new Guid(nodeid) : new Nullable<Guid>();
int level = n_level != null ? int.Parse(n_level) + : ; var subDepts = depts.Where<Department>(x => x.ParentID == deptID).ToList<Department>(); var data = new
{
page = ,
total = ,
records = subDepts.Count,
rows = (from dept in subDepts
select new
{
cell = new[] //cell为JqGrid中约定的名称
{
dept.ID.ToString(),
dept.Name,
dept.Age,
dept.Director ,
dept.ParentID != null ? dept.ParentID.ToString() : "",
level.ToString(), //Level
deptID != null ? deptID.ToString() : "null", //ParentID
depts.Count<Department>(x => x.ParentID == dept.ID) == ? "true":"false", //isLeaf
"false", //expanded
"false"//loaded
}
})
}; return Json(data, JsonRequestBehavior.AllowGet);
}
#endregion
}
    public class Department
{
private static List<Department> demoData = null; public static List<Department> GetDemoData()
{
if (demoData != null && demoData.Count > ) return demoData; var dept1 = new Department() { ID = Guid.NewGuid(), Name = "think8848", Age = "", Director = "John" };
var dept2 = new Department() { ID = Guid.NewGuid(), Name = "user1", Age = "", Director = "John", ParentID = dept1.ID };
var dept3 = new Department() { ID = Guid.NewGuid(), Name = "user2", Age = "", Director = "John", ParentID = dept1.ID };
var dept4 = new Department() { ID = Guid.NewGuid(), Name = "user3", Age = "", Director = "John", ParentID = dept1.ID };
var dept5 = new Department() { ID = Guid.NewGuid(), Name = "user4", Age = "", Director = "John", ParentID = dept2.ID };
var dept6 = new Department() { ID = Guid.NewGuid(), Name = "user5", Age = "", Director = "John", ParentID = dept2.ID };
var dept7 = new Department() { ID = Guid.NewGuid(), Name = "user6", Age = "", Director = "John", ParentID = dept6.ID };
var dept8 = new Department() { ID = Guid.NewGuid(), Name = "user7", Age = "", Director = "John", ParentID = dept7.ID };
var dept9 = new Department() { ID = Guid.NewGuid(), Name = "user8", Age = "", Director = "John", ParentID = dept3.ID };
var dept10 = new Department() { ID = Guid.NewGuid(), Name = "user9", Age = "", Director = "John", ParentID = dept3.ID };
var dept11 = new Department() { ID = Guid.NewGuid(), Name = "user10", Age = "", Director = "John", ParentID = dept3.ID };
var dept12 = new Department() { ID = Guid.NewGuid(), Name = "user11", Age = "", Director = "John", ParentID = dept4.ID };
var dept13 = new Department() { ID = Guid.NewGuid(), Name = "user12", Age = "", Director = "John", ParentID = dept8.ID };
var dept14 = new Department() { ID = Guid.NewGuid(), Name = "user13", Age = "", Director = "John", ParentID = dept3.ID };
var dept15 = new Department() { ID = Guid.NewGuid(), Name = "user14", Age = "", Director = "John", ParentID = dept4.ID };
var dept16 = new Department() { ID = Guid.NewGuid(), Name = "user15", Age = "", Director = "John", ParentID = dept5.ID };
var dept17 = new Department() { ID = Guid.NewGuid(), Name = "user16", Age = "", Director = "John", ParentID = dept6.ID }; demoData = new List<Department>()
{
dept1,dept2,dept3,dept4,dept5,dept6,dept7,dept8,dept9,dept10,dept11,dept12,dept13,dept14,dept15,dept16,dept17
}; return demoData;
} public Guid ID { get; set; }
public string Name { get; set; }
public string Age { get; set; }
public string Director { get; set; }
public Guid? ParentID { get; set; }
}

JqGrid TreeView使用的更多相关文章

  1. Asp.Net MVC中使用ACE模板之Jqgrid

    第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究.它本身是基于bootstrap和jqueryui,但更nice,整合之后为后台开发节省了大量时间. 发现虽然不是完美,整体效果还是不 ...

  2. ACE模板之Jqgrid

    Asp.Net MVC中使用ACE模板之Jqgrid   第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究.它本身是基于bootstrap和jqueryui,但更nice,整合之后为 ...

  3. Code-NFine:jqgrid 数据绑定

    ylbtech-Code-NFine:jqgrid 数据绑定 1. jqgrid 基本列展示返回顶部 1. 1.1..cshtml $(function () { gridList(); }) fun ...

  4. 1. mvc 树形控件tree + 表格jqgrid 显示界面

    1.界面显示效果 2.资源下载 地址 1. jstree  https://www.jstree.com/   2.表格jqgrid  https://blog.mn886.net/jqGrid/  ...

  5. MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件

    类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...

  6. jqGrid合并表头

    jqGrid是一款常用的制表软件,最近开发刚好用到.记录一下常用功能留着以后查找顺便发扬一下开源精神. 二级表头是一种经常会碰到的需求,很多时候为了方便查找需要在原有的表头上再加一层,区分表格不同列的 ...

  7. jqGrid插件getCol方法的一个改进

    jgGrid插件是非常常用的一个基于jQuery的表格插件,功能非常强大.我最近也频繁使用.但是这个插件也有一些不够完善的地方.比如这个getCol方法. getCol方法接受三个参数 colname ...

  8. jqgrid+bootstrap样式实践

    jqgrid+bootstrap样式实践,报错数据加载,选中,删除等功能 需要引入的样式 bootstrap.min.css ui.jqgrid.css 需要引入的JS jquery.min.js b ...

  9. WPF 自定义列表筛选 自定义TreeView模板 自定义ListBox模板

    有很多项目,都有数据筛选的操作.下面提供一个案例,给大家做参考. 左侧是数据源,搜索框加TreeView控件,右侧是ListBox控件.在左侧数据列点击添加数据,然后点击确定,得到所筛选的数据. 下面 ...

随机推荐

  1. air开发中的requestedDisplayResolution 扫盲

    app.xml里面requestedDisplayResolution 取值可以为high/standard, 如果为high表示设备跟ios声明它需要使用高清屏(其实就是需要最大分辨率) 这里我猜测 ...

  2. Home vs2013

        Microsoft Visual Studio Ultimate 2013 版本 12.0.30110.00 Update 1 Microsoft .NET Framework 版本 4.5. ...

  3. 实体框架 (EF) 入门 => 四、CodeFirst 枚举支持

    当使用 Code First 开发时,通常是从编写用来定义概念(域)模型的 .NET Framework 类开始. 插入记录没有为 Budget 赋值. 数值类型默认值为0,数据库中都为not nul ...

  4. Apache Spark是什么?

    简单地说, Spark是发源于美国加州大学伯克利分校AMPLab的大数据分析平台,它立足于内存计算,从多迭代批量处理出发,兼顾数据仓库. 流处理和图计算等多种计算范式,是大数据系统领域的全栈计算平台. ...

  5. 【原】创建Hive表,分号分隔符“;”引起的异常

    [障碍再现] 在创建支持Map数据结构的Hive表时,抛出如下异常 hive> create table tab_map(name string,info map<string,strin ...

  6. [原创]Devexpress XtraReports 系列 9 创建邮件合并报表

    昨天发表了Devexpress XtraReports系列第八篇[原创]Devexpress XtraReports 系列 8 创建Drill-Through报表,今天我们继续. 今天的主题是创建邮件 ...

  7. qq邮箱发送

    454 Authentication failed, please open smtp flag first!用QQ邮箱测试报错 我用QQ邮箱测试javamail发送邮件的功能,用户名密码设置正确,却 ...

  8. 使用aspose.word两句代码将word转换为pdf

    //Load Document Document document = new Document(@"C:\Users\Administrator\Desktop\人事---新员工转正总结( ...

  9. HDU 3920Clear All of Them I(状压DP)

    HDU 3920   Clear All of Them I 题目是说有2n个敌人,现在可以发n枚炮弹,每枚炮弹可以(可以且仅可以)打两个敌人,每一枚炮弹的花费等于它所行进的距离,现在要消灭所有的敌人 ...

  10. CodeForces 702B Powers of Two (暴力,优化)

    题意:给定 n 个数,问你从有多少下标 i < j,并且 ai + aj 是2的倍数. 析:方法一: 从输入开始暴力,因为 i < j 和 i > j 是一样,所以可以从前面就开始查 ...