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