树网格引导程序在动态创建和静态工作时不起作用
树网格引导程序在动态创建和静态工作时不起作用
提问于 2016-06-07 07:06:50
下面的代码运行良好，我得到了正确的输出。
<%@ 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>上面的代码不工作properly.the，相同的代码通过静态data.but运行良好，当我试图动态创建时它不工作。提前谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-08 17:46:43
编辑:在创建行时，我已经更改了树型的类。显然，应该在设置父元素之前声明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>您也可以检查柱塞这里。告诉我们这能解决你的问题。
Stack Overflow用户
发布于 2017-03-04 03:26:22
因为当您插入treegrid时，ajax结果尚未返回，因此您需要在ajax函数中添加异步: false。
$.ajaxSetup({
async : false
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37672638
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号