消失取决于DataTables选择

消失取决于DataTables选择

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

问题描述

限时删除!!

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

 <! -  begin row  - > ; 
< div class =row>
< 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>






< 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>

< / 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 exampledigital 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选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-06 22:51