Question

我必须根据数据库中的记录动态显示KendoUI分割器。如果我的数据库中有n条记录，则必须显示“n-1”分割符。在每个分区中，我必须使用不同的dataSource显示KendoGrid。我已经实现了ajax来从数据库中获取记录，在成功函数中，根据长度，我能够显示所需的分割器数量。在每个分路器中，我放了一个像

的网格

        success: function (json) {
            for (var i = 0; i < json.length; i++) {
               var div = document.createElement('div');
               var griddatSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/Home/splitter",
                            type: "POST",
                            dataType: "json"
                        }
                    },
                    batch: false,
                    schema: {
                        model: {
                            id: "iD",
                            fields: {
                                iD: { type: "number" },
                                name: { type: "string" },
                                email: { type: "string" }
                            }
                        }
                    }

                });

                $('<div id = ' + json[i].name + '>').appendTo("#splitter");
                $("#" + json[i].name).kendoGrid({
                    dataSource: griddatSource,
                    selectable: "multiple",
                    columns: [{ field: "name", title: "Name" },
                              { field: "email", title: "Email"}],
                    editable: false

                }).data("kendoGrid");
            }


            $("#splitter").kendoSplitter({
                orientation: "horizontal"
            });
          }

现在，我能够动态显示分割器，并且在每个分割器中我能够加载网格，但我想知道如何为不同的网格使用不同的不同dataSource。

由于

Answer 1

只需使用变量：

var div = $('<div/>');
div.appendTo('#splitter');
div.someStuff();

Answer 2

我认为你可以从中得到一个简短的想法。

<script type="text/javascript">
function fnc()
{
    el=document.createElement('div');
    el.style.backgroundColor="red";
    el.innerHTML="aaa";
    document.getElementById("adiv").appendChild(el);
    //document.getElementById("adiv").innerHTML=var1;
}
</script>
<div id="adiv">
qwerty
</div>
<input type="button" value="click me" onclick="fnc();">

Answer 3

我认为这就是你的意思？

function (json) {
        for (var i = 0; i < json.length ; i++) {
            //alert(json[i].name);
            var divTag = document.createElement('div');
            divTag.setAttribute('id', json[i].name);
            var newAddedDiv = $('<div>').appendTo("#splitter");
            newAddedDiv.html('fooooo');
       }
}

Answer 4

在ajax功能的成功中，我实现了像

    success: function (json) {
                            for (var i = 0; i < json.length; i++) {
var j = i+1;                                
var div = document.createElement('div');
     $('<div id = ' + json[i].prj '>').appendTo("#splitter");
    ----------------code for loading grid with different datasource--------------                      
    }
     $("#splitter").kendoSplitter({
      orientation: "horizontal"
                            });

     **code for loading grid with different datasource**
    In the datasource read I gave like 
    transport: {
                                            //passing values to the controller to display grid with different dataSource
                                            read: {
                                                url: function (options) {
                                                    return kendo.format("/Project/Display?selectedId=" + j + ""); 
                                                }

                                            }
                                        }

如何动态显示不同dataSource的不同网格

4 个答案: