HTML面板出现/消失取决于DataTables选择 [英] HTML panel to appear/disappear depending on DataTables Select

查看：118
本文介绍了HTML面板出现/消失取决于DataTables选择的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我现在使用datatables responsive / select来显示一些数据。我怎样才能做到这一点，当我点击表格中的任何一行时，它会打开col-md-6面板？当没有行被选中时隐藏，然后在选择一行时显示。

 <！ -  begin row  - > ; 
< div class =row> 
 <！ -  begin col-2  - > 
< div class =col-md-2> 
< div id =menu-panel>< / div> 
<！ - 开始面板 - > 
< div class =panel panel-inverse> 
< div class =panel-heading> 
< div class =panel-heading-btn> 
< a href =javascript :; class =btn btn-xs btn-icon btn-circle btn-defaultdata-click =panel-expand>< i class =fa fa-expand>< / i>< / a> ; 
< / div> 
< h4 class =panel-title>数字输入< / h4> 
< / div> 
< div class =alert alert-info fade in> 
< button type =buttonclass =closedata-dismiss =alert> 
< span aria-hidden =true>& times;< / span> 
< / button> 
点击数字输入来编辑其属性。 
< / div> 
< div class =panel-body> 
< table id =data-tableclass =table table-striped table-bordered nowrapwidth =100％> 
< thead> 
< tr> 
< th>输入< / th> 
< th>名称< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr class =gradeA> 
< td> 1< / td> 
< td>数字输入1< / td> 
< / tr> 
< tr class =gradeA> 
< td> 2< / td> 
< td>数字输入2< / td> 
< / tr> 
< tr class =gradeA> 
< td> 3< / td> 
< td>数字输入3< / td> 
< / tr> 
< tr class =gradeA> 
< td> 4< / td> 
< td>数字输入4< / td> 
< / tr> 
< tr class =gradeA> 
< td> 5< / td> 
< td>数字输入5< / td> 
< / tr> 
< tr class =gradeA> 
< td> 6< / td> 
< td>数字输入6< / td> 
< / tr> 
< tr class =gradeA> 
< td> 7< / td> 
< td>数字输入7< / td> 
< / tr> 
< tr class =gradeA> 
< td> 8< / td> 
< td>数字输入8< / td> 
< / tr> 
< tr class =gradeA> 
< td> 9< / td> 
< td>数字输入9< / td> 
< / tr> 
< tr class =gradeA> 
< td> 10< / td> 
< td>数字输入10< / td> 
< / tr> 
< tr class =gradeA> 
< td> 11< / td> 
< td>数字输入11< / td> 
< / tr> 
< tr class =gradeA> 
< td> 12< / td> 
< td>数字输入12< / td> 
< / tr> 
< tr class =gradeA> 
< td> 13< / td> 
< td>数字输入13< / td> 
< / tr> 
< tr class =gradeA> 
< td> 14< / td> 
< td>数字输入14< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
< / div> 
<！ - 结束面板 - > 
< / div> 
 
 
 
 
 
 
 <！ -  begin col-2  - > 
< div class =col-md-6> 
<！ - 开始面板 - > 
< div class =panel panel-inversedata-sortable-id =form-stuff-2> 
< div class =panel-heading> 
< div class =panel-heading-btn> 
< a href =javascript :; class =btn btn-xs btn-icon btn-circle btn-defaultdata-click =panel-expand>< i class =fa fa-expand>< / i>< / a> ; 
< / div> 
< h4 class =panel-title>新RTU FZB-1000  -  FZB-1000< / h4> 
< / div> 
< div class =panel-body> 
< form class =form-horizo​​ntalaction =/method =POST> 
<图例>数字输入基本设置< /图例> 
< div class =form-group> 
< label class =col-md-4 control-label>数字输入：< / label> 
< div class =col-md-8> 
< input type =textclass =form-controlplaceholder =1disabled /> 
< / div> 
< / div> 
< div class =form-group> 
< label class =col-md-4 control-label>显示输入：< / label> 
< div class =col-md-2> 
< input type =checkboxname =value =checked>< br> 
< / div> 
< / div> 
< div class =form-group> 
< label class =col-md-4 control-label>信号名称：< / label> 
< div class =col-md-8> 
< input type =deviceclass =form-controlvalue =Digital Input 1/> 
< / div> 
< / div> 
< / div> 
< / div> 
<！ - 结束面板 - > 
< div class =col-md-8 col-md-offset-4> 
< button type =submitclass =btn btn-sm btn-primary m-r-5>保存< /按钮> 
< button type =submitclass =btn btn-sm btn-default>取消< / button> 
< / div> 
< / div> 
 <！ -  end col-10  - > 
 
< / div> 
<！ - 结束行 - > 
  




  App.restartGlobalFunction（）; 
 App.setPageTitle（'Color Admin |托管表 - 选择'）; 
 $ .getScript（'assets / plugins / DataTables / media / js / jquery.dataTables.js'）。done（function（）{
 $ .getScript（'assets / plugins / DataTables / media / js / dataTables.bootstrap.min.js'）。done（function（）{
 $ .getScript（'assets / plugins / DataTables / extensions / Select / js / dataTables.select.min.js'）。done （function（）{
 $ .getScript（'assets / plugins / DataTables / extensions / Responsive / js / dataTables.responsive.min.js'）。done（function（）{
 $ .getScript（ '（assets / js / table-manage-select.demo.min.js'）。done（function（）{
 TableManageTableSelect.init（）; 
}）; 
}）; 
}）; 
}）; 
}）;


解决方案

