JqGrid TreeView使用
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使用的更多相关文章
- Asp.Net MVC中使用ACE模板之Jqgrid
第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究.它本身是基于bootstrap和jqueryui,但更nice,整合之后为后台开发节省了大量时间. 发现虽然不是完美,整体效果还是不 ...
- ACE模板之Jqgrid
Asp.Net MVC中使用ACE模板之Jqgrid 第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究.它本身是基于bootstrap和jqueryui,但更nice,整合之后为 ...
- Code-NFine:jqgrid 数据绑定
ylbtech-Code-NFine:jqgrid 数据绑定 1. jqgrid 基本列展示返回顶部 1. 1.1..cshtml $(function () { gridList(); }) fun ...
- 1. mvc 树形控件tree + 表格jqgrid 显示界面
1.界面显示效果 2.资源下载 地址 1. jstree https://www.jstree.com/ 2.表格jqgrid https://blog.mn886.net/jqGrid/ ...
- MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件
类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...
- jqGrid合并表头
jqGrid是一款常用的制表软件,最近开发刚好用到.记录一下常用功能留着以后查找顺便发扬一下开源精神. 二级表头是一种经常会碰到的需求,很多时候为了方便查找需要在原有的表头上再加一层,区分表格不同列的 ...
- jqGrid插件getCol方法的一个改进
jgGrid插件是非常常用的一个基于jQuery的表格插件,功能非常强大.我最近也频繁使用.但是这个插件也有一些不够完善的地方.比如这个getCol方法. getCol方法接受三个参数 colname ...
- jqgrid+bootstrap样式实践
jqgrid+bootstrap样式实践,报错数据加载,选中,删除等功能 需要引入的样式 bootstrap.min.css ui.jqgrid.css 需要引入的JS jquery.min.js b ...
- WPF 自定义列表筛选 自定义TreeView模板 自定义ListBox模板
有很多项目,都有数据筛选的操作.下面提供一个案例,给大家做参考. 左侧是数据源,搜索框加TreeView控件,右侧是ListBox控件.在左侧数据列点击添加数据,然后点击确定,得到所筛选的数据. 下面 ...
随机推荐
- PartialView
一.客户端直接请求分部视图(如使用AJAX) Return PartialView() 不加载布局页面,不执行_ViewStart.cshtml AJAX /Home/LoginPart 二.视图 ...
- compiled python files
[compiled python files] As an important speed-up of the start-up time for short programs that use a ...
- (转载)ETL利器Kettle实战应用解析系列一【Kettle使用介绍】
http://www.cnblogs.com/limengqiang/archive/2013/01/16/kettleapply1.html ETL利器Kettle实战应用解析系列一[Kettle使 ...
- keil中如何得知所编译程序所占空间大小?
keil编译后出现Program Size: data=21.0 xdata=0 code=2231. 这表明 data= 21.0 数据储存器内部RAM占用21字节, xdata=0 数据 ...
- IMAQdx和IMAQ
NI-IMAQdx driver software gives you the ability to acquire images with IEEE 1394 and GigE Vision cam ...
- LabView中,下拉列表和枚举有什么区别?
枚举变量只能针对无符号整型数据U32,U16,U8; 而下拉列表则可以包括扩展精度,双精度,单精度,64位.长.双字节.单字节整型以及各种无符号整型(如下图黑色部分). 下拉列表
- POJ2299Ultra-QuickSort (线段树和归并排序的解法)
题目大意就是说帮你给一些(n个)乱序的数,让你求冒泡排序需要交换数的次数(n<=500000) 此题最初真不会做,我也只是在听了章爷的讲解后才慢慢明白过来的 首先介绍线段树的解法: 我们先将原数 ...
- C#.NET 消息机制
一.消息概述 众人周知,window系统是一个消息驱动的系统, windows操作系统本身有自己的消息队列,消息循环,它捕捉键盘,鼠标的动作生成消息,并将这个消息传给应用程序的消息队列. 余下的工作有 ...
- hdoj 1404 Digital Deletions(博弈论)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1404 一看就是博弈论的题目,但并没有什么思路,看了题解,才明白 就是求六位数的SG函数,暴力一遍,打表 ...
- svn的搭建
http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html