jqgrid treeGrid Json，如何在初始化数据时扩展所有节点
jqgrid treeGrid Json , how to expand all nodes when init the data?
Json data as:
{id: "1", name: "Cash", num: "100", debit: "400.00", credit: "250.00",
balance: "150.00", enbl: "1", level: "0", parent: "null",
isLeaf: false, expanded: true, loaded: true}
参数"expanded"似乎没有用?
我不知道如何扩展所有节点或一些指定节点时初始化我的json数据?
致奥列格:谢谢你的演示，但我无法访问那个页面!- -！然后，我给你看我的javascript代码，也许你能发现一些问题:
$(function () {
$('#list').jqGrid({
url: 'SvcDept.ashx',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
datatype: 'json',
mtype: 'GET',
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'Name',
colNames: ['ID', 'Name', 'Director', 'ParentID'],
colModel: [
{ name: 'ID', index: 'ID', hidden: true, width: 1, key: true },
{ name: 'Name', index: 'Name', width: 200, fixed: true },
{ name: 'Director', index: 'Director', width: 100 },
{ name: 'ParentID', index: 'ParentID', hidden: true, width: 1 }
],
autowidth: true,
height: 'auto'
});
});
and My svcdepartment .ashx:
public class SvcDept
{
public void ProcessRequest(HttpContext context)
{
var depts = context.Application["Departments"] as List<Department>;
var nodeid = context.Request["nodeid"];
var n_level = context.Request["n_level"];
Guid? deptID = nodeid != null ? new Guid(nodeid) : new Nullable<Guid>();
int level = n_level != null ? int.Parse(n_level) + 1 : 0;
var subDepts = depts.Where<Department>(x => x.ParentID == deptID).ToList<Department>();
var data = new
{
page = 1,
total = 1,
records = subDepts.Count,
rows = (from dept in subDepts
select new
{
cell = new[]
{
dept.ID.ToString(),
dept.Name,
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) == 0 ? "true":"false", //isLeaf
"true", //expanded
"false"//loaded
}
})
};
context.Response.ContentType = "application/json";
JavaScriptSerializer serializer = new JavaScriptSerializer();
context.Response.Write(serializer.Serialize(data));
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class Department
{
public Guid ID { get; set; }
public string Name { get; set; }
public string Director { get; set; }
public Guid? ParentID { get; set; }
}
可能在代码的其他部分有一些问题。查看演示并与另一个示例进行比较，其中只有expanded属性的值被更改为true。节点将被扩容。如果你确实有问题，你应该把你的代码包含在你的问题的代码中。
UPDATED:你写你在访问演示时遇到了一些问题，这有点奇怪。第一个演示来自答案。我在演示代码中修改了expanded属性的一个值改为true，网格将加载扩展I，包括完整代码"Cash"项。下面是演示的完整HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>https://stackoverflow.com/questions/7208412/jqgrid-checkbox-onclick-update-database</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
'use strict';
var mydata = [
{ id:"1", name:"Cash", num:"100", debit:"400.00",credit:"250.00", balance:"150.00", enbl:"1",
level:"0", parent:"null", isLeaf:false, expanded:true, loaded:true },
{ id:"2", name:"Cash 1", num:"1", debit:"300.00",credit:"200.00", balance:"100.00", enbl:"0",
level:"1", parent:"1", isLeaf:false, expanded:false, loaded:true },
{ id:"3", name:"Sub Cash 1", num:"1",debit:"300.00",credit:"200.00", balance:"100.00", enbl:"1",
level:"2", parent:"2", isLeaf:true, expanded:false, loaded:true },
{ id:"4", name:"Cash 2", num:"2",debit:"100.00",credit:"50.00", balance:"50.00", enbl:"0",
level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true },
{ id:"5", name:"Bank''s", num:"200",debit:"1500.00",credit:"1000.00", balance:"500.00", enbl:"1",
level:"0", parent:"null", isLeaf:false, expanded:true, loaded:true },
{ id:"6", name:"Bank 1", num:"1",debit:"500.00",credit:"0.00", balance:"500.00", enbl:"0",
level:"1", parent:"5", isLeaf:true, expanded:false, loaded:true },
{ id:"7", name:"Bank 2", num:"2",debit:"1000.00",credit:"1000.00", balance:"0.00", enbl:"1",
level:"1", parent:"5", isLeaf:true, expanded:false, loaded:true },
{ id:"8", name:"Fixed asset", num:"300",debit:"0.00",credit:"1000.00", balance:"-1000.00", enbl:"0",
level:"0", parent:"null", isLeaf:true, expanded:false, loaded:true }
],
getColumnIndexByName = function(grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i, l;
for (i = 0, l = cm.length; i < l; i += 1) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
grid = $("#treegrid");
grid.jqGrid({
datatype: "jsonstring",
datastr: mydata,
colNames:["Id","Account","Acc Num","Debit","Credit","Balance","Enabled"],
colModel:[
{name:'id', index:'id', width:1, hidden:true, key:true},
{name:'name', index:'name', width:180},
{name:'num', index:'acc_num', width:80, align:"center"},
{name:'debit', index:'debit', width:80, align:"right"},
{name:'credit', index:'credit', width:80,align:"right"},
{name:'balance', index:'balance', width:80,align:"right"},
{name:'enbl', index:'enbl', width: 60, align:'center',
formatter:'checkbox', editoptions:{value:'1:0'},
formatoptions:{disabled:false}, }
],
height: 'auto',
gridview: true,
rowNum: 10000,
sortname: 'id',
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'name',
caption: "Demonstrate how to use Tree Grid for the Adjacency Set Model",
jsonReader: {
repeatitems: false,
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
},
loadComplete: function () {
var iCol = getColumnIndexByName ($(this), 'enbl'), rows = this.rows, i, c = rows.length;
for (i = 0; i < c; i += 1) {
$("input", rows[i].cells[iCol]).click(function (e) {
var id = $(e.target).closest('tr')[0].id,
isChecked = $(e.target).is(':checked');
alert('clicked on the checkbox in the row with id=' + id +
''nNow the checkbox is ' +
(isChecked? 'checked': 'not checked'));
});
}
}
}); //.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch: 'cn'});;
});
//]]>
</script>
</head>
<body>
<table id="treegrid"><tr><td/></tr></table>
</body>
</html>
相关文章：
- 如何在chrome扩展中存储数据/结果，以及如何使用setTimeout使其只被调用一次
- Chrome扩展:遍历不同的页面并收集数据
- o数据扩展查询在SystemUserRolesSet上不起作用
- 在Knockout中扩展动态和映射数据
- Google Chrome扩展在本地保存数据
- 在Drupal7中扩展字段集时，修改collapse.js以从xml获取附加数据
- jQuery扩展数据持久性
- 从chrome扩展创建一个包含POST数据的链接
- 扩展详细信息Jquery数据表的持久性
- 如何引用Firefox扩展的数据目录中的文件
- 保存每个POST数据的Chrome扩展
- Chrome扩展:没有插入或提取数据
- Firefox扩展:获取上下文菜单时的点击数据
- Chrome扩展-使用javascript定期运行，并永久记录数据
- 通过命令按钮单击更改丰富面可扩展数据表高度
- Chrome扩展如何将数据从内容脚本发送到popup.html
- 使用来自第二个源的数据扩展observableArray
- 用额外数据扩展承诺
- 在jQuery mobile中解析JSON并使用数据扩展listview
- 如何方便地提取数据扩展url
