使用组合框和网格来掌握细节

时间:2016-01-05 19:53:36

标签: kendo-ui kendo-grid

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

这是组合框代码:

$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文件中获取数据的标准网格,它以json格式返回数据。

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

1 个答案:

答案 0 :(得分:0)

我认为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);
}