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控件.在左侧数据列点击添加数据,然后点击确定,得到所筛选的数据. 下面 ...
随机推荐
- js运动 缓冲运动
<!DOCTYPE HTML> <HTML> <meta http-equiv="Content-Type" content="text/h ...
- 关于网站编码显示问题 效果是 访问 带有中文注释的sass文件出现编码报错。
首先查看环境变量 export declare -x HOME="/home/piperck" declare -x LANG="en_US.UTF-8" de ...
- -ms-viewport的问题
Windows 8 中的 Internet Explorer 10 和 Windows Phone 8 Internet Explorer 10 doesn't differentiate devic ...
- SQLCONNECTION使用HTTP通信协议和中间件连接
SQLCONNECTION支持TCP/IP和HTTP两种通信协议和中间件连接.一般地,默认情况下使用TCP/IP协议. HTTP 协议的一个非常重要的优势在于穿越防火墙. SQLCONNECTION使 ...
- Flipping Parentheses(CSU1542 线段树)
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1542 赛后发现这套题是2014东京区域赛的题目,看了排名才发现自己有多low = =! 题目大意 ...
- HDU2947Bicycle Puzzle(组合原理)
题目大意: 你和朋友两人玩游戏,将一个图片均等切割成W* H块,打乱每一小块的位置.拼图游戏开始.每次,可以交换任意两块,记下交换的次数,图片还原游戏结束.得分为执行交换的次数.得分越小越好. 现在, ...
- HDU 5074 Luck Competition (暴力,概率)
题意:有 n 个人参加比赛,给出n-1个人的成绩,然后要选出一个幸运的人,先把所有的分数求平均数,然后再*2/3,那个不大于这个数,且最接近的数,就是最幸运的, 让你设置最后一个人的分,使他是最幸运的 ...
- 利用HTML5开发Android(3)---Android中的调试
通过JS代码输出log信息 Js代码 Js代码: console.log("Hello World"); Log信息: Console: Hello World http://ww ...
- Objc中2维指针作为输出参数时由ARC及@autoreleasepool引发的血案
先看下面一个例子 #import <UIKit/UIKit.h> #import "AppDelegate.h" @interface Something : NSOb ...
- JS瀑布流布局模式(2)
这个例子与上一篇类似,唯一的区别是排序的方式有差别.上一篇是在高度最小的列里插入内容,这个案例是按顺序放置内容. 两种方法各有优缺点.第一种需要在图片内容加载完成的情况下有效,各个列的图高度差异不大. ...