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-js tutoriel-php.cn

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

高洛峰

Libérer： 2016-12-29 13:44:40

original

1295 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

<. 🎜>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);
}

Copier après la connexion

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"
}]
}]
}]

Copier après la connexion

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 !