下面的代码工作正常，我得到了正确的输出。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TreeView_Table_Project.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Css/jquery.treegrid.css" rel="stylesheet" />
<script src="Js/jquery.treegrid.js"></script>
<script src="Js/jquery.treegrid.bootstrap3.js"></script>
<script>
$(document).ready(function () {
$('.tree').treegrid();
});
</script>
<style>
tr, td {
border: 2px solid black;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<table class="tree">
<tr class="treegrid-1">
<td>Root node 1</td>
<td>Additional info</td>
</tr>
<tr class="treegrid-2 treegrid-parent-1">
<td>Node 1-1</td>
<td>Additional info</td>
</tr>
<tr class="treegrid-3 treegrid-parent-1">
<td>Node 1-1</td>
<td>Additional info</td>
</tr>
</table>
</body>
</html>
动态创建表时下面的代码不起作用
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Css/jquery.treegrid.css" rel="stylesheet" />
<script src="Js/jquery.jqGrid.min.js"></script>
<script src="Js/jquery.treegrid.bootstrap3.js"></script>
<script src="Js/jquery.treegrid.js"></script>
<script>
$(document).ready(function () {
f1();
$('.tree').treegrid();
});
function f1() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Bootstrap_TreeGrid.aspx/StateAnalysis",
data: "{}",
dataType: "json",
success: function (Result) {
Result = Result.d;
drawTab(Result);
},
error: function (Result) {
alert("Error");
}
});
function drawTab(data1) {
var Result = data1;
for (i = 0; i < Result.length; i++) {
var m = i + 1;
if (i == 0) {
$('<tr>', {
'class': 'treegrid-' + m,
}).appendTo($(".tree"));
//$(".tree").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
//row.append($("<tr class='treegrid'+>Jurisdiction</tr>"));
$('<td>', {
text: 'phani',
}).appendTo($('.treegrid-' + m));
}
else {
$('<tr>', {
'class': 'treegrid-parent-1 treegrid-' + m,
}).appendTo($('.tree'));
//$(".tree").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
//row.append($("<tr class='treegrid'+>Jurisdiction</tr>"));
$('<td>', {
text: 'phani',
}).appendTo($('.treegrid-' + m));
}
}
}
}
</script>
<style>
tr, td {
border: 2px solid black;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<table class="tree">
</table>
</body>
</html>
上面的代码没有正常工作。相同的代码通过静态数据工作正常。但是当我尝试动态创建时它不工作。 提前致谢
最佳答案
编辑:我在创建行时更改了树状网格的类。显然，在设置父元素之前应该先声明ID。
所以这应该可以解决问题:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="jquery.treegrid.css" rel="stylesheet" />
<script src="jquery.treegrid.bootstrap3.js"></script>
<script src="jquery.treegrid.js"></script>
<script>
$(document).ready(function () {
f1();
$('.tree').treegrid({
expanderExpandedClass: 'glyphicon glyphicon-minus',
expanderCollapsedClass: 'glyphicon glyphicon-plus'
});
});
function f1() {
var m = 0, line = '';
for (i = 0; i < 3; i++) {
m = i + 1;
if (i == 0) {
line = '<tr class="treegrid-' + m + '">'
+ '<td>Root node 1</td><td>Additional info</td></tr>';
}
else {
line = '<tr class="treegrid-' + m + ' treegrid-parent-' + i + '">'
+ '<td>Node 1-1</td><td>Additional info</td></tr>';
}
$('.tree').append(line);
}
}
</script>
<style>
tr, td {
border: 2px solid black;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<table class="tree"></table>
</body>
</html>
您还可以检查 plunker here .如果这能解决您的问题，请告诉我们。
关于javascript - 树状网格 Bootstrap 在动态创建时不起作用，它正在静态工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37672638/