个人中心
gpt4 book ai didi

javascript - 树状网格 Bootstrap 在动态创建时不起作用，它正在静态工作

转载 作者：行者123 更新时间：2023-11-30 16:01:27 25 4
gpt4 key购买 nike

下面的代码工作正常，我得到了正确的输出。

<%@ 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/

25 4 0
文章推荐： javascript - chrome 扩展策略声明不起作用
文章推荐： javascript - WebRTC 在 iOS 中与 OWN 服务器的集成
文章推荐： javascript - 谷歌可视化 API : how to apply a pattern on addColumn
文章推荐： javascript - 如何使图像重叠时消失？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com