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; }
}