主细节与组合框和网格

Question

我为 PHP 使用 Telerik KendoUI 的组合框和网格，我正在尝试建立主要细节关系，因此当组合框中当前选定的项目发生变化时，网格会更新其当前数据。

组合框代码如下：

$comboBox = new \Kendo\UI\ComboBox('combobox');

$comboBox->dataTextField('text')
         ->dataValueField('value')
         ->dataSource(array(
            array('text' => 'Item 1', 'value' => '1'),
            array('text' => 'Item 2', 'value' => '2'),
            array('text' => 'Item 3', 'value' => '3')
         ))
         ->change('onChange');
?>
<div class="demo-section">
    <h3 class="title">ComboBox
    </h3>
<?php
echo $comboBox->render();
?>
</div>

<script>
function onChange() {

}
</script>

使用的网格只是标准网格，它从 PHP 文件中获取数据，return 数据采用 json 格式。

我应该使用 onChange() 事件来更新网格吗？任何例子？你不必使用我的代码。

Answer 1

我认为 onChange 方法是个好主意。如果您的 JSON 数据来自某个变量中的文件，您可以在组合框发生更改时过滤该数据，并在详细信息网格上手动设置数据。类似于：

function onChange(e){

    var selectedComboBoxValue = this.value();

    var gridData = $.grep(myJSONdata, function(item){
        // Filter down your JSON down using jQuery's grep method where myJSONdata is representing the variable holing your JSON array from the php file.
        // Change this equality check to use whatever property is appropriate.
        return item.value == selectedComboBoxValue;
    });

    // Grab a reference to the grid. Modify the selector as needed.
    var grid = $("#grid").data("kendoGrid");

    // Pass in your filtered data to refresh the grid.
    grid.dataSource.data(gridData);
}

主细节与组合框和网格

master detail with combobox and a grid

kendo-ui

kendo-grid