html 使用KTable创建并填充网格

Posted 2021-05-11

// the properties that we need to define 
var tableData = ko.observable();
var ApiVendors = ko.observableArray();

// expose the properties and methods publicly using the revealing moduel pattern 
var vm = {
    ApiVendors: ApiVendors,
    tableData: tableData,
    populateModel: populateModel
};

// method that hydrates the model used to populate the date on the KTable
function populateModel(data) {
    ApiVendors(data);
    tableData(st.KTable.createTable({
        tableView: $("table#vendorTable"),
        idKey: "VendorId",
        source: ApiVendors(),
        selectable: true
    }));
}

<!--this allows us to pass a list of objects to the view to populate KTable-->
@model IEnumerable<MercuryUserWeb.Core.Models.Vendor>

<!--have to imports these files-->
@Scripts.Render("~/Scripts/st/ktable.js")
@Scripts.Render("~/Scripts/st/sort.js")
@Scripts.Render("~/Scripts/Admins/ApiVendor/index.js")

<script type="text/javascript">
    apiVendorIndex.populateModel(@(Html.Raw(Json.Encode(Model))));
</script>

<!--this is the table that we are populating with data-->
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <table id="vendorTable" class="results selectClick">
            <thead>
                <tr>
                    <th>Vendor Name</th>
                    <th>Invite?</th>
                    <th>Seamless?</th>
                    <th>Date DOS Signed</th>
                    <th>Test Details Provided</th>
                    <th>Complete Date</th>
                    <th>Inactive Date</th>
                    <th>Certificate</th>
                </tr>
            </thead>
            <tbody>
                <!-- ko foreach: tableData() -->
                <tr data-bind="click: $root.getVendor" data-toggle="modal" data-target="#apiVendorModal">
                    <td data-bind="text: VendorName"></td>
                    <td data-bind="text: SendInvite"></td>
                    <td data-bind="text: Seamless"></td>
                    <td data-bind="text: moment(DateDosSigned).format('MM/DD/YYYY')"></td>
                    <td data-bind="text: DateTestBegin == null ? null : moment(DateTestBegin).format('MM/DD/YYYY')"></td>
                    <td data-bind="text: ActiveDate == null ? null : moment(ActiveDate).format('MM/DD/YYYY')"></td>
                    <td data-bind="text: InactiveDate == null ? null : moment(InactiveDate).format('MM/DD/YYYY')"></td>
                    <td data-bind="text: CertificateRequirements"></td>
                </tr>
                <!-- /ko -->
            </tbody>
        </table>
        <!-- ko ifnot: tableData().present -->No data found<!-- /ko -->
    </div>
</div>