我有一个项目,其中包含一个包含许多行的引导表,每行都有一个打开子表的下拉按钮。我已在子表上启用了sortable,但是单击标题以执行sort函数会导致子表返回到父表。子表永远不会被排序。
父 - table.html.haml
.bootstrap-table-dropdown-overflow
#sla-custom-toolbar
%button.btn.btn-success.otf_service_new{type: "button", aria: {label: "Add Line Item"}}= t(:line_item)[(is_protocol_type_study? (@protocol)) ? :add_line_item_study : :add_line_item_project]
%table.study_level_activities{id: "study-level-activities-table", data: {toggle: 'table', search: "true", "show-columns" => "true", "show-refresh" => "true", "show-toggle" => "true", url: line_items_path(format: :json, protocol_id: protocol.id), striped: "true", toolbar: "#sla-custom-toolbar", "show-export" => "true", "export-types" => ['excel']}}
%thead.primary-header
%tr
%th{data: {class: 'fulfillments_button', align: "left", field: "fulfillments_button"}}
%th{data: {class: 'service', align: "left", field: "service"}}
= t(:line_item)[:service]
%th{data: {class: 'act_num wrap', align: "left", sortable: "true", field: "account_number"}}
= t(:line_item)[:account_number]
%th{data: {class: 'contact wrap', align: "left", sortable: "true", field: "contact"}}
= t(:line_item)[:contact]
%th{data: {class: 'qty_type', align: "left", field: "quantity_type"}}
= t(:line_item)[:qty_type]
%th{data: {class: 'qty_req', align: "left", sortable: "true", field: "quantity_requested"}}
= t(:line_item)[:qty_req]
%th{data: {class: 'qty_rem', align: "left", sortable: "true", field: "quantity_remaining"}}
= t(:line_item)[:qty_rem]
%th{data: {class: 'started', align: "left", sortable: "true", sorter: "dateSorter", field: "date_started"}}
= t(:line_item)[:started]
%th{data: {class: 'components', align: "center", field: "service_components"}}
= t(:line_item)[:components]
%th{data: {class: 'last_fulfillment', align: "left", sortable: "true", sorter: "dateSorter", field: "last_fulfillment"}}
= t(:line_item)[:last_fulfillment]
%th{data: {class: 'options', align: "center", field: "options"}}
= t(:actions)[:actions]
子table.html.haml
%td{colspan: 11}
.bootstrap-table-dropdown-overflow
#fulfillment-custom-toolbar
%button.btn.btn-success.otf_fulfillment_new{type: "button", "aria-label" => "Add Fulfillment", data: {line_item_id: line_item.id}}
= t(:fulfillment)[:add_fulfillment]
%table.fulfillments{id: "fulfillments-table", data: {toggle: 'table', search: "true", "show-columns" => "true", "show-refresh" => "true", "show-toggle" => "true", url: fulfillments_path(format: :json, line_item_id: line_item.id), striped: "true", toolbar: "#fulfillment-custom-toolbar", "show-export" => "true", "export-types" => ['excel']}}
%thead.secondary-header
%tr
%th{data: {class: 'fulfillment_date', align: "left", sortable: "true", sorter: "dateSorter", field: "fulfillment_date"}}
= t(:fulfillment)[:fulfillment_date]
%th{data: {class: 'quantity', align: "left", sortable: "true", field: "quantity"}}
= t(:fulfillment)[:quantity]
%th{data: {class: 'qty_type', align: "left", sortable: "true", field: "quantity_type"}}
= t(:fulfillment)[:qty_type]
%th{data: {class: 'performed_by', align: "left", sortable: "true", field: "performed_by"}}
= t(:fulfillment)[:performed_by]
%th{data: {class: 'components', align: "center", field: "components"}}
= t(:fulfillment)[:components]
%th{data: {class: 'options', align: "center", field: "options"}}
= t(:actions)[:actions]
index.js.coffee
$("#fulfillments_row").attr('data-line_item_id', "<%= @line_item.id %>")
$("#fulfillments_row").html("<%= escape_javascript(render(:partial =>'study_level_activities/fulfillments_table', locals: {line_item: @line_item})) %>");
$("#fulfillments_row").prev("tr").first().find(".otf_fulfillments > .glyphicon").removeClass("glyphicon-refresh").addClass("glyphicon-chevron-down").parents("button").attr('data-original-title', 'Hide Fulfillments')
$("#fulfillments-table").bootstrapTable()