javascript - Bootstrap 中的 KendoGrid

Question

我是 bootstrap 的新手，我们所有的 UI 大部分都是使用 KendoGrid 的。

我们想将 KendoGrid 嵌入到 Bootstrap 的 Modal Window 中，并尝试了下面的代码，该代码发布在 Kendo Grid in Bootstrap 2 or 3 Modal - IE Filters do not work 中。 .但是在这里，close 按钮和 header 位于 Modal 窗口之外，看起来很奇怪。我认为这是因为 bootstrap css 版本。当尝试使用 bootstrap_2.3.2.min.css 时，这个问题就解决了。但是我们应该使用 v3.2.0 。如果有任何解决方案，请告诉我。

http://jsbin.com/yiyon

<div class='modal fade' id='myModal'>
    <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
        <h3><strong>$heading</strong></h3>
    </div>
    <div class='modal-body'>
        <div id="grid"></div>
    </div>
</div>

<script>
    var products = [{
        ProductID: 1,
        ProductName: "Chai",
        SupplierID: 1,
        CategoryID: 1,
        QuantityPerUnit: "10 boxes x 20 bags",
        UnitPrice: 18.0000,
        UnitsInStock: 39,
        UnitsOnOrder: 0,
        ReorderLevel: 10,
        Discontinued: false,
        Category: {
            CategoryID: 1,
            CategoryName: "Beverages",
            Description: "Soft drinks, coffees, teas, beers, and ales"
        },
        popupPermission: true,
        somethingElsePermission: false
    }, {
        ProductID: 2,
        ProductName: "Chang",
        SupplierID: 1,
        CategoryID: 1,
        QuantityPerUnit: "24 - 12 oz bottles",
        UnitPrice: 19.0000,
        UnitsInStock: 17,
        UnitsOnOrder: 40,
        ReorderLevel: 25,
        Discontinued: false,
        Category: {
            CategoryID: 1,
            CategoryName: "Beverages",
            Description: "Soft drinks, coffees, teas, beers, and ales"
        },
        popupPermission: true,
        somethingElsePermission: true
    }
    ];

    columnsettings = [
            "ProductName",
            {
                field: "UnitPrice",
                title: "Unit Price",
                format: "{0:c}",
                width: "130px"
            },
            {
                field: "UnitsInStock",
                title: "Units In Stock",
                width: "130px"
            },
            {
                field: "Discontinued",
                width: "130px"
            }
    ];

    var gridDataSource = new kendo.data.DataSource({
        data: products,
        schema: {
            model: {
                id: "uid",
                fields: {
                    ProductName: { type: "string" },
                    UnitPrice: { type: "number" },
                    UnitsInStock: { type: "number" },
                    Discontinued: { type: "boolean" }
                }
            }
        },
        sort: {
            field: "",
            dir: "desc"
        },
        pageSize: 50
    });



    $(document).on('click', '#openModal', function () {
        $('#myModal').modal('show');
        if (!$('#grid').data('kendoGrid')) {
            createGrid();
        }
    });

    function createGrid() {
        $('#grid').kendoGrid({
            dataSource: gridDataSource,
            scrollable: true,
            reorderable: true,
            resizable: true,
            pageable: {
                refresh: true,
                pageSizes: [50, 100, 200]
            },

            filterable: {
                extra: false,
                operators: {
                    string: {
                        contains: "Contains",
                        startswith: "Starts with"
                    },
                    number: {
                        lt: "Is less than",
                        eq: "Is equal to",
                        gt: "Is greater than"
                    },
                    date: {
                        lt: "Is less than",
                        eq: "Is equal to",
                        gt: "Is greater than"
                    }
                }
            },
            sortable: {
                mode: "single",
                allowUnsort: false
            }
        });
    }

</script>

Answer 1

事实上，你忘记了用另外两个div来嵌入内容:

<div class='modal fade' id='myModal'>
  <div class='modal-dialog'> <!-- First div for setting the dialog -->
    <div class='modal-content'> <!-- Second div for setting the content -->
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
        <h3><strong>$heading</strong></h3>
      </div>
      <div class='modal-body'>
        <div id="grid"></div>
      </div>
    </div>
  </div>
</div>

我已经更新了你的 jsbin:http://jsbin.com/hujomaxituqo/1/