asp.net-mvc - 如何动态显示具有不同数据源的不同网格

Question

我必须根据数据库中的记录动态显示 KendoUI 拆分器。如果我的数据库中有 n 条记录，我必须显示“n-1”拆分器。在每个分区中，我必须显示具有不同数据源的 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"
            });
          }

现在，我能够动态显示拆分器，并且在每个拆分器中我都可以加载网格，但我想知道如何为不同的网格使用不同的不同数据源。

谢谢

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 + ""); 
                                                }

                                            }
                                        }