recherche

Maison >interface Web >js tutoriel >Jquery EasyUI implémente la méthode d'affichage de la case à cocher sur la grille arborescente et de prise de la valeur 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 sélectionnée

高洛峰
高洛峰original
2016-12-29 13:44:401296parcourir

Mettez d'abord le rendu final :

Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法

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>

Instructions : Il y a pas de contenu, un titre, puis un tableau. J'ai mis un bouton consle pour quelques tests. Vous n'avez pas besoin de le supprimer. Bien sûr, j'ai besoin de citer plusieurs fichiers js et 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 js Fichier : 

$(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);
}
Description : La treegrid d'easyUI est appelée Afin d'afficher la case à cocher, un formateur est fait sur la première colonne afin d'afficher l'effet, l'événement de. l'obtention de la case à cocher sélectionnée est liée. Elle peut être supprimée si elle n'est pas nécessaire. Vous pouvez également supprimer l'alerte et passer à d'autres fonctions de gestion 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.


Pour plus d'articles connexes sur la façon dont Jquery EasyUI implémente la méthode d'affichage de la case à cocher sur la grille arborescente et de prise de la valeur sélectionnée, veuillez faire attention au site Web PHP chinois !


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：Analyse du problème du chargement asynchrone de l'arbre jQuery EasyuiArticle suivant：Analyse du problème du chargement asynchrone de l'arbre jQuery Easyui

Articles Liés

Voir plus