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控件.在左侧数据列点击添加数据,然后点击确定,得到所筛选的数据. 下面 ...
随机推荐
- ControlsFX8.0.2中对话框无法判断是否显示的修改
在org.controlsfx.dialog.FXDialog.java中加入 public abstract boolean isShowing(); 在org.controlsfx.dialog. ...
- Win7系统下利用U盘安装Ubuntu14.04麒麟版
转自http://www.360doc.cn/article/14743053_335473181.html 重要提示:在采用u盘安装ubuntu分区时,所有磁盘一定要全部设置成逻辑分区,包括根目录/ ...
- devexpress皮肤设置
DEV的皮肤管理控件:SkinController: TdxSkinController; 皮肤设置:SkinController.SkinName := appInfo.SkinName; TdxR ...
- POJ 1811Prime Test(米勒拉宾素数测试)
直接套用模板,以后接着用 这里还有一个素因子分解的模板 #include <map> #include <set> #include <stack> #includ ...
- CENTOS LINUX查询内存大小、频率
more /proc/meminfo dmidecode [root@barcode-mcs ~]# dmidecode -t memory linux下查看主板内存槽与内存信息 1.查看内存槽数.那 ...
- ASP.NET|跳转(redirect)到其它站点,提示:当前线程终止。
在XAF中,如果使用HttpContext.Response.Redirect()进行跳转,会出现”当前线程终止“的报错,跳转失败. 这时候,应该改用WebApplication.Redirect() ...
- c++中获取代码运行时间
include<ctime> time_t begin,end; begin=clock(); { .............//被测试的代码 } end=clock(); cout ...
- 常用CSS3效果:用text-shadow做CSS3 文字描边
思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...
- WEB标准系列-HTML元素嵌套
转:http://www.smallni.com/element-nesting/ 先来看以下这样一段代码: <ul> <li><h4><a href=&qu ...
- C# WinForm使用Aspose.Cells.dll 导出导入Excel/Doc 完整实例教程
1.添加引用: Aspose.Cells.dll(我们就叫工具包吧,可以从网上下载.关于它的操作我在“Aspose.Cells操作说明 中文版 下载 Aspose C# 导出Excel 实例”一文中的 ...