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. jqxTextArea representa un widget de área de texto jQuery que se usa para insertar contenido de texto dentro del cuadro de texto.
La propiedad displayMember se usa para establecer o devolver el displayMember de los elementos en jQWidgets. Representa el nombre de una propiedad de objeto que se va a mostrar. El nombre está especificado por la propiedad ‘fuente’ que está contenida en la colección. Acepta valores de tipo String y su valor por defecto es vacío ” .
Sintaxis:
- Establezca la propiedad displayMember:
$("Selector").jqxTextArea({ displayMember: 'firstName' });
- Devuelve la propiedad valueMember:
var dm = $('Selector').jqxTextArea('displayMember');
Archivos vinculados: jQWidgets
<link rel=”hoja de estilo” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min .js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.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/jqxtextarea.js”></script>
Ejemplo: El siguiente ejemplo ilustra la propiedad jqxTextArea displayMember en jQWidgets.
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-1.11.1.min.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxcore.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/jqxtextarea.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxTextArea displayMember Property
</h3>
<textarea id='jqxTA'></textarea>
</center>
<script type="text/javascript">
$(document).ready(function () {
var data = [{
"id": 1,
"name": "Akash",
"address": "Noida"
},
{
"id": 2,
"name": "Deepak",
"address": "Noida"
},
{
"id": 3,
"name": "Rakesh",
"address": "Delhi"
},
{
"id": 4,
"name": "Adarsh",
"address": "Delhi"
},
{
"id": 5,
"name": "Arun",
"address": "Noida"
},];
$('#jqxTA').jqxTextArea({
source: data,
placeHolder: "Name:",
displayMember: "name",
valueMember: "address",
width: 250,
height: 100,
placeHolder: 'Enter Name...'
});
});
</script>
</body>
</html>
Producción:
Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtextarea/jquery-textarea-api.htm