Maison > Article > interface Web > Jquery EasyUI implémente la méthode d'affichage de la case à cocher sur la grille arborescente et de prise de la valeur_jquery sélectionnée

Jquery EasyUI implémente la méthode d'affichage de la case à cocher sur la grille arborescente et de prise de la valeur_jquery sélectionnée

PHP中文网original: 2016-05-16 15:02:552474parcourir

Jquery EasyUI implémente la méthode d'affichage des cases à cocher sur la grille arborescente et de prise de la valeur_jquery sélectionnée

Mettez d'abord le rendu final :

Puis le code :

fichier html :

<body>
<h1>TreeGrid</h1>
<div>
<a id="consle" href="#">consle</a>
</div>
<table id="test" title="Folder Browser" style="width:400px;height:300px" > 
</table> 
</body>

Description : Il n'y a pas de contenu, de titre, et puis un tableau Je mets un bouton consle pour quelques tests, pas besoin Il suffit de supprimer. il, bien sûr il faut citer plusieurs fichiers js et fichiers css :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ws.js"></script>

Puis le fichier js :

$(function(){
$(&#39;#test&#39;).treegrid({ 
url:"data/treegrid_data.json", 
idField:&#39;id&#39;, 
treeField:&#39;name&#39;, 
animate:"true",
rownumbers:"true",
columns:[[ 
{title:&#39;Task Name&#39;,field:&#39;name&#39;,formatter:function(value,rowData,rowIndex){
return " " + rowData.name;
},width:180}, 
{field:&#39;size&#39;,title:&#39;Persons&#39;,width:60,align:&#39;right&#39;}, 
{field:&#39;date&#39;,title:&#39;Begin Date&#39;,width:80}
]] 
});
$("#consle").bind("click",consleclick)
});
function set_power_status(){ 
var idList = ""; 
$("input:checked").each(function(){
var id = $(this).attr("id");
if(id.indexOf("ceshi_")>-1)
idList += id.replace("ceshi_",&#39;&#39;)+&#39;,&#39;;
})
alert(idList);
}
function consleclick(){
var node = $(&#39;#test&#39;).treegrid(&#39;expandAll&#39;,2);
}

Explication : La treegrid d'easyUI est appelée, afin de affichez la case à cocher, créez un formateur pour la première colonne et limitez l'événement d'obtention de la case à cocher sélectionnée pour afficher l'effet. Vous pouvez la supprimer si elle n'est pas nécessaire, ou vous pouvez supprimer l'alerte et la remplacer par d'autres fonctions de traitement d'événements. .

Enfin, joignez le fichier json de données :

[{
"id":1,
"name":"C",
"size":"",
"date":"02/19/2010",
"children":[{
"id":2,
"name":"Program Files",
"size":"120 MB",
"date":"03/20/2010",
"children":[{
"id":21,
"name":"Java",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":211,
"name":"java.exe",
"size":"142 KB",
"date":"01/13/2010"
},{
"id":212,
"name":"jawt.dll",
"size":"5 KB",
"date":"01/13/2010"
}]
},{
"id":22,
"name":"MySQL",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":221,
"name":"my.ini",
"size":"10 KB",
"date":"02/26/2009"
},{
"id":222,
"name":"my-huge.ini",
"size":"5 KB",
"date":"02/26/2009"
},{
"id":223,
"name":"my-large.ini",
"size":"5 KB",
"date":"02/26/2009"
}]
}]
},{
"id":3,
"name":"eclipse",
"size":"",
"date":"01/20/2010",
"children":[{
"id":31,
"name":"eclipse.exe",
"size":"56 KB",
"date":"05/19/2009"
},{
"id":32,
"name":"eclipse.ini",
"size":"1 KB",
"date":"04/20/2010"
},{
"id":33,
"name":"notice.html",
"size":"7 KB",
"date":"03/17/2005"
}]
}]
}]

Remarque :

Ce json est téléchargé directement depuis le site officiel et peut être vu partout, ou il peut être changé en URL.

Ce qui précède est le contenu de la méthode de Jquery EasyUI pour afficher la case à cocher et prendre la valeur sélectionnée sur treegrid_jquery Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：js détermine plusieurs codes d'instance pour accéder au site Web officiel/au site Web mobile en fonction des compétences type_javascript du navigateur du client mobileArticle suivant：js détermine plusieurs codes d'instance pour accéder au site Web officiel/au site Web mobile en fonction des compétences type_javascript du navigateur du client mobile

Articles Liés

Voir plus