字段ID，例如
数字输入： id =数字输入数字和数字信号 id =数字输入 - 名称，这里是代码... 

  $（'。gradeA td'）。 on（'click'，function（）{
 var text = []; 
 text = $（this）.parent（）。find（'td'）; 
 // console。 log（text [0] .innerText）; 
 // console.log（text [1] .innerText）; 
 $（＃digital-input-number）.val（text [0] .innerText）; 
 $（＃digital-input-name）.val（text [1] .innerText）; 
 
 
}）;

这段代码会把你的表的值动态地表示出来，也就是你点击一行数据行转到我想你想看到的形式。


Im using datatables responsive/select right now to display some data. How would I go about making it so when I click on any of these rows in the table, it opens up the "col-md-6" panel? So hidden when no rows are selected, then shown when a row is selected.

<!-- begin row -->
<div class="row">
    <!-- begin col-2 -->
    <div class="col-md-2">
        <div id="menu-panel"></div>
        <!-- begin panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
                <h4 class="panel-title">Digital Inputs</h4>
            </div>
            <div class="alert alert-info fade in">
                <button type="button" class="close" data-dismiss="alert">
                    <span aria-hidden="true">&times;</span>
                </button>
                Click on a Digital Input to edit its properties.
            </div>
            <div class="panel-body">
                <table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
                    <thead>
                        <tr>
                            <th>Input</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="gradeA">
                            <td>1</td>
                            <td>Digital Input 1</td>
                        </tr>
                        <tr class="gradeA">
                            <td>2</td>
                            <td>Digital Input 2</td>
                        </tr>
                        <tr class="gradeA">
                            <td>3</td>
                            <td>Digital Input 3</td>
                        </tr>
                        <tr class="gradeA">
                            <td>4</td>
                            <td>Digital Input 4</td>
                        </tr>
                        <tr class="gradeA">
                            <td>5</td>
                            <td>Digital Input 5</td>
                        </tr>
                        <tr class="gradeA">
                            <td>6</td>
                            <td>Digital Input 6</td>
                        </tr>
                        <tr class="gradeA">
                            <td>7</td>
                            <td>Digital Input 7</td>
                        </tr>
                        <tr class="gradeA">
                            <td>8</td>
                            <td>Digital Input 8</td>
                        </tr>
                        <tr class="gradeA">
                            <td>9</td>
                            <td>Digital Input 9</td>
                        </tr>
                        <tr class="gradeA">
                            <td>10</td>
                            <td>Digital Input 10</td>
                        </tr>
                        <tr class="gradeA">
                            <td>11</td>
                            <td>Digital Input 11</td>
                        </tr>
                        <tr class="gradeA">
                            <td>12</td>
                            <td>Digital Input 12</td>
                        </tr>
                        <tr class="gradeA">
                            <td>13</td>
                            <td>Digital Input 13</td>
                        </tr>
                        <tr class="gradeA">
                            <td>14</td>
                            <td>Digital Input 14</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- end panel -->
    </div>






    <!-- begin col-2 -->
    <div class="col-md-6">
        <!-- begin panel -->
        <div class="panel panel-inverse" data-sortable-id="form-stuff-2">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
                <h4 class="panel-title">New RTU FZB-1000 - FZB-1000</h4>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" action="/" method="POST">
                <legend>Digital Input Basic Settings</legend>
                    <div class="form-group">
                        <label class="col-md-4 control-label">Digital Input:</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" placeholder="1" disabled />
                        </div>
                    </div>
                     <div class="form-group">
                            <label class="col-md-4 control-label">Display Input:</label>
                            <div class="col-md-2">
                                <input type="checkbox" name="" value="" checked><br>
                            </div>
                    </div>
                    <div class="form-group">
                            <label class="col-md-4 control-label">Signal Name:</label>
                            <div class="col-md-8">
                                <input type="device" class="form-control" value="Digital Input 1" />
                            </div>
                        </div>
            </div>
        </div>
        <!-- end panel -->
        <div class="col-md-8 col-md-offset-4">
            <button type="submit" class="btn btn-sm btn-primary m-r-5">Save</button>
            <button type="submit" class="btn btn-sm btn-default">Cancel</button>
        </div>
    </div>
    <!-- end col-10 -->

</div>
<!-- end row -->


App.restartGlobalFunction();
App.setPageTitle('Color Admin | Managed Tables - Select');
$.getScript('assets/plugins/DataTables/media/js/jquery.dataTables.js').done(function() {
$.getScript('assets/plugins/DataTables/media/js/dataTables.bootstrap.min.js').done(function() {
    $.getScript('assets/plugins/DataTables/extensions/Select/js/dataTables.select.min.js').done(function() {
        $.getScript('assets/plugins/DataTables/extensions/Responsive/js/dataTables.responsive.min.js').done(function() {
            $.getScript('assets/js/table-manage-select.demo.min.js').done(function() {
                TableManageTableSelect.init();
            });
        });
    });
});
});

解决方案

You can do something like this.. give your input field id for example digital input: id="digital-input-number" and for digital signal id="digital-input-name" and here goes the code...

 $('.gradeA td').on('click',function(){
                var text=[];
                 text = $(this).parent().find('td');
                    //console.log(text[0].innerText);
                   // console.log(text[1].innerText);
                $("#digital-input-number").val(text[0].innerText);
                $("#digital-input-name").val(text[1].innerText);


            });

this code will put the value of your table to form dynamically i.e you click on one row data of that row goes to the form which i suppose you want to see.

这篇关于HTML面板出现/消失取决于DataTables选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