如何在下拉列表更改时更改 table 的数据源

Question

我找不到任何可以帮助我的示例。我有一个客户下拉列表和一个显示 services/products 客户提供的 table。在页面加载时，ddl 设置为客户 0，该客户的数据显示在 table 中。我现在需要更改数据源并在更改下拉列表时刷新 table。

我的代码的主要部分是...

 <div class="card-body">
        <div class="row">
            <div class="col-4">
                <lable for="customerFilter" class="control-label">Customer Filter: </lable>
            </div>
            <div class="col-8">
                <input id="customerFilter" class="form-control" />
            </div>
        </div>

        <div id="toolbar">
            <div class="alert alert-info">You can refine this list by entering an additional filter in the search box on the right. Any text you type will filter the list based on any of the fields containing the text typed.</div>
        </div>
        <div>
            <table id="table"
                   data-classes="table table-hover table-condensed"
                   data-striped="true"
                   data-toolbar="#toolbar"
                   data-pagination="true"
                   data-click-to-select="true"
                   data-search="true"
                   data-show-export="true"
                   data-show-pagination-switch="true"
                   data-show-toggle="true"
                   data-show-columns="true"
                   data-url='@Url.Content("~/SSTCodes/GetSSTCodesByCustomer?CustomerID=0")'>
                <thead>
                    <tr>
                        <th data-field="sstID" data-formatter="btnViewFormatter" data-sortable="true">ID</th>
                        <th data-field="sstRU" data-sortable="true" data-formatter="sstFormatter">Recoverability</th>
                        <th data-field="sstProductCode" data-sortable="true">Product Code</th>
                        <th data-field="sstProductName" data-sortable="true">Product Name</th>
                        <th data-field="sstStockLevel" data-formatter="lowStockFormatter">Stock Level</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">

    cData = @Html.Raw(ViewData("Customers"));

    $("#customerFilter").kendoComboBox({
        dataTextField: "Text",
        dataValueField: "Value",
        change: customerFilterChanged,
        dataSource: cData,
        filter: 'contains'
    });

    function customerFilterChanged() {
        // NEED TO CHANGE THE DATASOURCE Url
        var customer = this.value()
        var url = '@Url.Content("~/SSTCodes/GetSSTCodesByCustomer?CustomerID=")' + customer;
        // NEED TO SET THIS AS THE TABLES data-url AND REFRESH THE DATASOURCE....
    }

    var $table = $('#table');

    function btnViewFormatter(value) {
        return '<a class="btn btn-primary btn-sm" href="@Url.Content("~/SSTCodes/Edit?id=")' + value + '">' + value + '</a>';
    }
    
    function sstFormatter(value) {
        //Removed for clarity
        Return value
    }
    
    function lowStockFormatter(value) {
        //Removed for clarity
        Return value
    }

    function getSelectedRow() {
        var index = $table.find('tr.success').data('index');
        return $table.bootstrapTable('getData')[index];
    }

    $(function () {

        $table.bootstrapTable({
            fixedColumns:    true,
            fixedNumber: 1,
            exportDataType:"all",
            exportTypes:['csv', 'txt', 'xlsx']
        });

        $table.on('click-row.bs.table', function (e, row, $element) {
            $('.success').removeClass('success');
            $($element).addClass('success');
        });

        $table.on('dbl-click-row.bs.table', function (e, row, $element) {
            var url = '@Url.Content("~/SSTCodes/Edit?id=")' + getSelectedRow().sstID;
            window.open(url, '_self');
        })

    });

</script>

函数 customerFilterChanged 是我需要帮助的地方。

Answer 1

我改变了方法...

customerFilterChange 函数现在只重定向页面

function customerFilterChanged() {
    window.location.href = "@Url.Content("~/SSTCodes/Index?id=")" + this.value();
}

控制器已修改，使其具有可选的 id...

Function Index(Optional id As Integer = 0) As ActionResult

        If IsNothing(id) Then
            ViewData("CustomerID") = 0
        Else
            ViewData("CustomerID") = id
        End If

        ViewData("Customers") = Newtonsoft.Json.JsonConvert.SerializeObject(CustomerModel.CustomerDDLList.GetAllCustomers())
        Return View()

    End Function

table 的 data-url 值现在是

data-url='@Url.Content("~/SSTCodes/GetSSTCodesByCustomer?CustomerID=") + @ViewData("CustomerID")' >

工作完成...

如何在下拉列表更改时更改 table 的数据源

How to change the data-source for a table on dropdown-list change

bootstrap-table