jQWidgets jqxDataTable filaDoubleClick Evento

jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente, optimizado, independiente de la plataforma y ampliamente compatible. El jqxDataTable se utiliza para leer y mostrar los datos de la tabla HTML. Esto también se usa para mostrar datos de varias fuentes de datos como XML, JSON, Array, CSV o TSV.

El evento rowDoubleClick se usa para activarse cuando se hace doble clic en cualquier fila.

Sintaxis:

$('#dataTable').on('rowDoubleClick', function (event){  });

Archivos vinculados: descargue jQWidgets desde el enlace dado. En el archivo HTML, busque los archivos de script en la carpeta descargada.

<link rel=”hoja de estilo” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></ script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text /javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src =”jqwidgets/jqxdatatable.js”></script>

Ejemplo: El siguiente ejemplo ilustra el evento jQWidgets rowDoubleClick .

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href=
"jqwidgets/styles/jqx.base.css"
      type="text/css" />
    <script type="text/javascript" 
            src="scripts/jquery.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdata.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxbuttons.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxscrollbar.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxlistbox.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdropdownlist.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdatatable.js">
    </script>
  </head>
  
  <body>
    <center>
      <h1 style="color: green">GeeksforGeeks</h1>
      <h3>jQWidgets jqxDataTable rowDoubleClick Event</h3>
      <div id="#Data_Table"></div>
      <div id="log"></div>
      <script type="text/javascript">
        $(document).ready(function () {
          $("#Data_Table").jqxDataTable({
            columns: [
              {
                text: "Employee_Name",
                dataField: "Employee_Name",
                width: 190,
              },
              {
                text: "Company",
                dataField: "Company",
                width: 160,
              },
              {
                text: "Designation",
                dataField: "Designation",
                width: 190,
              },
            ],
          });
          $("#Data_Table").on("rowDoubleClick", function (event) {
            var args = event.args;
            var Rows = args.row;
            $("#log").html(JSON.stringify(Rows));
          });
        });
      </script>
      <table id="Data_Table" border="1">
        <thead>
          <tr>
            <th>Employee_Name</th>
            <th>Company</th>
            <th>Designation</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Rohit</td>
            <td>GeeksforGeeks</td>
            <td>HR</td>
          </tr>
          <tr>
            <td>Rahul</td>
            <td>Capgemini</td>
            <td>Software Engineer</td>
          </tr>
          <tr>
            <td>Vivek</td>
            <td>CESC</td>
            <td>Electrical Engineer</td>
          </tr>
          <tr>
            <td>Amit</td>
            <td>Apple</td>
            <td>Manager</td>
          </tr>
        </tbody>
      </table>
    </center>
  </body>
</html>

Producción:

Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-api.htm?search=

Publicación traducida automáticamente

Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *