¿Cómo diseñar la selección de casillas de verificación para la página web usando jQuery EasyUI?

EasyUI es un marco HTML5 para usar componentes de interfaz de usuario basados ​​en tecnologías jQuery, React, Angular y Vue. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores.

En este artículo, aprenderemos a diseñar casillas de verificación de selección únicas y múltiples utilizando el complemento jQuery EasyUI .

Descargas para EasyUI para jQuery:

https://www.jeasyui.com/download/index.php

Nota: Tenga cuidado con las rutas de archivo adecuadas al implementar los siguientes códigos.

Ejemplo 1: el siguiente código demuestra la selección y deselección únicas de casillas de verificación para cuadrículas de datos implementadas para una página web. También proporciona selección múltiple y anulación de la selección de casillas de verificación en el componente de interfaz de usuario.

html

<!doctype html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, 
        maximum-scale=1.0, user-scalable=no">
  
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css">
  
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js">
    </script>
    <!--jQuery libraries of EasyUI  -->
    <script type="text/javascript" src="jquery.easyui.min.js">
    </script>
  
</head>
  
<body>
    <h2>jQuery EasyUI Datagrid checkbox</h2>
      
<p>Click the checkbox to select or de-select.</p>
  
  
    <table id="tableID" class="easyui-datagrid" 
        title="Datagrid CheckBox Selection" 
        style="width:470px;height:400px"
        data-options="rownumbers:false,singleSelect:true,
            url:'datafile.json',method:'get',border:false">
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'studentid',width:80">
                    <b>Student ID</b>
                </th>
                <th data-options="field:'studentname',width:120">
                    <b>Student Name</b>
                </th>
                <th data-options="field:'age',
                    width:80,align:'center'">
                    <b>Age</b>
                </th>
                <th data-options="field:'marksscored',
                                 width:100,align:'center'">
                    <b>Marks Scored</b>
                </th>
                <th data-options="field:'gender',
                    width:60,align:'center'">
                    <b>Gender</b>
                </th>
            </tr>
        </thead>
    </table>
  
    <div style="margin:10px 0;">
        <span>Selection Mode: </span>
  
        <select onchange="$('#tableID')
            .datagrid({singleSelect:(this.value==0)})">
  
            <option value="0">Select Single Row</option>
            <option value="1">Select Multiple Rows</option>
        </select><br />
  
        Check On Select: <input type="checkbox" checked
            onchange="$('#tableID').datagrid(
                {checkOnSelect:$(this).is(':checked')})">
        <br />
  
        Select On Check: <input type="checkbox" checked
            onchange="$('#tableID').datagrid(
                {selectOnCheck:$(this).is(':checked')})">
        <br />
    </div>
</body>
  
</html>

Producción: 

  • Pantalla de casilla de verificación Datagrid: 

  • Ejecución de la casilla de verificación Datagrid: 

Ejemplo 2: 

html

<!doctype html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, 
        maximum-scale=1.0, user-scalable=no">
  
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css">
  
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js">
    </script>
    <!--jQuery libraries of EasyUI  -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js">
    </script>
  
</head>
  
<body>
    <h2>jQuery EasyUI Datagrid selection</h2>
  
      
<p>
        Click the buttons to get data after 
        single/multiple selection.
    </p>
  
      
    <div style="margin:20px 0;">
        <a href="#" class="easyui-linkbutton" 
            onclick="getSelectedData()">
            GetSelected
        </a>
          
        <a href="#" class="easyui-linkbutton" 
            onclick="getMultipleData()">
            GetSelections
        </a>
    </div>
  
    <table id="tableID" class="easyui-datagrid" 
        title="Datagrid CheckBox Selection" 
        style="width:470px;height:400px"
        data-options="rownumbers:false,
            singleSelect:true, url:'datafile.json',
            method:'get', border:false">
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'studentid',width:80">
                    <b>Student ID</b>
                </th>
                <th data-options="field:'studentname',width:120">
                    <b>Student Name</b>
                </th>
                <th data-options="field:'age',
                    width:80,align:'center'">
                    <b>Age</b>
                </th>
                <th data-options="field:'marksscored',
                    width:100, align:'center'">
                    <b>Marks Scored</b>
                </th>
                <th data-options="field:'gender',
                    width:60,align:'center'">
                    <b>Gender</b>
                </th>
            </tr>
        </thead>
    </table>
    <div style="margin:10px 0;">
        <span>Single/Multiple Mode: </span>
        <select onchange="$('#tableID').datagrid({
            singleSelect:(this.value==0)})">
              
            <option value="0">Single Row</option>
            <option value="1">Multiple Rows</option>
        </select><br />
    </div>
  
    <script>
        function getSelectedData() {
            var row = $('#tableID').datagrid('getSelected');
            if (row) {
  
                /* If row is selected, it displays data */
                $.messager.alert('Details', row.studentid 
                    + ":" + row.studentid + ": " 
                    + ",Gender: " + row.gender + ",Name: "
                    + row.studentid + ": " + row.studentname);
            }
        }
        function getMultipleData() {
  
            /* This array is used to push data */
            var resultArray = [];
  
            var rows = $('#tableID')
                .datagrid('getSelections');
  
            /* Traversing through multiple selection */
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
  
                /* Push multiple selection in 
                    result array */
                resultArray.push('<span>' + row.studentid 
                    + ":" + row.studentid + ": " + 
                    ", Gender:" + row.gender + ", Name: "
                    + row.studentid + ": " 
                    + row.studentname + '</span>');
            }
  
            $.messager.alert('Details', 
                resultArray.join('<br/>'));
        }
    </script>
</body>
  
</html>

Producción: 
 

Publicación traducida automáticamente

Artículo escrito por geetanjali16 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 *