如何在单击引导模式时获取引导表行值

Posted 2023-05-08

【中文标题】如何在单击引导模式时获取引导表行值

【英文标题】：how to get the bootstrap table row values on clicking bootstrap modal

【发布时间】：2014-05-27 23:40:04

【问题描述】：

我正在使用带有引导程序的 ember js 我有一张使用引导程序的表

 <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Request Id</th>
        <th>Applied By</th>
        <th>Leave Type</th>
        <th>Leave From</th>
        <th>Leave To</th>
        <th>Days</th>
        <th>Status</th>
        <th>Applied date</th>
        <th>Applied/Declined date</th>
      </tr>
    </thead>
    <tbody data-link="row" class="rowlink">
      #each model.pending
      <tr id="ptable" data-toggle="modal" data-target="#pendingrequestsmodal" style="cursor: pointer">
        <td id="eid">id</td>
        <td>employee_id</td>
        <td>type_id</td>
        <td>from_date</td>
        <td>to_date</td>
        <td>days</td>
        <td>status</td>
        <td>to_date</td>
        <td>to_date</td>
      </tr>
      /each
    </tbody>
      </table>

现在当有人点击表格行时，我会显示引导模式以进行确认

  <div id="pendingrequestsmodal" class="modal fade">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Confirmation</h4>
    </div>
    <div class="modal-body">
      <button type="button" class="btn btn-default" data-dismiss="modal">Decline</button>
      <button type="button" class="btn btn-primary" action "pendingAction" target="controller" >Approve</button>
    </div>
  </div>
</div>

我想要这些点击的行详细信息在 ember 中，以便我可以在服务器上处理它

App.ApprovalrequestsController = Ember.ObjectController.extend(
actions: 
pendingAction: function () 
 //here i want to get the details of clicked row 
    //this.transitionToRoute("approvalrequests", rdata);


);

谁能告诉我如何在 ember 中获取点击的行详细信息

【参考方案1】：

有两个问题需要解决，将选定的对象/模型传递给事件（例如单击批准按钮时）能够使用复杂的模板作为模态的内容（例如单击一行时modal 可以包含来自主从关系的表单或数据）。

一种方法是在每次选择一行时刷新模态框的内容。可以在单击行时处理选择，并且可以通过为其分配模板并将其渲染绑定到属性来实现模式的（可能是丰富/复杂的）内容的刷新。

为简单起见，以下示例使用partial 模板来保存模式的内容和具有一个属性 (name) 的简单对象作为模型。

http://emberjs.jsbin.com/gecehotu/1/edit

hbs

<script type="text/x-handlebars" data-template-name="index">
    <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>color</th>
      </tr>
    </thead>
    <tbody data-link="row" class="rowlink">
      #each model
      <tr id="ptable" data-toggle="modal" data-target="#pendingrequestsmodal" style="cursor: pointer" action "selectColor" this target="view">

        <td>name</td>

      </tr>
      /each
    </tbody>
      </table>

      #if selectedColor

          partial "popup"

      /if
  </script>

  <script type="text/x-handlebars" data-template-name="_popup">
  <div id="pendingrequestsmodal" class="modal fade">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Confirmation</h4>
      <br/>
      selectedColor.name
    </div>
    <div class="modal-body">
      <button type="button" class="btn btn-default" data-dismiss="modal">Decline</button>
      <button type="button" class="btn btn-primary" action "pendingAction" selectedColor target="controller" >Approve</button>

    </div>
  </div>
</div>
  </script>

js

App = Ember.Application.create();

App.Router.map(function() 
  // put your routes here
);

App.IndexRoute = Ember.Route.extend(
  model: function() 
    return [name:'red', name:'yellow', name:'blue'];
  
);

App.IndexController = Ember.ArrayController.extend(
  selectedColor:null,
  actions:
    pendingAction:function(color)alert("the color is:"+color.name);
  
);

App.IndexView = Ember.View.extend(
  actions:
    selectColor:function(color)
      this.controller.set("selectedColor",color);
    
  
);

【讨论】：

我只是想知道在我的项目中没有使用任何路由的一件事，并且一切都通过控制器进行......即我的应用程序中的每一次点击都会进入控制器。这会有什么问题吗..@melc

@KranthiSama 它实际上取决于您正在实施的具体内容。通常可以在没有路由的情况下使用emberjs，因为可以使用emberjs 的其他方面以及它的对象模型。尽管如果您正在构建一个跨越 2-3 个页面的完整 Web 应用程序，它可能会变得相当复杂（因为您最终可能会根据控制器属性管理状态）。这是前面的示例，没有任何路由，使用其控制器渲染另一个视图和继承索引控制器emberjs.jsbin.com/parisigu/1

的视图

【参考方案2】：

您可以在

上指定操作

tr

像这样：

 <tr id="ptable" data-toggle="modal" action 'pendingAction' this //blah>

现在，当单击一行时，操作哈希“pendingAction”中的控制器方法会使用一个参数触发，该参数是单击的行，或者更准确地说，是具体化到该行中的对象。

【讨论】：

但我希望控制器的方法“pendingAction”从引导模式触发，而不是直接点击行@Hrishi

你是如何显示模态的？我的意思是，您是否正在处理该行的点击？有复选框之类的吗？

正如我上面的问题中提到的那样，我正在使用 data-target="#pendingrequestsmodal" 并将其用作模态划分的 id。所以它被称为...@Hrishi

【参考方案3】：

要使其正常工作，您将不得不更改触发模式的方式。与其使用 Bootstrap 插件，不如使用 Ember 来处理。

在您的 application 模板中，为您的模态添加一个名为 outlet 的第二个：

<script type="text/x-handlebars">
     outlet
     outlet modal
</script>

然后在你的模板中，添加一个新的action，它将触发模态框的打开并将模型一起传递，如下所示：

<script type="text/x-handlebars data-template-name="pending">
    <tbody data-link="row" class="rowlink">
        #each request in model.pending
            <tr id="ptable"  style="cursor: pointer" action 'openModal' request>
                <td id="eid">item.id</td>
                <td>request.employee_id</td>
                <td>request.type_id</td>
                <td>request.from_date</td>
                <td>request.to_date</td>
                <td>request.days</td>
                <td>request.status</td>
                <td>request.to_date</td>
                <td>request.to_date</td>
            </tr>
        /each
    </tbody>
</script>

之后，您需要像这样设置一个模态模板：

<script type="text/x-handlebars" data-template-name="pendingrequestmodal">
    <div id="pendingrequestsmodal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" action 'closeModal' aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                model.id
                    <button type="button" class="btn btn-default" action 'closeModal'>Decline</button>
                    <button type="button" class="btn btn-primary" action "pendingAction" model>Approve</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop" action 'closeModal'></div>
</script>

在openModal 操作中，我们也传入了模型。当我们对事件做出反应时，这将使其可访问。您需要监听事件并在您的路线中呈现模式，如下所示：

App.ApplicationRoute = Ember.Route.extend(
  actions: 
    openModal: function(request) 
      this.controllerFor('approvalrequests').set('model',request);

      return this.render('pendindrequestmodal', 
        into: 'application',
        outlet: 'modal',
        controller:'approvalrequests'
      );
    ,
    closeModal: function() 
    return this.disconnectOutlet(
      outlet: 'modal',
      parentView: 'application'
    );
  
  
);

在动作中，我们将控制器的 modal 属性设置为我们传入的模型，并将该控制器设置为模态的控制器。这意味着我们可以正常访问模板中的模型属性。我还添加了closeModal 事件，该事件通过断开插座来工作。

最后，我们可以在您的控制器中处理pendingAction 事件。在模式中，我们将模型与动作一起传递，因此也可以在此处访问。

App.ApprovalrequestsController = Ember.ObjectController.extend(
    actions: 
        pendingAction: function (model) 
            this.transitionToRoute("approvalrequests", model);
        
    
);

我猜到了您的一些模板、路由和控制器名称，因此可能需要更改它们以适应您的情况。如果这里的某些东西不起作用，请告诉我，我可以修改答案。

您可以找到有关如何设置模态对话here in the Ember Cookbook 的说明和工作示例。