Question

我正在开发复选框树，我需要一个复选框dyanamic值..这是我的代码。我有json格式的静态数据现在我需要将其转换为动态数据，必须从mysql数据库中获取。我已经尝试了所有的东西，但没有任何对我有用，所以请帮助我解决我的问题

 <!DOCTYPE html>
    <html>
    <head>

    </head>
    <body>

            <a class="offline-button" href="../index.html">Back</a>

        <div id="example" class="k-content">

        <div class="container">
            <div class="treeview-back ">
                <div id="treeview"></div>
            </div>
        </div>  

        <div id="result">No nodes checked.</div>

     <?php  $mydata=mysql_query("select id,item_name,parent,menu_type from epic_master_menu ");  
            while($myfetch=mysql_fetch_array($mydata)) {
                        print_r($myfetch); 
            }
                ?>

        <script>
            $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },

                dataSource: [{ 

                    id:1, text: "<?php echo $myfetch['item_name']; ?>", expanded: true, spriteCssClass: "rootfolder", items: [
                        { 
                            id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                                { id: 3, text: "about.html", spriteCssClass: "html" },
                                { id: 4, text: "index.html", spriteCssClass: "html" },
                                { id: 5, text: "logo.png", spriteCssClass: "image" }
                            ]
                        },
                        {
                            id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                                { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                                { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                            ]
                        },
                        {
                            id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                                { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                                { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                                { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                            ]
                        }
                    ]
                }] 
            });

            // function that gathers IDs of checked nodes
            function checkedNodeIds(nodes, checkedNodes) {
                for (var i = 0; i < nodes.length; i++) {
                    if (nodes[i].checked) {
                        checkedNodes.push(nodes[i].id);
                    }

                    if (nodes[i].hasChildren) {
                        checkedNodeIds(nodes[i].children.view(), checkedNodes);
                    }
                }
            }

            // show checked node IDs on datasource change
            $("#treeview").data("kendoTreeView").dataSource.bind("change", function() {
                var checkedNodes = [],
                    treeView = $("#treeview").data("kendoTreeView"),
                    message;

                checkedNodeIds(treeView.dataSource.view(), checkedNodes);

                if (checkedNodes.length > 0) {
                    message = "IDs of checked nodes: " + checkedNodes.join(",");
                } else {
                    message = "No nodes checked.";
                }

                $("#result").html(message);
            });
        </script>

        <style scoped>
            #treeview .k-sprite {
                background-image: url("../../content/web/treeview/coloricons-sprite.png");
            }

            .rootfolder { background-position: 0 0; }
            .folder     { background-position: 0 -16px; }
            .pdf        { background-position: 0 -32px; }
            .html       { background-position: 0 -48px; }
            .image      { background-position: 0 -64px; }

            .treeview-back
            {
                float: left;
                margin: 0 0 2em;
                padding: 20px;
                -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
                box-shadow: 0 1px 2px rgba(0,0,0,0.45), inner 0 0 30px rgba(0,0,0,0.07);
                -webkit-border-radius: 8px;
                -moz-border-radius: 8px;
                border-radius: 8px;
            }

            .container
            {
                margin: 0 30px;
                float: left;
                width: 220px;
            }

            #result
            {
                float: left;
                padding: 10px;
                -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
                box-shadow: 0 1px 2px rgba(0,0,0,0.45), inner 0 0 30px rgba(0,0,0,0.07);
                -webkit-border-radius: 8px;
                -moz-border-radius: 8px;
                border-radius: 8px;
            }
        </style>
    </div>



    </body>
    </html>

Answer 1

首先构建php数组

$data = array(
    id              => 1, 
    text            => 'item_name', 
    expanded        =>  true, 
    spriteCssClass  => "rootfolder", 
    items           =>  array(
        array(
            id              => 2, 
            text            =>  "Kendo UI Project", 
            expanded        =>  true, 
            spriteCssClass  =>  "folder", 
            items           =>  array(
                    array( id =>  3, text =>  "about.html", spriteCssClass =>  "html" ),
                    array( id =>  4, text =>  "index.html", spriteCssClass =>  "html" ),
                    array( id =>  5, text =>  "logo.png", spriteCssClass =>  "image" )
            )
        ),
        array(...),
    )
)

接下来将其编码为json

echo json_encode($data);

如何使用php将动态数据插入json

1 个答案: