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

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中文网

Libérer： 2016-05-16 15:02:55

original

2476 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

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.

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) !